1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Answers
    1
    Vote Rating
    0
    eternasparta is on a distinguished road

      0  

    Default Answered: CellEditing plugin doesn't work if i have more than one grids

    Answered: CellEditing plugin doesn't work if i have more than one grids


    Hi all,
    I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.
    If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.
    Anyone know how to solve this problem?

    I have made a little minimized example that is affected with this problem.

    In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all.
    If you add and edit the cell in the second grid, it work.

    http://jsfiddle.net/eternasparta/amHRr/

  2. Change your code so that you assign the items inside initComponent:

    Code:
    Ext.require(['Ext.form.*', 'Ext.tip.*']);
    
    var store = Ext.create('Ext.data.Store', {
        fields: ['label'],
        data: []
    });
    Ext.define('AM.view.editpanel.CustomList', {
        extend: 'Ext.container.Container',
        alias: 'widget.sclist',
        layout: {
            type: 'vbox',
            align: 'stretch'
    
        },
        flex: 1,
        initComponent: function() {
            this.items = [{
                xtype: 'grid',
                plugins: [xt.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 2
                })],
                selModel: {
                    selType: 'cellmodel'
                },
                tbar: [{
                    text: 'Add',
                    actionId: 'add',
                    handler: function(th, e, eArg) {
                        var store = th.up('grid').store;
                        var r = Ext.create(store.model.modelName);
                        store.insert(0, r);
    
                    }
                }],
                height: 200,
                store: store,
                columns: [{
                    text: 'Name',
                    dataIndex: 'label',
                    flex: 1,
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false
                    }
                }, {
                    xtype: 'actioncolumn',
                    width: 30,
                    sortable: false,
    
                    actionId: 'delete',
                    header: 'delete',
                    items: [{
                        tooltip: 'tool'
    
                    }]
                }],
                flex: 1
            }];
    
            this.callParent(arguments);
    
            var sto = Ext.create('Ext.data.Store', {
                fields: ['label'],
                data: []
            });
            this.down('grid').bindStore(sto);
            this.down('grid').columns[0].text = 'Name';
            this.down('grid').columns[0].dataIndex = 'label';
        }
    });
    
    Ext.onReady(function() {
    
        Ext.QuickTips.init();
    
        var grid1 = Ext.create('AM.view.editpanel.CustomList', {
            renderTo: Ext.getBody()
        });
        var grid2 = Ext.create('AM.view.editpanel.CustomList', {
            renderTo: Ext.getBody()
        });
    });
    The problem is that you're declaring the plugins array on the prototype, which means it will be shared across instances.

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,655
    Answers
    431
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Change your code so that you assign the items inside initComponent:

    Code:
    Ext.require(['Ext.form.*', 'Ext.tip.*']);
    
    var store = Ext.create('Ext.data.Store', {
        fields: ['label'],
        data: []
    });
    Ext.define('AM.view.editpanel.CustomList', {
        extend: 'Ext.container.Container',
        alias: 'widget.sclist',
        layout: {
            type: 'vbox',
            align: 'stretch'
    
        },
        flex: 1,
        initComponent: function() {
            this.items = [{
                xtype: 'grid',
                plugins: [xt.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 2
                })],
                selModel: {
                    selType: 'cellmodel'
                },
                tbar: [{
                    text: 'Add',
                    actionId: 'add',
                    handler: function(th, e, eArg) {
                        var store = th.up('grid').store;
                        var r = Ext.create(store.model.modelName);
                        store.insert(0, r);
    
                    }
                }],
                height: 200,
                store: store,
                columns: [{
                    text: 'Name',
                    dataIndex: 'label',
                    flex: 1,
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false
                    }
                }, {
                    xtype: 'actioncolumn',
                    width: 30,
                    sortable: false,
    
                    actionId: 'delete',
                    header: 'delete',
                    items: [{
                        tooltip: 'tool'
    
                    }]
                }],
                flex: 1
            }];
    
            this.callParent(arguments);
    
            var sto = Ext.create('Ext.data.Store', {
                fields: ['label'],
                data: []
            });
            this.down('grid').bindStore(sto);
            this.down('grid').columns[0].text = 'Name';
            this.down('grid').columns[0].dataIndex = 'label';
        }
    });
    
    Ext.onReady(function() {
    
        Ext.QuickTips.init();
    
        var grid1 = Ext.create('AM.view.editpanel.CustomList', {
            renderTo: Ext.getBody()
        });
        var grid2 = Ext.create('AM.view.editpanel.CustomList', {
            renderTo: Ext.getBody()
        });
    });
    The problem is that you're declaring the plugins array on the prototype, which means it will be shared across instances.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Answers
    1
    Vote Rating
    0
    eternasparta is on a distinguished road

      0  

    Default


    Thank you evant for your answer.

    Simply perfect!

Thread Participants: 1

Tags for this Thread