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,800
    Answers
    452
    Vote Rating
    603
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi