Sencha Touch 2 - Main Width? - sencha-touch-2

Question

my english is bad and why I write short and direct :o)
my view :
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
maxWidth :800,
maxHeight :400,
config : {
layout : 'fit',
id :'Main',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
my controller :
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[id=Main]',
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}
... ...
concole output from initContainer :
this.x: null
this.id: null
why is x and id NULL instead of 800
Greetings
Volker

Answer 1

yes that's true I'm new.
Have it changed now and still NULL
view
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
name :'Main',
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
contoller
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[name=Main]', // > idMainContainer :'xmain[name="Main"]' <neither
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}

Answer 2

I think you are new in Sencha. Well maxWidth and maxHeight are the config properties of container so you need to include them within config,like this:-
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
Also in the controller if you want to get a reference of a view you will need the name property and not id. Like this:-
View:-
items: [{
name: 'test',
html: 'Test container'
}]
Controller:-
refs:
{
xmain: "xmain",
testContainer: 'container[name="test"]'
}
EDIT
To get the max-width:
this.getXMain().getMaxWidth();