PDA

View Full Version : TabPanel tab body issue



janhov
25 Oct 2010, 6:05 AM
It's time for me to understand this. I have a treepanel inside a window:

http://folk.uio.no/janhov/img/win1.png

Then, I put a tabpanel inside the window instead, containing the treepanel and another option. Now it looks like this:

http://folk.uio.no/janhov/img/win2.png (window size expanded manually after removing the max height config)


My code:



{
xtype: 'textfield',
id: 'map_tf',
fieldLabel: i18n_parent_orgunit,
typeAhead: true,
editable: false,
valueField: 'id',
displayField: 'name',
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: GLOBALS.conf.emptytext,
labelSeparator: GLOBALS.conf.labelseparator,
selectOnFocus: true,
width: GLOBALS.conf.combo_width,
listeners: {
'focus': {
scope: this,
fn: function(tf) {
function showTree() {
var value, rawvalue;
var w = new Ext.Window({
id: 'orgunit_w',
title: 'Select parent organisation unit',
closeAction: 'hide',
autoScroll: true,
width: 280,
autoHeight: true,
height: 'auto',
boxMaxHeight: 500,
items: [
{
xtype: 'tabpanel',
activeTab: 0,
layoutOnTabChange: true,
deferredRender: false,
plain: true,
defaults: {
layout: 'fit',
bodyStyle: 'padding:8px; border:0px'
},
listeners: {
tabchange: function(panel, tab) {
if (tab.id == 'maptab0') {
w.setHeight(500);
tab.syncSize();
}
else if (tab.id == 'maptab1') {
w.setHeight(150);
}
}
},
items: [
{
title: '<span class="panel-tab-title">Parent organisation unit</span>',
id: 'maptab0',
items: [
{
xtype: 'treepanel',
id: 'orgunit_tp',
bodyStyle: 'padding:7px',
height: GLOBALS.util.getMultiSelectHeight(),
autoScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: GLOBALS.conf.path_mapping + 'getOrganisationUnitChildren' + GLOBALS.conf.type
}),
root: {
id: TOPLEVELUNIT.id,
text: TOPLEVELUNIT.name,
hasChildrenWithCoordinates: TOPLEVELUNIT.hasChildrenWithCoordinates,
nodeType: 'async',
draggable: false,
expanded: true
},
listeners: {
'click': function(n) {
if (n.hasChildNodes()) {
tf.setValue(n.attributes.text);
tf.value = n.attributes.id;
tf.node = n;
}
},
'expandnode': {
fn: function(n) {
Ext.getCmp('orgunit_w').syncSize();
}
},
'collapsenode': {
fn: function(n) {
Ext.getCmp('orgunit_w').syncSize();
}
}
}
},
{
xtype: 'panel',
layout: 'table',
items: [
{
xtype: 'button',
text: 'Select',
width: 133,
scope: this,
handler: function() {
if (tf.getValue() && tf.getValue() != this.parentId) {
this.loadFromDatabase(tf.value);
}
Ext.getCmp('orgunit_w').hide();
}
},
{
xtype: 'button',
text: 'Cancel',
width: 133,
handler: function() {
Ext.getCmp('orgunit_w').hide();
}
}
]
}
]
},
{
title: '<span class="panel-tab-title">Level</span>',
id: 'maptab1',
items: [
{
xtype: 'combo',
id: 'maporganisationunitlevel_cb',
fieldLabel: 'Level',
typeAhead: true,
editable: false,
valueField: 'name',
displayField: 'name',
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: GLOBALS.conf.emptytext,
labelSeparator: GLOBALS.conf.labelseparator,
selectOnFocus: true,
width: GLOBALS.conf.combo_width,
store: GLOBALS.stores.organisationUnitLevel
}
]
}
]
}
]
});

var x = Ext.getCmp('center').x + 15;
var y = Ext.getCmp('center').y + 41;
w.setPosition(x,y);
w.show();
}

if (TOPLEVELUNIT) {
showTree.call(this);
}
else {
Ext.Ajax.request({
url: GLOBALS.conf.path_commons + 'getOrganisationUnits' + GLOBALS.conf.type,
params: {level: 1},
method: 'POST',
scope: this,
success: function(r) {
var rootNode = Ext.util.JSON.decode(r.responseText).organisationUnits[0];
TOPLEVELUNIT = {
id: rootNode.id,
name: rootNode.name,
hasChildrenWithCoordinates: rootNode.hasChildrenWithCoordinates
};
showTree.call(this);
}
});
}
}
}
}
},

Animal
25 Oct 2010, 6:35 AM
At every point in the docs where you can put a Component in a Container, it desperately tries to impress upon the reader the importance of layout, what a layout does, and what happens if you omit to think about this.

How have you got this far without seeing that?

janhov
25 Oct 2010, 8:21 AM
Heh ok I get it (good question, though) and it works now. Stay tuned however, I might ignore layout again and post some more stupidity.