Results 1 to 2 of 2

Thread: Two Ext.grid.CheckColumn lists and one store

  1. #1
    Sencha User
    Join Date
    May 2012
    Vote Rating

    Default Two Ext.grid.CheckColumn lists and one store


    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{
                        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;

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Vote Rating


    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts