如何在網格編輯組合的當前紀錄ExtJS5添加項目

我有一個網格，它有3列（身份證，學生，選派留學生）。在第2欄（學生）中，我綁定了靜態數據。當我點擊第二列的任何項目時，應該將此記錄添加到當前記錄或行中的第3列（選定學生）中。我還有一個按鈕（添加新項目）用於動態創建新行。

注 - 當我通過單擊添加新項按鈕添加一個新行時，將添加新行並且3列（選定的學生）值應該爲空。

我已經嘗試過這麼多，但沒有得到解決方案。主要的問題是，當我綁定第三列的數據，然後它綁定正確的，但是當我添加一個新行，它也顯示在新記錄中，但它不應該。如果我清除存儲或組合項目，則它會從所有行中刪除而不是當前記錄/行。

Ext.onReady(function() { 

       var comboStore1 = Ext.create('Ext.data.Store', 
        { 
         fields: ['text', 'id'], 
         data: 
         [ 
          { "text": "Value1", "id" :1 }, 
          { "text": "Value2", "id": 2 }, 
          { "text": "Value3", "id": 3 } 
         ] 
        }); 

       var comboStore2 = Ext.create('Ext.data.Store', 
        { 
         fields: ['text', 'id'] 
        }); 

       var gridStore = Ext.create('Ext.data.Store', 
        { 
         fields: ['id', 'students', 'selectedStudents'], 
         data: 
         [ 
          { "id" : 1}, 
         ] 
        });    

       var window = new Ext.Window({ 
        id: 'grdWindow', 
        width: 400, 
        height: 200, 
        items: [ 
         { 
          xtype: 'panel', 
          layout: 'fit', 
          renderTo: Ext.getBody(), 
          items: [ 
           { 
            xtype: 'button', 
            text: 'Add New Item', 
            handler: function() { 
             var store = Ext.getCmp('grdSample').store; 

             var rec = { 
              id: 1, 
              students: '', 
              selectedStudents: '' 
             } 
             store.insert(store.length + 1, rec); 
            } 
           }, 
           { 
            xtype: 'grid', 
            id: 'grdSample', 
            store: gridStore, 
            plugins: [ 
              Ext.create('Ext.grid.plugin.CellEditing', { 
               clicksToEdit: 1 
              }) 
              ], 
            columns: [ 
             { 
              header: 'id', 
              dataIndex: 'id' 
             }, 
             { 
              header: 'Students', 
              dataIndex: 'students', 
              editor: { 
               xtype: 'combobox', 
               store: comboStore1, 
               displayField: 'text', 
               valueField: 'text', 
               queryMode: 'local', 
               listeners: { 
                select: function (combo, records) { 
                 var rec = records[0].data; 
                } 
               } 
              } 
             }, 
             { 
              header: 'Selected Students', 
              dataIndex: 'selectedStudents', 
              editor: { 
               xtype: 'combobox', 
               id: 'combo2', 
               store: comboStore2, 
               displayField: 'text', 
               valueField: 'id' 
              } 
             } 
            ] 
           } 
          ] 
         }] 
       }).show(); 
      });

我已經試過幾乎所有東西，但仍然沒有得到任何解決方案。另一種方法 - 如何在網格編輯器組合中只在當前行中插入一個值。（另一行不應該反映）。如果正在反映另一行，那麼如何在從另一行渲染而不反映其他行之前刪除值。

來源

2016-01-25 Puneet Chawla

嗯，我想主要的問題是，你試圖改變某些網格行編輯器組件，而它假設所有網格行都是相同的。

主要問題是，當我綁定第三列中的數據，然後它綁定正確的，但是當我添加一個新行，它也顯示在新記錄中，但它不應該是。如果我清除存儲或組合項目，則它會從所有行中刪除而不是當前記錄/行。

這是因爲所有的網格行編輯器都使用相同的存儲實例，comboStore2，當您更改其數據更改爲所有編輯器。

創建獨立的商店，你必須做這樣的事情每個編輯：

{ 
    header: 'Selected Students', 
    dataIndex: 'selectedStudents', 
    editor: { 
     xtype: 'combobox', 
     id: 'combo2', 
     store: Ext.create('Ext.data.Store', { 
       fields: ['text', 'id'] 
     }), 
     displayField: 'text', 
     valueField: 'id' 
    } 
}

但比其成爲不平凡的選擇特定的行編輯器組件和它的商店。

我建議您看看Ext.grid.column.Widget，因爲您可以將某個行（其實際記錄）綁定到其小部件onWidgetAttach屬性。

來源

2016-01-25 09:17:41

嗨，感謝您的回答。如果我在編輯器中創建一個商店，仍然不能按照您的指定進行工作。我會在檢查您提供的鏈接後回覆您。 –

嗨謝爾蓋 - 我檢查了鏈接，但沒有得到解決方案。 –

你的第二列是虛擬的。您可以直接使用tagfield組件作爲第三列的編輯器，它允許您選擇多個值。

而且你需要一個商店來列出所有學生。

來源

2016-01-29 11:55:44 bhates

你好巴特 - 我想，你沒有得到我的問題。請再讀一遍或給我完整的例子。 –

如何在網格編輯組合的當前紀錄ExtJS5添加項目

回答

相關問題