[extJS4.2.1]grid单元格使用下拉框作为编辑器

在使用grid时, 经常需要编辑单元格中的数据, 有时候需要使用下拉框来选择预先指定好的值,  在某些极端的情况下, 每一行的下拉框都要求不一样.
例如下面的例子,  动物和植物分别使用不同的下拉编辑框
           
       图1
 
 
       图2


       图3
  

var store = new Ext.data.Store({
    fields : [ 'id', 'label', 'name' ],
    data : [ {
        id : 1,
        label : '动物',
        name : null
    }, {
        id : 2,
        label : '植物',
        name : null
    } ]
});

var createEditor = function(id) {
    var nameStore = null;
    if (id == 1) {
        nameStore = Ext.create('Ext.data.Store', {
            fields : [ 'name' ],
            data : [ {
                name : '飞禽'
            }, {
                name : '走兽'
            } ]
        });
    } else {
        nameStore = Ext.create('Ext.data.Store', {
            fields : [ 'name' ],
            data : [ {
                name : '花'
            }, {
                name : '草'
            } ]
        });
    }

    var box = Ext.create('Ext.form.field.ComboBox', {
        store : nameStore,
        displayField : 'name',
        valueField : 'name'
    });
    return box;
};

var grid = Ext.create('Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    store : store,
    columns : [ {
        text : '分类',
        dataIndex : 'label'
    }, {
        text : '名称',
        dataIndex : 'name',
        field : {
            xtype : 'label',
            editable : false
        }
    } ],
    plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 1,
        listeners : {
            beforeedit : function(editor, e, eOpts) {
                var editor = createEditor(e.record.data.id);
                e.column.setEditor(editor);
                return true;
            },
            edit : function(editor, e) {
                e.record.set('name', e.column.getEditor().getValue());
            }
        }
    }) ]
});