Why Width changes after setActiveItem? - sencha-touch

Question

I have a MainView with 'card' layout has 2 items : MenuView and TestView. When I setActive for the MenuView, it has width equal to the MainView's width which is 1280. In the next action after tap a button in menuView, I setActive the TestView, but it's width is only 0. Can anyone explain that for me ? And give me a way to set the TestView's width to 1280.
Here is my code in sencha touch 1:
'Ext.regController('MainController',{
'index': function(options){
if (!Test.views.mainView){
Test.views.mainView = new Test.views.MainView();
}
console.log('mainView width: '+ Test.views.mainView.getWidth());
console.log('menuView width: '+ Test.views.menuView.getWidth());
Test.views.mainView.setActiveItem(Test.views.menuView);
},
'start': function(options){
console.log('testView width: '+ Test.views.testView.getWidth());
Test.views.mainView.setActiveItem(Test.views.testView);
}
});
Test.views.MainView = Ext.extend(Ext.Panel, {
fullscreen : 'true',
layout : 'card',
cardSwitchAnimation : 'slide',
initComponent : function (){
Ext.apply(Test.views, {
menuView: new Test.views.MenuView(),
testView: new Test.views.TestView()
});
this.items = [Test.views.menuView, Test.views.testView]
Test.views.MainView.superclass.initComponent.call(this);
}
});
Test.views.MenuView = Ext.extend(Ext.Panel,{
initComponent: function(){
this.startButton = new Ext.Button({
text: 'Start',
ui: 'action',
scope: this,
handler: function(){
Ext.dispatch({
controller: Test.controllers.mainController,
action: 'start'
});
}
});
this.exitButton = new Ext.Button({
text: 'Exit',
ui: 'action',
scope: this,
handler: function(){
}
});
this.items = [this.startButton, this.exitButton]
Test.views.MenuView.superclass.initComponent.call(this);
}
});
Test.views.TestView = Ext.extend(Ext.Panel,{
initComponent: function(){
this.html = 'test';
Test.views.TestView.superclass.initComponent.call(this);
}
});

Answer 1

You can set width with setWidth();
Test.views.testView.setWidth('50px');