PDA

View Full Version : [Solved]grid within Tab issue



michaelc
17 Sep 2009, 10:38 AM
I have a new issue that has cropped up in my process.
everything renders correctly at first.

When I click the tab, the 2nd tab shows correctly, but then when I click back all the data within the tab goes away.
click once more and the grid shows but it shows incorrectly, wrong data.

I tried setting up a listener as stated in the FAQ,
http://www.extjs.com/learn/Ext_FAQ_TabPanel (http://www.extjs.com/forum/../learn/Ext_FAQ_TabPanel) with no affect.

Image
http://www.turningpointtech.com/image3.gif

Code



// ----------------------------------------------------------
// Create the Tab panel of the Applications
//-----------------------------------------------------------
var createViewApplicationTabPanel = function(object){
var appCount = object.dataObject.applications.length
if (appCount == 0) {
var emptyContainer = new Ext.Container({
xtype: 'box',
id: object.idPrefix + object.tabSuffix,
autoEl: {
html: 'There are no applications for this license'
}
});

return emptyContainer;
}

var applicationTabPanel = new Ext.TabPanel({
style: 'padding:0px 50px 0px 5px',
id: object.idPrefix + object.tabSuffix,
activeTab: 0,
title: 'Applications',
deferredRender:false,
listeners: {
tabchange: function(tp, newTab){
var um = newTab.getUpdater();
if (um)
um.refresh();
}
}
});
for (i = 0; i <= appCount - 1; i++) {
var applicationViewTab = createApplicationViewTab({
dataObject: object.dataObject.applications[i],
idPrefix: object.idPrefix + '-' + object.tabSuffix,
tabSuffix: '-' + object.dataObject.applications[i].code
})
applicationTabPanel.add(applicationViewTab);

}
return applicationTabPanel;
}
// ----------------------------------------------------------
// Create the view of the License that includes the Application Tab Panel
//-----------------------------------------------------------
var createApplicationViewTab = function(object){
var fieldWidth = 250
var panelID = object.idPrefix + '-' + object.tabSuffix
// ----------------------------------------------------------
// The for services
//-----------------------------------------------------------
//Store that holds the services for an application
var applicationListStore = new Ext.data.JsonStore({
fields: [{
name: 'code',
mapping: 'code'
}, {
name: "componentCode",
mapping: 'componentCode'
}, {
name: "componentName",
mapping: 'componentName'
}, {
name: "core",
mapping: 'core'
}, {
name: "description",
mapping: 'description'
}, {
name: "internal",
mapping: 'internal'
}, {
name: "licenseEffectiveDate",
mapping: 'licenseEffectiveDate',
type: 'date'
}, {
name: "licenseExpirationDate",
mapping: 'licenseExpirationDate',
type: 'date'
}, {
name: "licenseType",
mapping: 'licenseType'
}, {
name: "name",
mapping: 'name'
}]
});

applicationListStore.loadData(object.dataObject.service);

// ----------------------------------------------------------
// Basic Grid Panel that shows all licenses
//-----------------------------------------------------------
var applicationListGrid = new Ext.grid.GridPanel({
border: false,
id: this.moduleName + '-tabpanel-search-tab-licenselist-grid',
height: 400,

viewConfig: {
forceFit: true
},
ds: applicationListStore,
cm: new Ext.grid.ColumnModel([{
header: 'Code',
width: 80,
sortable: true,
dataIndex: 'code'
}, {
header: 'Component Code',
width: 80,
sortable: true,
dataIndex: 'componentCode'
}, {
header: 'Component Name',
width: 80,
sortable: true,
dataIndex: 'componentName'
}, {
header: 'Core',
width: 100,
hidden: true,
sortable: true,
dataIndex: 'core'
}, {
header: 'Description',
width: 50,
hidden: true,
sortable: true,
dataIndex: 'description'
}, {
header: 'Internal',
width: 50,
hidden: true,
sortable: true,
dataIndex: 'internal'
}, {
header: 'Effective Date',
width: 100,
sortable: true,
dataIndex: 'licenseEffectiveDate',
renderer: formatDate
}, {
header: 'Expiration Date',
width: 100,
sortable: true,
dataIndex: 'licenseExpirationDate',
renderer: formatDate
}, {
header: 'License Type',
width: 70,
hidden: true,
sortable: true,
dataIndex: 'licenseType'
}, {
header: 'Service Name',
width: 70,
sortable: true,
dataIndex: 'name'
}])
});

// var applicationViewPanel = new Ext.Container({
var applicationViewPanel = new Ext.Panel({
border: false,
id: panelID,
title: object.dataObject.name,
// autoEl: 'div', // This is the default
layout: "column",
border: false,
items: [{
columnWidth: 0.5,
border: false,
items: [{
xtype: "fieldset",
autoHeight: true,
items: [{
xtype: "textfield",
fieldLabel: "Name",
name: "name",
readOnly: true,
id: panelID + '-name',
width: fieldWidth,
value: object.dataObject.name
}, {
xtype: "textfield",
fieldLabel: "Code",
width: fieldWidth,
readOnly: true,
name: "code",
id: panelID + '-code',
value: object.dataObject.code
}]
}]
}, {
columnWidth: 0.5,
border: false,
items: [{
xtype: "fieldset",
autoHeight: true,
items: [{
xtype: "textfield",
fieldLabel: "Number of Seats",
width: fieldWidth,
readOnly: true,
name: "numberOfSeats",
id: panelID + '-numberOfSeats',
value: object.dataObject.numberOfSeats
}, {
xtype: "textfield",
fieldLabel: "Version",
width: fieldWidth,
readOnly: true,
name: "version",
id: panelID + '-version',
value: object.dataObject.version
}]
}]
}] // container
});

var viewContainer = new Ext.Container({
autoEl: 'div', // This is the default
id: object.idPrefix + object.tabSuffix,
layout: 'anchor',
title: object.dataObject.name,
border: false,
items: [applicationViewPanel, applicationListGrid]
});

return viewContainer;
}

michaelc
17 Sep 2009, 2:52 PM
I tried
layoutOnTabChange : true,
hideMode : 'offsets',

no affect same result.

deferredRender:true,

then
deferredRender:false,
fails to show at all

None seem to have an affect.

michaelc
17 Sep 2009, 5:16 PM
issue was associated with the id.
I needed to create unique id to have selenium run.

29 Oct 2009, 6:45 PM
i meet the same problem,what do you solve?

michaelc
30 Oct 2009, 8:19 AM
i meet the same problem,what do you solve?
in this product I had three tabs, each with 3 or four grids.

I had defined the same ID for more then one grid.
this caused the issue to occur. once the duplicate id's were fixed the issue was resolved.

an ID that is not unique on any component can create lots of issues.

3 Nov 2009, 9:11 PM
my code do well in ext2.0,but not in ext3.0.each grid i have used the unique id.