PDA

View Full Version : [Solved]Problem rowselection using two grids, selectionModel points to wrong grid



siebe vos
24 Nov 2010, 1:10 PM
I have a gridpanel A where I can select a record, the record is highlighted. This works fine. When I double click a record, the selected record is shown in a Window which contains a tabpanels which contains gridpanel B. When I select a record on grid B, this records is correctly highlighted. So far so good. But when I close (hide) the window again and return to my first grid A, the highlighting of the record does not work anymore. When I look in firebug at the grids selection model in the rowclick event, the getSelectionModel() functions returns me the selectionmodel of grid B instead of grid A.

(Modified this post, see #5 for sample code and more info to reproduce this problem!)

Does anyone have a clue on this?


Thanks in advance!

Siebe Vos

moegal
24 Nov 2010, 1:19 PM
you may want to post some code. Are the grids unique?

siebe vos
24 Nov 2010, 1:25 PM
So to speak: everything inside the class is unique (nothing has a fixed id and nothing referenced by Id if thats what you mean?)!
I created an abstractmaingridclass of which the code is quite large. The combination of a abstractmainwindowclass and abstractformpanelclass makes it difficult to post any examples. I am working on a large project for a customer and I am not allowed to drop any code on the net. I that case I have to extract all code to create an example (change to this post: I created sample code to reproduce the problem, see #5)

moegal
24 Nov 2010, 1:54 PM
I am not an expert, but it seems like there is a naming issue.

siebe vos
24 Nov 2010, 3:03 PM
I did create an example to reproduce the problem (tested this with ExtJs 3.2.1 and 3.3.0):

First screenshot:
23534
When you click on the first grid the console log shows you the 'testmaingrid, testmaingrid' (see first screenshot red log color) as a result. The logging is done in the 'rowclick' event.
The first console value is a result of: '
grid.getSelectionModel().grid.store.root
The second console value is a result of: '
grid.store.root

When doubleclicking on a row a window is shown containing some tabpanels. Selecting a record on the Test subgrid shows 'testsubgrid,testsubgrid' in the console log (see first screenshot, blue log color).

Second screenshot:
23535
After closing the Window (closeAction = 'hide') and clicking on the first grid again now shows 'testsubgrid, testmaingrid' in the console log (second screenshot) although this should show 'testmaingrid, testmaingrid' as a result. Also the selected row is not highlighted (because of the incorrect selection model).

Here are the sources:

abstractgrid.js:


Ext.ns('Test.grid');

Test.grid.AbstractGrid = Ext.extend(Ext.grid.GridPanel,
function mainGrid() {
return {
viewConfig: {
forceFit: false
},
mainWindow: null,
autoLoad: false,
selModel: new Ext.grid.RowSelectionModel(),
initComponent: function () {
this.store = this.buildStore();
this.columns = this.buildColumns();
Test.grid.AbstractGrid.superclass.initComponent.call(this);
this.addListener('rowclick', this.onRowClick, this);
this.addListener('rowdblclick', this.onRowDblClick, this);
},
buildStore: function () {
throw ('This BuildStore method should be implemented in the derived class')
},
buildColumns: function () {
throw ('This BuildColumns method should be implemented in the derived class')
},
onRowClick: function (grid, rowIndex) {
console.log(grid.getSelectionModel().grid.store.root + ',' + grid.store.root);
grid.getStore().getAt(rowIndex);
},
onRowDblClick: function (grid, rowIndex) {
if (!Ext.isEmpty(grid.mainWindow)) {
grid.mainWindow.show();
}
}
}
}()
);
Ext.reg('abstractgrid', Test.grid.AbstractGrid);



testmaingrid.js:




Ext.ns('Test.grid');
Test.grid.TestMainGrid = Ext.extend(Test.grid.AbstractGrid,
function testMainGrid() {
return {
buildStore: function () {
var testFields = [{
name: 'testId',
mapping: 'TEST_ID'
},
{
name: 'testDescription',
mapping: 'TEST_DESCRIPTION'
}];
var sampleTestData = {
testmaingrid: [{
'TEST_ID': '1',
'TEST_DESCRIPTION': 'Test 1'
},
{
'TEST_ID': '2',
'TEST_DESCRIPTION': 'Test 2'
},
{
'TEST_ID': '3',
'TEST_DESCRIPTION': 'Test 3'
},
{
'TEST_ID': '4',
'TEST_DESCRIPTION': 'Test 4'
}]
};


var storeConfig = {
root: 'testmaingrid',
idProperty: 'TEST_ID',
data: sampleTestData,
fields: testFields
};
returnnew Ext.data.JsonStore(storeConfig);
},
buildColumns: function () {
return [{
header: '<b>Id</b>',
width: 80,
dataIndex: 'testId'
}, {
header: '<b>Description</b>',
width: 150,
dataIndex: 'testDescription'
}]
}
}
}());
Ext.reg('testmaingrid', Test.grid.TestMainGrid);



testsubgrid.js:


Ext.ns('Test.grid');
Test.grid.TestSubGrid = Ext.extend(Test.grid.AbstractGrid,
function testSubGrid() {
return {
buildStore: function () {
var testSubFields = [{
name: 'subTestId',
mapping: 'SUB_TEST_ID'
},
{
name: 'subTestDescription',
mapping: 'SUB_TEST_DESCRIPTION'
}];
var sampleSubTestData = {
testsubgrid: [{
'SUB_TEST_ID': '10',
'SUB_TEST_DESCRIPTION': 'Sub test 1'
},
{
'SUB_TEST_ID': '20',
'SUB_TEST_DESCRIPTION': 'Sub test 2'
},
{
'SUB_TEST_ID': '30',
'SUB_TEST_DESCRIPTION': 'Sub test 3'
},
{
'SUB_TEST_ID': '40',
'SUB_TEST_DESCRIPTION': 'Sub test 4'
}]
};
var storeConfig = {
root: 'testsubgrid',
idProperty: 'SUB_TEST_ID',
data: sampleSubTestData,
fields: testSubFields
};
returnnew Ext.data.JsonStore(storeConfig);
},
buildColumns: function () {
return [{
header: '<b>Sub Id</b>',
width: 80,
dataIndex: 'subTestId'
}, {
header: '<b>Sub description</b>',
width: 150,
dataIndex: 'subTestDescription'
}]
}
}
}());
Ext.reg('testsubgrid', Test.grid.TestSubGrid);



testwindow.js


Ext.ns('Test.window');
Test.window.TabpanelTestWindow = Ext.extend(Ext.Window,
function tabpanelTestWindow() {
return {
height: 335,
width: 825,
modal: true,
layout: 'fit',
width: (Ext.isIE) ? 620 : 590,
height: (Ext.isIE) ? 255 : 245,
draggable: true,
center: true,
closable: true,
maximizable: true,
autoFocus: true,
closeAction: 'hide',
initComponent: function () {
this.items = this.buildWindowItems();
Test.window.TabpanelTestWindow.superclass.initComponent.call(this);
},
buildWindowItems: function () {
return [{
xtype: 'tabpanel',
activeTab: 0,
autoScroll: true,
frame: false,
width: 600,
height: 350,
layoutOnTabChange: true,
items: [{
xtype: 'testsubgrid',
title: 'Test subgrid'
}]
}]
}
}
}());
Ext.reg('tstabpanelwindow', Test.window.TabpanelTestWindow);




testmain.html:


<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
<linkrel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css"/>
<scripttype="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript" src="/extjs/ext-all-debug.js"></script>
<title>Test multiple grids</title>
<scripttype="text/javascript" src="abstractgrid.js"></script>
<scripttype="text/javascript" src="testmaingrid.js"></script>
<scripttype="text/javascript" src="testsubgrid.js"></script>
<scripttype="text/javascript" src="testwindow.js"></script>
<!-- this is the main line-->
<scripttype="text/javascript">
Ext.onReady(function(){
var testWindow =new Test.window.TabpanelTestWindow({});
var testMainGrid =new Test.grid.TestMainGrid({
mainWindow: testWindow
});
var viewport =new Ext.Viewport({
layout:'fit', items:[testMainGrid]
});
});
</script>
</head>
<body>
</body>
</html>



I hope anyone can help me out!


Thanks in advance for taking time for this issue!

Condor
25 Nov 2010, 7:31 AM
Both your grids are using the same selection model.

You need to move "selModel: new Ext.grid.RowSelectionModel()" inside your initComponent method.

siebe vos
25 Nov 2010, 7:34 AM
Solved! A big thank YOU!!!

moegal
25 Nov 2010, 8:44 AM
glad you got it fixed, Condor to the rescue