PDA

View Full Version : Create more than one grid on same page overrite header.



extjs.mscit
28 Jun 2013, 4:00 AM
Hi,
Problem while adding new grid on tabPanel with same column and same field.

I have to design complex userInterface, where user can add number of tab on tabpanel and each tab will have Grid. Because of each grid have same column field and same model, it overlap header on grid.

Please see below image, where second grid on second tab overlap grid column and display column from first tab' first grid.

http://www.sencha.com/forum/image/png;base64,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
44608
Grid on second tab shows column of first grid as well.

I check its HTML and found that, <div> generated from "header.container" have same "Id", As well as columns TPL "{id}-titleEl" generates same id for each grid.

If I remove "{id}-titleEl" from column TPL, it raise error. And does not even generate Grid.

Please help.

friend
28 Jun 2013, 4:19 AM
Without seeing your code it's hard to say what the problem might be. As a guess, I'm betting that there's a problem with the way that your grids are being added to the tab panel.

Can you post a code sample which illustrates your tab panel configuration and how you're adding your grids to the tab panel?

extjs.mscit
28 Jun 2013, 4:48 AM
Please find below my code where I add grid runtime. I set extra parameter for each grid which is criteria for database QUERY.
this.reprogTasksTabs ----> object of TABPANEL.
reprogId ----> unique Id of each program.
this.CreateGrid ----> common function which will return object of GRIDPANEL.
data ----> Selected row information.

NOTE :
gridName: "ReprogHistory" is actually assigns predefine 'Ext.data.Model (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Model)', and it is same for all grid. Only data will vary but DataModel stays same.



data = this.mainGrid.selModel.getSelection()[0].data;
id = idPrefix+"grid-"+reprogId;
tabId = idPrefix+"tab-"+reprogId;

tabs = this.reprogTasksTabs;


if (!document.getElementById(id)) {
//If a grid doesn't exist for this group create one.


historyGrid = this.CreateGrid({
gridName: "ReprogHistory",
gridCfg: {
id: id,
title: data.UPUSER,
viewConfig: {
emptyText: this.none_reprogrammed
}
},
page: Page,
selModelType: "row",
isPermanent: false
});
grid.store.getProxy().extraParams.where = data.PROGID;
grid = historyGrid.grid;
tabTitle = data.FIELDNAME;


tabPanel = {
id: tabId,
closable:true,
title: tabTitle,
layout: "fit",
items: grid
};
tabs.add(tabPanel).show();
grid.getStore().load();


} else {
//Else if a grid already exists set it as the active grid.
tabs.setActiveTab(tabId);
}


Thanks.

tvanzoelen
28 Jun 2013, 6:19 AM
Its better not to use id's in your config. Better change them into itemId.

Because are you sure that every grid/tab you use have its own unique id?


reprogId ----> unique Id of each program

that should be for each component/grid/tab

extjs.mscit
28 Jun 2013, 6:37 AM
Yes I am sure that ID is unique all the time.
And besides that I also check in coding.

if (!document.getElementById(id))
If something exist with same ID on whole document,it will display that.
Otherwise It will create one with new Id.

If I click same row then it does not create new data, but it displays the one having same ID.

tabs.setActiveTab(tabId);

tvanzoelen
28 Jun 2013, 6:58 AM
And what do you mean by this then:


As well as columns TPL "{id}-titleEl" generates same id for each grid.

really better to use itemId and see if it working then....

extjs.mscit
1 Jul 2013, 6:52 AM
It works. I change all "id" to "itemId" and that solve my problem.
Thank you @tvanzoelen.

columns TPL "{id}-titleEl"

This is a part of template defined in Ext.Grid.Column.column, I trace it further to find out where this ID are coming from and I discover it in "column.js" file.

extjs.mscit
5 Jul 2013, 5:42 AM
If we change id to itemId in column configuration then "applyColumnsState" function of "Ext.grid.header.Container" class does not work.


if (col.getStateId && col.getStateId() == columnState.id)
above line never return true, so it does not load state value.

instead use below condition where getItemId() will return "this.itemId".

if (col.getItemId && col.getItemId() == columnState.itemId)

Thanks.

tvanzoelen
5 Jul 2013, 5:57 AM
you pass the stateId as well in the config or override getStateId



getStateId: function() {
var me = this;
return me.stateId || (me.autoGenId ? me.itemId : me.id);
},