网格组合框和文本字段编辑器 - 动态更改空文本和清除字段

Question

在下面的 cellediting 示例中，我想动态更改空字段文本字段编辑器并清除该字段。

但是，如果我 select 组合框中的第一项，我会得到文本字段引用，但只有一次。如果我 select 在组合框中输入另一个项目后，我无法再获取文本字段引用或更改空文本。

此外，当select输入一个组合框项目时，我无法清除文本字段值。

FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/2g3d

Ext.create('Ext.data.Store', {
    storeId: 'mystore',
    fields:[ 'type', 'description'],
});

var combostore = Ext.create('Ext.data.Store', {
    fields:[ 'name'],
                      data:[
                      {'name' : 'Phone'},
                      {'name' : 'Mobile'},
                      {'name' : 'Email'}
                  ]
});
Ext.create('Ext.data.Model', {
    fields:[
        {name:'type', type:'string'},
        {name:'description', type:'string'}
    ]
});

Ext.create('Ext.form.Panel', {

    title: 'Order Info',
    width: 400,
    bodyPadding: 10,
    defaults: {
       anchor: '100%',
       padding: 5
    },
    items: [{
        xtype: 'gridpanel',
        selModel: 'rowmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
            pluginId: 'celleditingId'
        },

        header:{
            titlePosition: 0,
            items:[{
                xtype:'button',
                text: 'Add row',
                handler: function(btn){
                        var record = Ext.create('Ext.data.Model', {});
                        var grid = btn.up('grid'),
                            rowediting = grid.getPlugin('celleditingId');
                        grid.store.insert(0,{});
                        rowediting.startEdit(0, 0);
                }
            }]
        },
        title: 'Contact',
        store: Ext.data.StoreManager.lookup('mystore'),
        columns: [{
            text: 'Type',
            dataIndex: 'type',
            editor:{
                xtype: 'combobox',
                name: 'type',
                valueField: 'name',
                displayField: 'name',
                store: combostore,
                queryMode: 'local',
                markDirty:false,
                listeners: {
                    select: function (combo, record, eOpts){
                        var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor,
                             grid = combo.up('grid');

                        if (combo.value === 'Phone') {

                             Ext.apply(columnTextfieldEditor, {
                                emptyText: 'First text',
                                submitEmptyText: false
                             });

                            var row = grid.getSelectionModel().getSelection()[0];

                            grid.getPlugin('celleditingId').startEditByPosition({
                                row: grid.store.indexOf(row),
                                column: 1
                            });

                              // columnTextfieldEditor.setValue('');

                         }else {

                             var row = grid.getSelectionModel().getSelection()[0];

                            grid.getPlugin('celleditingId').startEditByPosition({
                                row: grid.store.indexOf(row),
                                column: 1
                            });

                             Ext.apply(columnTextfieldEditor, {
                                emptyText: 'Second text',
                                submitEmptyText: false
                             });


                        }

                        console.log(combo.value);
                        console.log(columnTextfieldEditor);
                    }
                }
             },
            flex: 0.7

        },{
            text: 'Description',
            dataIndex: 'description',
            itemId: 'textfieldEd',
            editor:{
                xtype: 'textfield',
                name: 'description'
            },
            flex: 1
        }],


        listeners:{
            afterrender: function(grid){
                var record = Ext.create('Ext.data.Model', {});
                            rowediting = grid.getPlugin('celleditingId');
                        grid.store.insert(0,{});
                        rowediting.startEdit(0, 0);
            }
        },
        height: 200

    }],

        renderTo: Ext.getBody(),
});

Answer 1

只需更改此：

var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor

为此：

var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].getEditor()

并更改第二个"apply"的顺序：

Ext.apply(columnTextfieldEditor, {
    emptyText: 'Second text',
    submitEmptyText: false
});

grid.getPlugin('celleditingId').startEditByPosition({
    row: grid.store.indexOf(row),
    column: 1
});

网格组合框和文本字段编辑器 - 动态更改空文本和清除字段

Grid combobox and textfield editor - change emptyText dynamically and clear field

extjs

extjs5