與組合框作爲列單元格的網格面板編輯extjs

Question

我有一個三列的網格面板我使用編輯器將這3列作爲組合框，我添加了一個單元格編輯插件。我應該可以添加一行並從三個不同商店中選擇來自組合框的值。問題是我無法添加一個沒有默認網格存儲的行。如何添加一行以查看組合框列選擇值。 Here is the fiddle

Answer 1

「網格由兩個主要部分組成 - 一個Ext.data.Store完整的數據和一組要渲染的列。」

您必須將商店添加到網格面板，然後嘗試通過單擊添加按鈕向商店添加一行。我修改了代碼並正在工作。

Ext.application({ 
    models: [ 
     'OneModel', 
     'TwoModel', 
     'ThreeModel' 
    ], 
    views: [ 
     'MyGridPanel' 
    ], 
    name: 'combo', 

    launch: function() { 
     Ext.create('combo.view.MyGridPanel', {renderTo: Ext.getBody()}); 
    } 

}); 

Ext.define('combo.view.MyGridPanel', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.mygridpanel', 

    requires: [ 
     'combo.view.MyGridPanelViewModel', 
     'combo.view.MyGridPanelViewController', 
     'Ext.grid.column.Column', 
     'Ext.form.field.ComboBox', 
     'Ext.view.Table', 
     'Ext.toolbar.Toolbar', 
     'Ext.button.Button', 
     'Ext.grid.plugin.CellEditing' 
    ], 
    store:Ext.create('Ext.data.Store',{ 
     fields:[{ 
      name:'One', 
      name:'Two', 
      name:'Three' 
     }] 
    }), 

    controller: 'mygridpanel', 
    viewModel: { 
     type: 'mygridpanel' 
    }, 
    height: 501, 
    width: 562, 
    title: 'My Grid Panel', 

    columns: [ 
     { 
      xtype: 'gridcolumn', 
      dataIndex: 'string', 
      text: 'One', 
      editor: { 
       xtype: 'combobox', 
       displayField: 'description', 
       valueField: 'description', 
       bind: { 
        store: '{oneStore}' 
       } 
      } 
     }, 
     { 
      xtype: 'gridcolumn', 
      dataIndex: 'number', 
      text: 'Two', 
      editor: { 
       xtype: 'combobox', 
       displayField: 'lastname', 
       valueField: 'id', 
       bind: { 
        store: '{twoStore}' 
       } 
      } 
     }, 
     { 
      xtype: 'gridcolumn', 
      dataIndex: 'date', 
      text: 'Three', 
      editor: { 
       xtype: 'combobox', 
       displayField: 'name', 
       valueField: 'id', 
       bind: { 
        store: '{threeStore}' 
       } 
      } 
     } 
    ], 
    dockedItems: [ 
     { 
      xtype: 'toolbar', 
      dock: 'top', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Add', 
        listeners: { 
         click: 'onButtonClick' 
        } 
       } 
      ] 
     } 
    ], 
    plugins: [ 
     { 
      ptype: 'cellediting', 
      clicksToEdit: 1 
     } 
    ] 

}); 
Ext.define('combo.view.MyGridPanelViewModel', { 
    extend: 'Ext.app.ViewModel', 
    alias: 'viewmodel.mygridpanel', 

    requires: [ 
     'Ext.data.Store', 
     'Ext.data.proxy.Memory' 
    ], 

    stores: { 
     oneStore: { 
      model: 'combo.model.OneModel', 
      data: [ 
       { 
        description: 'vel' 
       }, 
       { 
        description: 'magni' 
       }, 
       { 
        description: 'delectus' 
       }, 
       { 
        description: 'quas' 
       }, 
       { 
        description: 'asperiores' 
       }, 
       { 
        description: 'molestias' 
       }, 
       { 
        description: 'sunt' 
       }, 
       { 
        description: 'facere' 
       }, 
       { 
        description: 'et' 
       }, 
       { 
        description: 'magnam' 
       } 
      ], 
      proxy: { 
       type: 'memory' 
      } 
     }, 
     twoStore: { 
      model: 'combo.model.TwoModel', 
      data: [ 
       { 
        id: 'aperiam_01', 
        lastname: 'aut' 
       }, 
       { 
        id: 'iure_11', 
        lastname: 'dolores' 
       }, 
       { 
        id: 'fugiat_21', 
        lastname: 'excepturi' 
       }, 
       { 
        id: 'et_31', 
        lastname: 'praesentium' 
       }, 
       { 
        id: 'necessitatibus_41', 
        lastname: 'aperiam' 
       }, 
       { 
        id: 'fugiat_51', 
        lastname: 'quia' 
       }, 
       { 
        id: 'ullam_61', 
        lastname: 'nihil' 
       }, 
       { 
        id: 'tempora_71', 
        lastname: 'nisi' 
       }, 
       { 
        id: 'ea_81', 
        lastname: 'tempora' 
       }, 
       { 
        id: 'doloribus_91', 
        lastname: 'nostrum' 
       } 
      ], 
      proxy: { 
       type: 'memory' 
      } 
     }, 
     threeStore: { 
      model: 'combo.model.ThreeModel', 
      data: [ 
       { 
        id: 'sapiente_01', 
        name: 'dolorem' 
       }, 
       { 
        id: 'eum_11', 
        name: 'animi' 
       }, 
       { 
        id: 'rerum_21', 
        name: 'rerum' 
       }, 
       { 
        id: 'earum_31', 
        name: 'quaerat' 
       }, 
       { 
        id: 'voluptatem_41', 
        name: 'modi' 
       }, 
       { 
        id: 'omnis_51', 
        name: 'autem' 
       }, 
       { 
        id: 'autem_61', 
        name: 'autem' 
       }, 
       { 
        id: 'voluptatem_71', 
        name: 'voluptatum' 
       }, 
       { 
        id: 'ut_81', 
        name: 'pariatur' 
       }, 
       { 
        id: 'dolore_91', 
        name: 'dolorem' 
       } 
      ], 
      proxy: { 
       type: 'memory' 
      } 
     } 
    } 

}); 
Ext.define('combo.view.MyGridPanelViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.mygridpanel', 

    onButtonClick: function(button, e, eOpts) { 
     button.up('grid').getStore().insert(0, {}); 
     grid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 1}); 
    } 

}); 
Ext.define('combo.model.OneModel', { 
    extend: 'Ext.data.Model', 

    requires: [ 
     'Ext.data.field.Field' 
    ], 

    fields: [ 
     { 
      name: 'description' 
     } 
    ] 
}); 
Ext.define('combo.model.ThreeModel', { 
    extend: 'Ext.data.Model', 

    requires: [ 
     'Ext.data.field.Field' 
    ], 

    fields: [ 
     { 
      name: 'id' 
     }, 
     { 
      name: 'name' 
     } 
    ] 
}); 
Ext.define('combo.model.TwoModel', { 
    extend: 'Ext.data.Model', 

    requires: [ 
     'Ext.data.field.Field' 
    ], 

    fields: [ 
     { 
      name: 'id' 
     }, 
     { 
      name: 'lastname' 
     } 
    ] 
});