Сетка, поле со списком и редактор текстового поля - динамически изменяйте emptyText и очищайте поле - PullRequest
0 голосов
/ 26 апреля 2018

В следующем примере с выделением я хочу динамически изменить редактор текстового поля с пустым полем и очистить поле.

Однако, если я выберу первый элемент в выпадающем списке, я получу ссылку на текстовое поле, но только один раз. Если после выбора другого элемента в поле со списком я больше не могу получить ссылку на текстовое поле или изменить пустой текст.

Также я не могу очистить значение текстового поля при выборе одного элемента комбинированного списка.

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(),
});

1 Ответ

0 голосов
/ 26 апреля 2018

Просто измените это:

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

К этому:

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

И поменяйте порядок второго «применить»:

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

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