Extjs Cellediting按鈕

Question

我已激活每個網格行上的按鈕，因此用戶只能激活他們想要編輯的行，並且按鈕更改爲deactivate.how，我可以保存按鈕的狀態以便下次打開時重新打開面板？下面是我的代碼，也：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」。