如何得到處理的細胞領域的ExtJS網格

Question

網格的數據看起來是這樣的：

data: [{ 
    field1: abc 
    field2: [ 
     {value: 0, label: Blue}, 
     {value: 1, label: Green} 
    ] 
}, 
{ 
    field1: def 
    field2: [ 
     {value: 0, label: Red}, 
     {value: 1, label: Pink} 
    ] 
}] 

---

網格組件配置看起來類似：

{ 
xtype: 'grid', 
.... 
    columns: [ 
     { 
      dataIndex: field1 
     }, 
     { 
      dataIndex: field2 
      editor: { 
       xtype: combobox, 
       displayField: label, 
       valueField: value, 
       store: new someSampleStore(); 
      } 
     } 
    ] 
} 

現在，網格的＃2列有一個組合框。 對於網格的第0行第1列;組合框下拉框應顯示以下選項：藍色，綠色 對於網格的第1行第1列;組合框下拉應該顯示這些選項：紅色，粉紅色

我是否需要手動將數據加載到每個組合框（每行）或者有什麼方法可以指定列定義中的配置，以便組合框選擇「 field2'？

Answer 1

看看下面的代碼。本質上它做你想要的，但只在第一次點擊後才起作用。我會讓你弄清楚。 ;-)

演示：https://fiddle.sencha.com/#fiddle/gec

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 


     var comboStore = Ext.create('Ext.data.Store', { 
      fields: ['value', 'label'], 
      data: [{ 
       name: '', 
       value: '' 
      }], 
      proxy: { 
       type: 'memory', 
       reader: { 
        type: 'json', 
        rootProperty: 'items' 
       } 
      } 
     }); 

     Ext.create('Ext.data.Store', { 
      storeId: 'employeeStore', 
      fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'], 
      data: [{ 
       firstname: "Michael", 
       lastname: "Scott", 
       seniority: 7, 
       dep: "Management", 
       hired: "01/10/2004", 
       comboData: [{ 
        label: 'Test1', 
        value: 'testval1' 
       }, { 
        label: 'Test2', 
        value: 'testval2' 
       }, { 
        label: 'Test3', 
        value: 'testval3' 
       }] 
      }, { 
       firstname: "Dwight", 
       lastname: "Schrute", 
       seniority: 2, 
       dep: "Sales", 
       hired: "04/01/2004", 
       comboData: [{ 
        label: 'Dwight1', 
        value: 'testval1' 
       }, { 
        label: 'Dwight2', 
        value: 'testval2' 
       }, { 
        label: 'Dwight3', 
        value: 'testval3' 
       }] 
      }, { 
       firstname: "Jim", 
       lastname: "Halpert", 
       seniority: 3, 
       dep: "Sales", 
       hired: "02/22/2006", 
       comboData: [{ 
        label: 'Jim1', 
        value: 'testval1' 
       }, { 
        label: 'Jim2', 
        value: 'testval2' 
       }, { 
        label: 'Jim3', 
        value: 'testval3' 
       }] 
      }, { 
       firstname: "Kevin", 
       lastname: "Malone", 
       seniority: 4, 
       dep: "Accounting", 
       hired: "06/10/2007", 
       comboData: [{ 
        label: 'Kevin1', 
        value: 'testval1' 
       }, { 
        label: 'Kevin2', 
        value: 'testval2' 
       }, { 
        label: 'Kevin3', 
        value: 'testval3' 
       }] 
      }] 
     }); 

     Ext.create('Ext.grid.Panel', { 
      title: 'Column Demo', 
      store: Ext.data.StoreManager.lookup('employeeStore'), 
      columns: [{ 
       text: 'First Name', 
       dataIndex: 'firstname', 
       editor: { 
        xtype: 'combobox', 
        displayField: 'label', 
        valueField: 'value', 
        store: comboStore, 
        fields: ['value', 'label'] 
       } 
      }, { 
       text: 'Last Name', 
       dataIndex: 'lastname' 
      }, { 
       text: 'Hired Month', 
       dataIndex: 'hired', 
       xtype: 'datecolumn', 
       format: 'M' 
      }, { 
       text: 'Department (Yrs)', 
       xtype: 'templatecolumn', 
       tpl: '{dep} ({seniority})' 
      }], 
      selType: 'cellmodel', 
      plugins: { 
       ptype: 'cellediting', 
       clicksToEdit: 1, 
       listeners: { 
        beforeedit: function(editor, context, eOpts) { 
         testData = context.record.data.comboData; 
         comboStore.setData(testData); 
        } 
       } 
      }, 
      width: 400, 
      forceFit: true, 
      renderTo: Ext.getBody() 
     }); 
    } 
});