RowEditing插件：禁用編輯和動作列刪除圖標

我的應用程序有一個小網格後臺，允許de admin在窗體上編輯組合框列表。RowEditing插件：禁用編輯和動作列刪除圖標

網格記錄可以使用rowediting插件進行編輯，並通過單擊動作列圖標進行刪除。

但是，組合框包含的項目無法編輯，因爲在組合框上顯示時會觸發顯示另一個表單域的事件。

如何禁用編輯該項目的能力（使用圖標更新和刪除）？

小提琴：https://fiddle.sencha.com/#fiddle/us6

來源

2015-10-05 josei

所以當行顯示'NOT EDIT'時，你不想允許編輯和刪除？ –

是的，就是這樣。 – josei

您可以使用beforeedit偵聽器來阻止通過返回false來編輯記錄。

beforeedit: { 
    fn: function(event,editor){     

    switch (editor.record.data.name) { 
      case 'NOT EDIT': 
      return false; 
      break; 
      default:return true;  
     } 
    } 
},

您可以使用actioncolumnisDisabled禁用刪除圖標爲一個記錄：

isDisabled: function (view, rowIndex, colIndex, item, record) { 
    if (record.data.name =='NOT EDIT') 
     return true; 
    else 
     return false; 
},

全碼：

var nameModel = Ext.create('Ext.data.Model', {fields: ['name']});    

var store = Ext.create('Ext.data.Store', { 
    storeId: 'numberStore', 
    model:nameModel, 
    data: { 
     'items': [{ 
      'name': 'one' 
     }, { 
      'name': 'two' 
     }, { 
      'name': 'three' 
     }, { 
      'name': 'NOT EDIT' 
     }] 
    }, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'items' 
     } 
    } 
}); 


var grid = Ext.create('Ext.grid.Panel', { 
    width: 350, 
    height: 220, 
    border: true, 
    title: 'Grid - item dblclick', 
    itemId:'gridItemId', 
    store: Ext.data.StoreManager.lookup('numberStore'), 

    selType: 'rowmodel', 
    plugins: { 
     ptype: 'rowediting', 
     clicksToEdit: 2, 
     pluginId: 'roweditingId', 

     saveBtnText : "Save", 

     listeners: { 
      edit: function(editor, context, eOpts){ 
       var grid = Ext.ComponentQuery.query('#gridItemId')[0];       
       var store = grid.getStore(); 
       var txtColIdx = 1;      
       var textfieldRef = context.grid.columns[txtColIdx].getEditor(context.record); 
       var tetxfieldValue = textfieldRef.getValue(); 
       context.record.set('name', tetxfieldValue); 

       store.sync({ 
        success : function(record, operation) { 
         console.log('OK'); 
        }, 
        failure : function(record, operation) { 
         this.store.rejectChanges(); 
        } 
       }); 

      }, 
      beforeedit: { 
       fn: function(event,editor){     

        switch (editor.value) { 
         case 'NOT EDIT': 
          return false; 
          break; 
         default: 
          return true;  
        } 
       } 
      }, 

      canceledit : function (editor, context, eOpts){ 

       } 
      } 
     }, 

     columns: [{ 
      text: 'name', 
      name:'name', 
      dataIndex: 'name', 
      sortable : false, 
      hideable: false, 
      flex: 1, 
      editor: { 
       xtype: 'textfield', 
       allowBlank: false 
      } 
     }, { 
      xtype: 'actioncolumn', 
      minWidth: 40, 
      flex: 0.20, 
      align: 'center', 

      items: [{ 
       icon: 'delete.png',  
       tooltip: 'Delete record', 
       isDisabled: function (view, rowIndex, colIndex, item, record) { 
        if (record.data.name =='NOT EDIT') 
         return true; 
        else 
         return false; 
       }, 
       handler: function(grid, rowIndex, colIndex, item, e, rec) { 
          grid.getStore().removeAt(rowIndex); 
       },    }] 
     }], 

    renderTo: Ext.getBody() 
});

Here是工作的例子。

來源

2015-10-05 13:08:19

謝謝ankit chaudhary。很棒。只是另一個細節。在你的例子中，當我點擊禁用的圖標時，RowEditing插件在行中被激活。任何想法如何解決這個問題，而不使用警報或消息窗口（這也是一個有效的解決方案）。 – josei

Thanx找到該錯誤，現在我已更新並更正了刪除功能也正常工作的代碼！ –

謝謝ankit。好主意。另一個小細節。隨着您的升級，如果我點擊另一行'NOT EDIT'，它將被刪除。可能類似於：handler：function（grid，rowIndex，colIndex，item，e，rec）{if（rec.data.name =='NOT EDIT'）{ grid.getStore（）。removeAt（rowIndex）; } \t} – josei

使用beforeedit事件並返回false，如果該行不應該進行編輯。對於actioncolumn - 只需檢查處理程序哪些記錄被編輯並做適當的事情。這裏是example

來源

2015-10-05 13:03:56 yorlin

謝謝約林。工作得很好。 – josei

RowEditing插件：禁用編輯和動作列刪除圖標

回答

相關問題