實現Extjs4.1的grid列式編輯功能

Ext.onReady(function(){
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"[e-mail]", "phone":"555-111-1224"},
            {"name":"Bart", "email":"[e-mail]", "phone":"555-222-1234"},
            {"name":"Homer", "email":"[e-mail]", "phone":"555-222-1244"},
            {"name":"Marge", "email":"[e-mail]", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    var columns=[
        {header: 'Name',  dataIndex: 'name', editor: 'label'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ];
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: columns,
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        listeners:{
          beforeedit:{
              fn:function(editor,e,eOpts ){
                  var temp1 = {
                      xtype: 'textfield',
                          name: 'name',
                      //fieldLabel: 'Name',
                      allowBlank: false,  // requires a non-empty value
                      value:'dynamicField'
                  }

                  // The data store containing the list of states
                  var states = Ext.create('Ext.data.Store', {
                      fields: ['abbr', 'name'],
                      data : [
                          {"abbr":"AL", "name":"Alabama"},
                          {"abbr":"AK", "name":"Alaska"},
                          {"abbr":"AZ", "name":"Arizona"}
                          //...
                      ]
                  });

                   // Create the combo box, attached to the states data store
                  var temp2 = Ext.create('Ext.form.ComboBox', {
                      //fieldLabel: 'Choose State',
                      store: states,
                      queryMode: 'local',
                      displayField: 'name',
                      valueField: 'abbr'
                  });
                  var temp=null;
                  switch(e.rowIdx){
                      case 0:
                          temp=temp1;
                          break;
                      case 1:
                          temp=temp2;
                          break;
                      default:

                          temp=null;
                  }

                  if(temp==null) {
                      editor.cancelEdit();
                      return false;
                  }else{
                      e.column.setEditor(temp);
                  }
              }
          }
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
});

注意點：在Ext4.1下的每一次調用beforeedit時候都要重新賦值editor，不能是用同一個field，不然會出錯。