Extjs Проблема с привязкой свойства readOnly комбо динамически - PullRequest
Новая
       60

Extjs Проблема с привязкой свойства readOnly комбо динамически

0 голосов
/ 15 сентября 2018

У меня есть виджет с combobox и потоком мне нужно что-то вроде этого,

  1. Сначала комбо отключено.

  2. В каждой строке есть значок редактирования, и когда я нажимаю на кнопку редактирования, должна быть включена только эта конкретная комбинация.

  3. Затем, когда я сохраняю запись, активированная комбинация должна быть снова отключена.

Шаг 3. у меня не работает. 

{
    text: 'TC',
    dataIndex: 'scrTC',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'combo',
        store: 'TCStore',
        valueField: 'value',
        displayField: 'displayValue',
        matchFieldWidth: false,
        bind: {
            readOnly: {
                isReadOnly
            }
        }
    }
}

Я также пробовал метод onwidgetattach, но после сохранения этот метод не вызывается, поэтому он не работает. 

onWidgetAttach: function(column, widget, record) {
    if (condition) {
        widget.setReadOnly(false);
    } else {
        widget.setReadOnly(true);
    }
}

У кого-нибудь есть идея?

Редактировать 2:

Я вставил readOnly: true в мои конечные записи динамически.

В View Model создайте функцию isReadOnly, 

Ext.define('MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    data: {
        isReadOnly: function (record) {
            return record.get('readOnly');
        }
    }
});

И в treeGrid его, 

{
        text: 'TC',
        dataIndex: 'scrTC',
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'combo',
            store: 'TCStore',
            valueField: 'value',
            displayField: 'displayValue',
            matchFieldWidth: false,
            bind: {
                readOnly: '{isReadOnly}'
            }
        }
    }

При первой загрузке выпадающий список читается только как ожидалось, но когда я нажимаю кнопку редактирования в строке, она создает новую строку ниже & iустановили readOnly = false.Но все же поле со списком не является обязательным для чтения, только ложно и делает его редактируемым.

1 Ответ

0 голосов
/ 15 сентября 2018

Вам необходимо использовать record.readOnly для widgetcolumn, чтобы связать конфигурацию для combobox. Как это 

bind: {
    readOnly: '{record.readOnly}'
}

Вы можете проверить здесь, работая скрипка .

КОД SNIPPET 

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'grid',
            title: 'Binding Example',

            width: '100%',

            viewModel: {
                stores: {
                    gridStore: {
                        type: 'store',
                        fields: ['name', 'abrr', {
                            //This readOnly for widgetcolumn of combobox
                            name: 'readOnly',
                            //By default vlaue is true
                            defaultValue: true,
                            type: 'boolean'
                        }],
                        data: [{
                            name: 'Substation A',
                            "abbr": "AL",
                            readOnly: true
                        }, {
                            name: 'Substation B',
                            "abbr": "AK"
                        }, {
                            name: 'Substation C',
                            "abbr": "AZ",
                        }, {
                            name: 'Substation D',
                            "abbr": "AK"
                        }]
                    },
                    states: {
                        type: 'store',
                        fields: ['abbr', 'name'],
                        data: [{
                            "abbr": "AL",
                            "name": "Alabama"
                        }, {
                            "abbr": "AK",
                            "name": "Alaska"
                        }, {
                            "abbr": "AZ",
                            "name": "Arizona"
                        }]
                    }
                }
            },

            bind: '{gridStore}',
            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name',
                width: 120
            }, {
                text: 'Select',
                flex: 1,
                xtype: 'widgetcolumn',
                dataIndex: 'abbr',
                widget: {
                    xtype: 'combo',
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    bind: {
                        store: '{states}',
                        readOnly: '{record.readOnly}'
                    }
                }

            }, {
                text: 'Edit',
                width: 50,
                xtype: 'widgetcolumn',
                widget: {
                    xtype: 'button',
                    iconCls: 'x-fa fa-edit',
                    handler: function (btn) {
                        //Set the read only fase on button click
                        btn.getWidgetRecord().set('readOnly', false);
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});
...