用于rowEditing的Ext.form.field.Picker

时间:2014-11-12 10:17:18

标签: javascript extjs

我将为RowEditing创建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? 我将在textarea中编辑我的评论字段。 ExtJS 4.2

UPD: 我指定方法并且它有效。

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

但编辑完成后,当我关闭textarea时,没有任何事情发生。

1 个答案:

答案 0 :(得分:0)

我找到了问题的答案。这是我的代码。

    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'
};