PDA

View Full Version : Controller#render() does not work for a child viewport of a child TabPanel



bwg
14 Jun 2011, 3:15 PM
Sencha Touch version tested:
* 1.1.0
* sencha command generated app (with typos fixed tpl => itemTpl, ext => sencha)

Platform tested against:
* iOS 4.x
* Android 2.2.1
* Safari 5

Description:
* When TabPanel is a child of the main viewport, Controller#render() fails to
draw a view into a viewport that is a child of the TabPanel, even though it
is added to the DOM. Resizing or changing orientation causes the view to appear.
If the TabPanel is the main viewport, then the render() method works as expected.
Explicitly adding the view configuration to the viewport's items array works.
Setting the viewport's fullscreen setting to true also works, but causes the view
to have the wrong height.

Test Case:

app.js


/*
* Setting any of these to true will render the helloworld panel
* If they're all set to false, the helloworld panel will appear on resize or orientation change
*/
var useTabsForMainViewport = false;
var useFullscreenForTabViewport = false;
var useXtypeInsteadOfRender = false;

Test = new Ext.Application({
defaultTarget: "viewport",
name: "Test",
launch: function() {

if (useTabsForMainViewport){
this.viewport = new Test.Tabs();
}
else {
this.viewport = new Test.Viewport();
}

Ext.ControllerManager.each(function(key, value, length) {
var controller = Ext.ControllerManager.get(key);
if (controller.configure) {
controller.configure();
}
});
}
});
Viewport.js


/**
* @class Test.Viewport
* @extends Ext.Panel
*/
Test.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
layout : 'card',
fullscreen: true,

initComponent: function() {

this.items = [
{
xtype: 'tabs',
}
];

Test.Viewport.superclass.initComponent.apply(this, arguments);
}
});


/**
* @class Test.Tabs
* @extends Ext.TabPanel
*/
Test.Tabs = Ext.extend(Ext.TabPanel, {
id: 'tabs',
fullscreen: true,

initComponent: function() {

Ext.apply(this, {
items: [
{
xtype: 'tabviewport',
id: 'tabviewport'
}
]
});

Test.Tabs.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('tabs', Test.Tabs);


/**
* @class Test.TabViewport
* @extends Ext.Panel
*/
Test.TabViewport = Ext.extend(Ext.Panel, {
layout: 'card',

initComponent: function() {
if (useFullscreenForTabViewport) {
Ext.apply(this, {
fullscreen: true
});
}

if (useXtypeInsteadOfRender) {
Ext.apply(this, {
items: [helloworld]
});
}

this.title = "Tab Viewport";
this.iconCls = 'favorites';

Test.TabViewport.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('tabviewport', Test.TabViewport);


/**
* @class TabController
*/
if (!useXtypeInsteadOfRender) {
Ext.regController("TabController", {
configure: function() {
this.viewport = Ext.getCmp('tabviewport');

this.rootView = this.render(helloworld, this.viewport);
}
});
}


/**
*
*/
var helloworld = {
xtype: 'panel',
html: 'Hello World',
scroll: 'vertical'
};
Steps to reproduce the problem:
* See code above

The result that was expected:
* TabPanel and "Hello World" to render

The result that occurs instead:
* Only the TabPanel appears.
* A size or orientation change is required to force "Hello World" to appear