PDA

View Full Version : [Solved] tab panel causing layout issues



michaelc
15 Sep 2009, 7:18 PM
So I am trying to do something I have not done before and seem to be creating a problem
What I want is on a given tab panel to add another tab panel into that tab panel with the tabs shown based on data I am receiving.

the first display is when no data is found, the 2nd image is when I add the tab panel with 1 tab.

any help would be wonderful.

Main logic for this


var appCount = object.dataObject.applications.length
if (appCount == 0) {
formPanel.add({
xtype: 'box',
autoEl: {
html: 'There are no applications for this license'
}
});
}
else {
formPanel.add({
xtype: "tabpanel",
activeTab: 0,
id: panelID + "-tabpanel"
});

var applicationTabPanel = Ext.getCmp(panelID + "-tabpanel");
for (i = 0; i <= appCount-1; i++) {

alert(object.dataObject.applications[i].name);
var newLowerPanel = createApplicationViewPanel({
dataObject: object.dataObject.applications[i],
idPrefix: panelID + '-tabpanel-' + object.dataObject.applications[i].name,
title: object.dataObject.applications[i].name
});
applicationTabPanel.add(newLowerPanel);


}
}
return formPanel;
the code for the complete page is after the images.

Image 1
http://www.turningpointtech.com/image1.gif

Image 2
http://www.turningpointtech.com/image2.gif



var createViewPanel = function(object){

var panelID = object.idPrefix + object.tabSuffix;
var formPanel = new Ext.FormPanel({
labelWidth: 150,
//frame: true,
style: 'padding:25px 0px 0px 25px',
width: 400,
id: panelID,
bodyStyle: 'padding:5px 5px 0',
title: object.title,
closable: true,
items: [{
layout: "column",
border: false,
items: [{
columnWidth: 0.5,
style: 'padding:10px 10px 10px 10px',
border: false,
items: [{
xtype: "fieldset",
autoHeight: true,
items: [{
xtype: "textfield",
fieldLabel: "Customer Name",
name: "textvalue",
readOnly: true,
id: panelID + '-customerName',
value: object.dataObject.customerName
}, {
xtype: "textfield",
fieldLabel: "Location",
name: "textvalue",
readOnly: true,
id: panelID + '-locationName',
value: object.dataObject.locationName
}, {
xtype: "textfield",
fieldLabel: "Installation",
name: "textvalue",
readOnly: true,
id: panelID + '-installationID',
value: object.dataObject.installationID
}]
}, {
xtype: "fieldset",
autoHeight: true,
items: [{
xtype: "textfield",
fieldLabel: "Requestor",
readOnly: true,
name: "textvalue",
id: panelID + '-requestorName',
value: object.dataObject.requestorName
}, {
xtype: "textfield",
fieldLabel: "Requestor EMail ",
readOnly: true,
name: "textvalue",
id: panelID + '-requestorEmailAddress',
value: object.dataObject.requestorEmailAddress
}]
}]
}, {
columnWidth: 0.5,
border: false,
items: [{
xtype: "fieldset",
autoHeight: true,
items: [{
xtype: "textfield",
fieldLabel: "License Key",
readOnly: true,
name: "textvalue",
id: panelID + '-licenseKey',
value: object.dataObject.licenseKey
}, {
xtype: "textfield",
fieldLabel: "Status",
readOnly: true,
name: "textvalue",
id: panelID + '-status',
value: object.dataObject.status
}, {
xtype: "textfield",
fieldLabel: "Generated on Date",
readOnly: true,
name: "textvalue",
id: panelID + '-generatedOn',
value: object.dataObject.generatedOn
}, {
xtype: "textfield",
fieldLabel: "Delivered on Date",
readOnly: true,
id: panelID + '-deleveredOn',
name: "textvalue",
value: object.dataObject.deleveredOn
}]
}]
}]
}]
});


// var applicationTabPanel = Ext.getCmp(object.idPrefix + '-application-tab-panel');

var appCount = object.dataObject.applications.length
if (appCount == 0) {
formPanel.add({
xtype: 'box',
autoEl: {
html: 'There are no applications for this license'
}
});
}
else {
formPanel.add({
xtype: "tabpanel",
activeTab: 0,
id: panelID + "-tabpanel"
});

var applicationTabPanel = Ext.getCmp(panelID + "-tabpanel");
for (i = 0; i <= appCount-1; i++) {

alert(object.dataObject.applications[i].name);
var newLowerPanel = createApplicationViewPanel({
dataObject: object.dataObject.applications[i],
idPrefix: panelID + '-tabpanel-' + object.dataObject.applications[i].name,
title: object.dataObject.applications[i].name
});
applicationTabPanel.add(newLowerPanel);


}
}
return formPanel;
}

// ----------------------------------------------------------
// if a row is double clicked within the grid
//-------------------------------------------------------------
var createApplicationViewPanel = function(object){

var createApplicationViewPanel = new Ext.FormPanel({
labelWidth: 150,
//frame: true,
style: 'padding:25px 0px 0px 25px',
width: 400,
id: object.idPrefix,
bodyStyle: 'padding:5px 5px 0',
title: object.title,
html : 'The tab app'
});

// var applicationTabPanel = Ext.getCmp(object.idPrefix + '-application-tab-panel' );
// alert(object.dataObject.applications.length)
return createApplicationViewPanel;
}

Animal
16 Sep 2009, 12:04 AM
The TabPanel needs sizing somehow. Either using explicit size configs, or by using the capabilities of the layout manager of the Container it is in. (or a combination of both)

But basically it needs a height and a width because it sizes its child tabs to fit within itself.

Animal
16 Sep 2009, 12:05 AM
The TabPanel needs sizing somehow. Either using explicit size configs, or by using the capabilities of the layout manager of the Container it is in. (or a combination of both)

But basically it needs a height and a width because it sizes its child tabs to fit within itself.

michaelc
17 Sep 2009, 9:06 AM
Found the issue was in using the tab panel within a form panel.

after a bit of re factoring and using a container vs an actual panel it seemed to clear the problem up.

I now understand the statements made in the conference about using the container.