Extjs Cellediting onclick 一个按钮

Question

我在网格的每一行都有激活按钮，因此用户只能激活他们想要编辑的行，并且按钮变为停用。我如何保存按钮的状态以备下次重新打开面板时使用？下面是我的代码，也是：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;
                    }
                }
            })
        ]
    });

激活/停用按钮代码：

    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

这很简单。我为你做了一个小小提琴：https://fiddle.sencha.com/#fiddle/ods

ExtJS 组件就像简单的对象字面量一样工作，所以你可以用任何你想要的东西来扩展它们。在这种情况下，我添加了可以在 beforeEdit 监听器中检查的属性“active”。