Grid listeners multiples

[morikalina]

Hi,

I derived my own grid class, and when I put multiple grids on a page, I have a weird problem.
Listeners of grids multiplies too.. I will put a small example code, if anyone can solve my problem I will be appreciated.

This is store data of first grid


{'metaData':{'fields':[{'name':'BOLGE'}],'columns':[{'itemId':'BOLGE','dataIndex':'BOLGE','id':'1567','text':'BOLGE','width':200,'filterable':true,'filter':{'type':'string'},'hidden':false}]},'total':'1163','data':[{'RECNO':'1','BOLGE':'GUN.MAR.001'},{'RECNO':'2','BOLGE':'EGE.IZM.001'},{'RECNO':'3','BOLGE':'ICA.ANK.001'},{'RECNO':'4','BOLGE':'EGE.AYD.001'},{'RECNO':'5','BOLGE':'MAR.SAK.001'},{'RECNO':'6','BOLGE':'MAR.IST.002'},{'RECNO':'7','BOLGE':''},{'RECNO':'8','BOLGE':''},{'RECNO':'9','BOLGE':'DOG.MUS.001'},{'RECNO':'10','BOLGE':''},{'RECNO':'11','BOLGE':'DOG.ERC.001'},{'RECNO':'12','BOLGE':''},{'RECNO':'13','BOLGE':'MAR.IST.003'},{'RECNO':'14','BOLGE':''},{'RECNO':'15','BOLGE':'MAR.IST.004'},{'RECNO':'16','BOLGE':'MAR.IST.005'},{'RECNO':'17','BOLGE':'MAR.IST.006'},{'RECNO':'18','BOLGE':'EGE.MAN.002'},{'RECNO':'19','BOLGE':''},{'RECNO':'20','BOLGE':''},{'RECNO':'21','BOLGE':'ICA.AKS.001'},{'RECNO':'22','BOLGE':''},{'RECNO':'23','BOLGE':'DOG.AGR.001'},{'RECNO':'24','BOLGE':'GUN.GAZ.002'},{'RECNO':'25','BOLGE':'MAR.IST.009'}]}



This is store data of second grid


{'metaData':{'fields':[{'name':'BOLGE'}],'columns':[{'itemId':'BOLGE','dataIndex':'BOLGE','id':'1567','text':'BOLGE','width':200,'filterable':true,'filter':{'type':'string'},'hidden':false}]},'total':'1163','data':[{'RECNO':'1','BOLGE':'GUN.MAR.001'},{'RECNO':'2','BOLGE':'EGE.IZM.001'},{'RECNO':'3','BOLGE':'ICA.ANK.001'},{'RECNO':'4','BOLGE':'EGE.AYD.001'},{'RECNO':'5','BOLGE':'MAR.SAK.001'},{'RECNO':'6','BOLGE':'MAR.IST.002'},{'RECNO':'7','BOLGE':''},{'RECNO':'8','BOLGE':''},{'RECNO':'9','BOLGE':'DOG.MUS.001'},{'RECNO':'10','BOLGE':''},{'RECNO':'11','BOLGE':'DOG.ERC.001'},{'RECNO':'12','BOLGE':''},{'RECNO':'13','BOLGE':'MAR.IST.003'},{'RECNO':'14','BOLGE':''},{'RECNO':'15','BOLGE':'MAR.IST.004'},{'RECNO':'16','BOLGE':'MAR.IST.005'},{'RECNO':'17','BOLGE':'MAR.IST.006'},{'RECNO':'18','BOLGE':'EGE.MAN.002'},{'RECNO':'19','BOLGE':''},{'RECNO':'20','BOLGE':''},{'RECNO':'21','BOLGE':'ICA.AKS.001'},{'RECNO':'22','BOLGE':''},{'RECNO':'23','BOLGE':'DOG.AGR.001'},{'RECNO':'24','BOLGE':'GUN.GAZ.002'},{'RECNO':'25','BOLGE':'MAR.IST.009'}]}



These data returns from Fetch.php according to their menuId & gridId.

This is the JS code


Ext.Loader.setConfig({
enabled : true
});


Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.FiltersFeature', 'Ext.toolbar.Paging', 'Ext.ux.RowExpander']);


Ext.QuickTips.init();


Ext.define('AutoGridPanel-4-1',
{
extend : 'Ext.grid.Panel',
border : true,
frame : true,
storeUrl : '/Fetch.php',
items : [],
fields : [],
events : [],
columns : [],
plugins : [],


menuId : null,
gridId : null,


initComponent : function()
{
this.on(
{
itemdblclick : function(view, record, item, index, e, opts)
{
console.log("test");
}
});


Ext.define('GridModel-' + this.menuId + '-' + this.gridId,
{
extend : 'Ext.data.Model',
fields : []
});


this.store = Ext.create('Ext.data.JsonStore',
{
owner : this,
storeId : 'gridStore-' + this.menuId + '-' + this.gridId,
model : 'GridModel-' + this.menuId + '-' + this.gridId,
proxy :
{
type : 'ajax',
actionMethods : 'POST',
url : this.storeUrl,
extraParams :
{
meta : 'true'
},
reader :
{
type : 'json',
root : 'data',
idProperty : 'RECNO',
totalProperty : 'total',
useSimpleAccessors : true
}
},
remoteSort : true,
sorters : [
{
property : 'RECNO',
direction : 'ASC'
}],
pageSize : 25,
listeners :
{
beforeload : function(th, options)
{
var grid = th.owner;
th.proxy.extraParams.menuId = grid.menuId;
th.proxy.extraParams.gridId = grid.gridId;


},
metachange : function(th, meta)
{
if(!th.meta)
{
var grid = th.owner;
th.meta = meta;
grid.reconfigure(null, meta.columns);
}
}
}
});


this.callParent();
this.getStore().load();
}
});


