PDA

View Full Version : [UNKNOWN][3.1]Items don't render in window w. fit layout and TabPanel w. table layout



canxss
25 Dec 2009, 3:51 PM
Hi,

I'm using the latest code from SVN (rev: 5821). I have a window that has "fit" layout which contains a TabPanel with a tab that has "table" layout. But items doesn't render at all in this tab. I've searched the forum and found this (http://www.extjs.com/forum/showthread.php?t=88251) thread. I thought this should be the same problem I've encountered because the items get rendered when I resize the browser as it is said in this thread. So according to the thread a height has to be specified to the child item but I couldn't make this work even though I specified height to TabPanel or the Tab. In fact even though it had worked I wouldn't want to specify height to any of these since I want the TabPanel fit to the window. And in this thread there was a fix suggested by Animal
that should be applied to BoxLayout. I also applied the fix but unfortunately nothing changed.

If I remove the layout: "fit" option on the window the items get rendered. But as I said this isn't what I want. Below is the sample I prepared. It creates a window with the layout: "fit" option and as you will see the items will not be rendered on the first tab which has table layout. On the second tab (which has a form layout) there is a button which creates the same window WITHOUT layout: "fit" option and the items get rendered.



Ext.onReady(function() {

Ext.QuickTips.init();

function showTabPanelTestWin(config) {
config = config || {};
config = Ext.apply({
width: 750,
height: 400,
border: false,
defaults: {
border: false,
bodyStyle:'padding:5px 5px 0'
},
items: [{
border: true,
height: 300,
items: [{
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange: true,
activeTab: 0,
height: 300,
items: [{
height: 300,
title: 'Tab1: Table Layout',
border: false,
labelWidth: 120,
layout: 'table',
layoutConfig: {
columns: 2
},
defaults: {
layout: 'form',
border: false,
labelWidth: 100
},
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'Text1'
}]
}, {
items: [{
xtype: 'textfield',
fieldLabel: 'Text2'
}]
}, {
items: [{
xtype: 'combo',
fieldLabel: 'ComboBox',
store: [],
width: 200
}]
}, {
items: [
new Ext.form.TwinTriggerField({
fieldLabel: 'TwinTrigger',
width: 200
})
]
}]
}, {
title: 'Tab2: Form Layout',
layout: 'form',
border: false,
labelWidth: 120,
items: [{
xtype: 'textfield',
fieldLabel: 'Text1'
}, {
xtype: 'textfield',
fieldLabel: 'Text2'
}, {
xtype: 'combo',
fieldLabel: 'ComboBox',
store: [],
width: 200
}, new Ext.form.TwinTriggerField({
fieldLabel: 'TwinTrigger',
width: 200
}), {
xtype: 'button',
text: 'Create same window WITHOUT layout: "fit"',
handler: function() {
showTabPanelTestWin({ title: 'Window2: WITHOUT "layout: fit"' });
},
scope: this
}]
}]
}]
}]
}, config);

var win = new Ext.Window(config);
win.show();
};

showTabPanelTestWin({ title: 'Window1: with "layout: fit"', layout: 'fit' });
});


Thanks in advance

Condor
26 Dec 2009, 12:44 AM
Haven't tested, but this patch (http://www.extjs.com/forum/showthread.php?p=420133#post420133) probably solves this problem.

meroy
26 Dec 2009, 7:04 AM
Haven't tested, but this patch (http://www.extjs.com/forum/showthread.php?p=420133#post420133) probably solves this problem.

That patch to canLayout will slow down the overall rendering for Ext JS. Look at the 2nd and 3rd set from here. http://www.extjs.com/forum/showthread.php?p=422190#post422190

Before result:



// Ext.Container.prototype.bufferResize = false;
// Profile (1961.562ms, 86171 calls)


After result due to canLayout override (this slows down rendering):



// Ext.Container.prototype.bufferResize = false;
// Profile (2404.014ms, 86171 calls)


Instead, use your override posted here: (this works -- the one above will impact Ext JS's rendering performance)
http://www.extjs.com/forum/showthread.php?p=420377#post420377



Ext.override(Ext.layout.CardLayout, {
renderItem: function(c){
if(!this.deferredRender && c && c.doLayout && !c.rendered){
c.forceLayout = true;
}
Ext.layout.CardLayout.superclass.renderItem.apply(this, arguments);
}
});

meroy
26 Dec 2009, 8:40 AM
BTW: This test case works up to SVN revision 5763. SVN 5764 is when this test case began failing.

meroy
26 Dec 2009, 8:43 AM
There were 2 files changed with SVN 5764. Here's the one for CardLayout.js. The line was commented out.



diff -rbu svn.ext-5763/src/widgets/layout/CardLayout.js svn.ext-5764/src/widgets/layout/CardLayout.js
--- svn.ext-5763/src/widgets/layout/CardLayout.js 2009-11-23 23:39:44.000000000 -0500
+++ svn.ext-5764/src/widgets/layout/CardLayout.js 2009-12-10 22:23:57.000000000 -0500
@@ -87,7 +87,7 @@

constructor: function(config){
Ext.layout.CardLayout.superclass.constructor.call(this, config);
- this.forceLayout = (this.deferredRender === false);
+ // this.forceLayout = (this.deferredRender === false);
},