Ext.form.field.Picker for rowEditing

Question

I will create Picker for RowEditing.

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

and then I use editor for column:

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

Can you explain pls why I have blank textarea? I will edit my comment field in textarea. ExtJS 4.2

upd: I specify method and it works.

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

But after editing when I close textarea nothing not happend.

AndreyPr AndreyPr · Accepted Answer · 2014-11-14T10:46:58

I have found answer for my question. Here is my code.

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

Ext.form.field.Picker for rowEditing

1 Answers