Extjs Cellediting单击按钮

Question

I have activate button on each row of grid so users can activate only the row they want to edit and the button changes to deactivate.how can I save status of the buttons for next time I reopen the panel? below is my code and also: https://fiddle.sencha.com/#fiddle/ofp

Ext.application({
name : 'Fiddle',

launch : function() {         

    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"id": 1, "name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"id": 2, "name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
            {"id": 3, "name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
            {"id": 4, "name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1, editor: 'textfield'},
            {header: 'change status',  renderer: extjsRenderer},
            {header: 'Phone', dataIndex: 'phone', editor: 'textfield'}
        ],
        height: 200,
        width: 600,
        renderTo: Ext.getBody(),
        selType: 'rowmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    beforeEdit: function(editor, e) {
                        var button = Ext.getCmp('editButton_' + e.record.get('id'));

                        if (button.active)
                            return true;
                        else
                            return false;
                    }
                }
            })
        ]
    });

Code for Activate/deactivate button:

    function extjsRenderer(val,meta,rec) {        
    var id = Ext.id();
    Ext.defer(function () {

            Ext.widget('button', {
                renderTo: id,
                id:'editButton_' + rec.get('id'),
                text: 'Activate',
                width: 75,

        handler: function() {
            if (this.active == null || this.active == false) {
                this.active = true
                this.setText('Deactivate');
                return;
            }

            if (this.active == true) {
                this.active = false;
                this.setText('Activate');
                return;
            }
        }
            });
    //    } 
    }, 50);
    return Ext.String.format('<div id="{0}"></div>', id);
}
}
});

Answer 1

This is rather simple. I made a small fiddle for you: https://fiddle.sencha.com/#fiddle/ods

ExtJS components working like simple object literals, so you can extend them with anything you want. In this case, i added the property "active" which can be checked in the beforeEdit listener.