View Full Version : Two Ext.grid.CheckColumn lists and one store

20 May 2012, 5:02 PM

I have two check columns to build to use the same store, how can I differentiate them? I'm build a method to create the grid with the CheckColumns and execute it two times to generate two grids that I render at two different places on screen. It shows well on the screen, but when select any checkbox from one grid, it select the correspondent from the other one. How can I differentiate them?

function createLists(){
var checkColumn = new Ext.grid.CheckColumn({
dataIndex : 'selected',
id : 'list',
width : 28,
sortable : false,
filter : {
field : {
id : 'comboid',
xtype : "combo",
mode : 'local',
store : new Ext.data.JsonStore({
fields : [ 'label', 'id' ],
idProperty : 'id'
editable : false,
valueField : 'id',
displayField : 'label',
triggerAction : 'all',
value : "all",
listWidth : 190
filterCls : 'row-selection',
showFilterIcon : false,
showRemoveButtonOff : false,
showRemoveButton : false,
forceSelection: true,
fieldEvents : [ "select" ]

var gridColumnModel = new Ext.grid.ColumnModel({
defaults : {
menuDisabled : true
columns : [
id : 'id',
dataIndex : 'label',
width : 193

var grid = new Ext.grid.GridPanel({
plugins : [ checkColumn ],
store: MyJsonStore,
colModel: gridColumnModel,
width: 480,
height: 100,
frame: false

return grid;

21 May 2012, 4:59 AM
What you want to do is use Ext.extend() to create a custom xtype for your class, then instantiate it. You should be able to find examples of how to do this, but basically you create your extension:


mynamespace.myGrid = Ext.extend(Ext.grid.GridPanel, {
// some basic config stuff here
initComponent: function() {

Ext.reg('mynamespace.myGrid', mynamespace.myGrid);

Usually the above lives in its own .js file.

Then later you can just add mynamespace.myGrid to a list of components or call new mynamespace.myGrid().

If all that doesn't make sense, you should really read up on Ext.ns() and Ext.extend() before trying it.

So that's the proper ExtJs way of instantiating a class more than once. You might be interested to know why your way is failing. It is likely because you are accessing your component by its id. You give two components the same id and that causes no end of trouble. There are lots of good models for avoiding ever even setting the id, so there's something else to look into.

If you want to keep using ids, just make sure each of your objects has a unique one so don't set it on your extension class. Set it when you instantiate the class.

items: [{
xtype: 'mynamespace.myGrid',
id: 'topGrid'


var topGrid = new mynamespace.myGrid({
id: 'topGrid'

Depending on how you are instantiating it.