2013-05-20 60 views
3

我有一個簡單的頁面有2個或更多的網格,我想用CellEditing插件編輯這些網格的單元格。Extjs 4 cellEditing插件不能使用多個網格

如果我只有一個網格一切正常,但如果我使2個網格(或更多)CellEditing插件停止工作。

任何人都知道如何解決這個問題?

我已經做了一個最小化的例子,受到這個問題的影響。

在此示例中,您可以嘗試向第一個網格添加一行並雙擊編輯該網格。正如你所看到的,單元格編輯根本不起作用。 如果您在第二個網格中添加和編輯單元格,它將起作用。

在這裏你可以找到例子的jsfiddle: http://jsfiddle.net/eternasparta/amHRr/

,這是javascript代碼:

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' 

    }, 
    items: [{ 
     xtype: 'grid', 
     plugins: [], 
     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 
    }], 
    flex: 1, 
    initComponent: function() { 
     this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 2 
     })); 


     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() 
    }); 
}); 

任何幫助表示讚賞,謝謝!

+0

不相關的建議:不要把'ext-all.css'的內容放入jsfiddle的css窗口中(頁面像永遠加載一樣) –

回答

1

只需在對象或數組類型(在您的情況下,項目)的配置initComponentdemo

欲瞭解更多信息,請參閱我的回答here

0

您可以爲每個網格單獨的對象像

//For grid 1 
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', { 
    clicksToMoveEditor: 1, 
    autoCancel: true 
}); 

//For grid 2  
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', { 
    clicksToMoveEditor: 1, 
    autoCancel: true 
}); 

它將爲不同的網格創建不同的實例。測試工作正常:)