Ext.onReady(function()
{


var Grid1 = Ext.create('AutoGridPanel-4-1',
{
menuId : 1500,
gridId : 0,
id : 'Grid1',
title : 'Grid1',
region : 'center'
});


var Grid2 = Ext.create('AutoGridPanel-4-1',
{
menuId : 1500,
gridId : 1,
region : 'south',
height : 250,
id : 'Grid2',
title : 'Grid2',
});


var newViewport = Ext.create('Ext.Viewport',
{
layout : 'border',
items : [Grid1, Grid2]
});


newViewport.show();
});


Buggy part is, when I double click a record in a grid, 'itemdblclick' listeners works 2 times because there are 2 grids. If I have 3 grids, it will work 3 times.

This is one of the big problems I have. There are some other problems like;
- If a grid has checkbox, when I use reconfigure() of any another grids, checkbox counts increase, new checkboxes comes to columns.


I'm using ExtJS 4.1.0

Thanks for helps, if you have questions please ask.

[scottmartin]

You need to place these listeners on each instance (create) and not when you define.

Also, you should use 4.1.1

Scott.

[morikalina]

You mean I need to write same listeners everytime I create a grid? What is the meaining of derivating then? :) I have 4 listeners (about 200 lines of codes) that should be on all grids. I don't want to think about these listeners everytime I create a grid. Also it is possible and working on 3.4, so why not on 4.1?

Btw, I don't use 4.1.1 because grid.reconfigure() function is not working properly..

[morikalina]

Also when I put a listener to a grid on creation, the other grid fires that listener too. So that is not the solution.

[scottmartin]

OK.. in taking a closer look... lets go back to your original code ...

Try commenting out all of your array items and see if that helps.. it is suspected that these are getting shared ...

L:19-23
items,fields,events,columns,plugins

L:44
fields

A few other quick notes ...

-Quicktips should be inside your onReady()
-newViewport.show() is not required ... viewport displays automatically.

See if this helps.

Scott.

[morikalina]

Thanks for notes.

And about your suggestions;

Some of them gives errors, but when I commented events line, it worked about listener multiplying :)
Also it worked about checkbox multiplying

When I commented columns: [] I get the error -->


TypeError: headerCtCfg is undefined




me.columns = headerCtCfg.items;ext-all-debug.js (line 92248)






Now I have another problem, this time regardless of grid counts, grid.store.metachange listener multiplies everytime grid's store loads.

Code is like that


Ext.Loader.setConfig({
enabled : true
});


Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.FiltersFeature', 'Ext.toolbar.Paging', 'Ext.ux.RowExpander']);


Ext.define('AutoGridPanel-4-1',
{
extend : 'Ext.grid.Panel',
border : true,
frame : true,
storeUrl : '/Fetch.php',
columns : [],
menuId : null,
gridId : null,


initComponent : function()
{
this.on(
{
itemdblclick : function(view, record, item, index, e, opts)
{
console.log("test");
}
});


Ext.define('GridModel-' + this.menuId + '-' + this.gridId,
{
extend : 'Ext.data.Model'
});


this.store = Ext.create('Ext.data.JsonStore',
{
owner : this,
storeId : 'gridStore-' + this.menuId + '-' + this.gridId,
model : 'GridModel-' + this.menuId + '-' + this.gridId,
proxy :
{
type : 'ajax',
actionMethods : 'POST',
url : this.storeUrl,
extraParams :
{
meta : 'true'
},
reader :
{
type : 'json',
root : 'data',
idProperty : 'RECNO',
totalProperty : 'total',
useSimpleAccessors : true
}
},
remoteSort : true,
sorters : [
{
property : 'RECNO',
direction : 'ASC'
}],
pageSize : 25,
listeners :
{
beforeload : function(th, options)
{
var grid = th.owner;
th.proxy.extraParams.menuId = grid.menuId;
th.proxy.extraParams.gridId = grid.gridId;


},
metachange : function(th, meta)
{
console.log("metachange");
if(!th.meta)
{
var grid = th.owner;
th.meta = meta;
grid.reconfigure(null, meta.columns);
}
}
}
});


this.callParent();
this.getStore().load();
}
});


Ext.onReady(function()
{


Ext.QuickTips.init();


var Grid1 = Ext.create('AutoGridPanel-4-1',
{
menuId : 1500,
gridId : 0,
id : 'Grid1',
title : 'Grid1',
region : 'center'
});


var Grid2 = Ext.create('AutoGridPanel-4-1',
{
menuId : 1500,
gridId : 1,
region : 'south',
height : 250,
id : 'Grid2',
title : 'Grid2',
});


var newViewport = Ext.create('Ext.Viewport',
{
layout : 'border',
items : [Grid1, Grid2]
});
Grid2.getStore().load();
Grid2.getStore().load();
});

Grid1's first store load-> log - metachange
Grid2's first store load -> log- metachange
Grid2's second store load-> log - metachange metachange
Grid2's third store load-> log - metachange metachange metachange

Can you help me with this problem too, or I need to open a new thread?