Javascript 用于行编辑的Ext.form.field.Picker

我将创建用于行编辑的选择器

Ext.define('Test', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.test',
    alternateClassName: ['Test'],
    triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',
    createPicker: function () {
        var me = this,
            picker = new Ext.form.field.TextArea({
                pickerField: me,
                id: 'myPicker',
                floating: true,
                hidden: true,
                ownerCt: this.ownerCt,
                grow: true
            });
        return picker;
    }
});

var pickerField = {
    xtype: 'test'
};

然后我使用编辑器编辑列：

{ text: 'Comments', dataIndex: 'comments', align: 'left', editor: pickerField, width: 260}

你能解释一下为什么我有空白文本区吗？ 我将在textarea中编辑我的注释字段。 ExtJS4.2

upd： 我指定了这个方法，它就工作了

                valueToRaw: function(){
                    var record = mainGrid.selModel.getSelection()[0];
                    var comments = record.get('comments');
                    return comments;
                }

---

但在编辑之后，当我关闭文本区域时，什么都没有发生

我已经找到了我问题的答案。这是我的密码

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 1,
    autoCancel: false
});

Ext.define('Test', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.test',
    alternateClassName: ['Test'],
    triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',
    requires: ['Ext.util.KeyNav'],
    onTriggerClick: function () {
        var me = this;
        if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {
                me.collapse();
            } else {
                me.expand();
                var record = mainGrid.getSelectionModel().getSelection()[0];
                var oldvalue = record.get('comments');
                Ext.getCmp('idComments').setValue(oldvalue);
                console.log('Trigger is expanded!!!' + oldvalue);
            }
            me.inputEl.focus();
        }
    },
    createPicker: function () {
        var me = this,
            picker = new Ext.form.FormPanel({
                pickerField: me,
                floating: true,
                hidden: true,
                ownerCt: this.ownerCt,
                items: [
                    {
                        xtype: 'textarea',
                        id: 'idComments',
                        width: '100%',
                        grow: true
                    },
                    {
                        xtype: 'button',
                        text: 'Submit change',
                        style: {
                            margin: '1.5%',
                            float: 'right'
                        },
                        listeners: {
                            click: function () {
                                var newvalue = Ext.getCmp('idComments').getValue();
                                Ext.getCmp('idpickerField').setValue(newvalue);
                                picker.hide();
                            }
                        }
                    }
                ]
            });
        return picker;
    }
});

var pickerField = {
    xtype: 'test',
    id: 'idpickerField'
};