ExtJS 4, Different rows fields

问题

It's possible to have "by-row" columns definition in a Grid?

For example, I need a grid like this:

 id  |   name    |      options
======================================
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(1,2,3,4,5)
int  |  string   |  combobox(1,2,3)
int  |  string   |  combobox(5,6,7)

The combobox possible values are defined for that column in the initialization...is there a way to define that per row or perhaps some method to define after the rendering?

回答1:

You have several options here. But first decide why you need a combobox in your grid in the first place. Do you need

1) a standard cell editor plugin that gets activated when you click inside the cell, or

2) do you need your cell rendered with a combobox always activated in every row?

If your answer is 1), then you need to do 2 things: a) Override default CellEditing Plugin to allow different comboboxes on each row. The default implementation caches editor config once per column. b) Provide a function that returns editor config when getEditor() is called for your cell.

I'll provide code for these below.

If you answer 2) to the original question then you need a custom component that will render a combobox in your cell. There are two implementations of such a beast, the one I used is Skirtles http://skirtlesden.com/ux/component-column the other is called Its column component http://www.sencha.com/forum/showthread.php?174504-Its.grid.column.Component

---

Appendix:

Code for Option 1)

Column config -

{  text: 'My Combo Column',
   datIndex: 'someStoreField',
   getEditor:function(record){
       console.log('in get editor');
       return myFunctionToDetermineEditorConfig(record);
   }
}

CellEditor override. 'this' is reference to the Grid

this.plugins = [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit:1,
            //override original to allow for multiple editors in a column
            getEditor:function (record, column) {
                    var editor = column.getEditor(record);
                    if (!editor) {
                        return false;
                    }
                    if (!(editor instanceof Ext.grid.CellEditor)) {
                        editor = new Ext.grid.CellEditor({
                            //editorId:editorId,
                            field:editor,
                            ownerCt:this.grid
                        });
                    } else {
                        editor.ownerCt = this.grid;
                    }
                    editor.editingPlugin = this;
                    editor.isForTree = this.grid.isTree;
                    editor.on({
                        scope:this,
                        specialkey:this.onSpecialKey,
                        complete:this.onEditComplete,
                        canceledit:this.cancelEdit
                    });
                    return editor;
                }
        })
    ];

来源：https://stackoverflow.com/questions/12572354/extjs-4-different-rows-fields