Как получить доступ к представлению из tpl dataview в ExtJS6?

Я пытаюсь проверить значение поля со списком из tpl dataview:

Ext.define('MyForm', {
    extend: 'Ext.form.Panel',
    items: [
        {
            xtype: 'combo',
            name: 'my_combo',
        },
        {
            xtype: 'dataview',
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<tpl if="this.test()">pass</tpl>',
                '</tpl>'
            , 
            {
                test: function(){
                    //doesn't work
                    return this.getView().down('[name=my_combo]').getValue() == 'ok';
                }
            }),
        }
    ]
});

Это не работает, потому что this ссылается на сам шаблон, и я не могу понять, как получить доступ к представлению изнутри.


person serg    schedule 15.03.2016    source источник
comment
Вы не можете ссылаться на представление в функции XTemplate. Вероятно, лучше использовать ViewModel.   -  person JChap    schedule 15.03.2016


Ответы (1)


Невозможно получить доступ к представлению в XTemplate. Для этого вы можете использовать ViewModel, вот код для него.

И рабочая скрипка сенча https://fiddle.sencha.com/#fiddle/175s

Обновление: я обновил код для использования DataView, DataView немного сложнее, я перезаписал метод prepareData, чтобы передать дополнительную информацию в шаблон, а также обновил DataView при каждом изменении значения комбинации. Вот скрипт с обновленными изменениями https://fiddle.sencha.com/#fiddle/175s

Ext.define('MyApp.MyPanel', {
    extend: 'Ext.Panel',
    xtype: 'myForm',
    defaults: {
        padding: 10
    },

    viewModel: {  
        stores: {
            employeeStore: {
                fields: ['name'],
                data: [{
                    name: 'John'
                }, {
                    name: 'Tempel'
                }, {
                    name: 'George'
                }, {
                    name: 'Milinda'
                }]
            },
        }
    },
    items: [
        {
            xtype: 'combobox',
            fieldLabel: 'Name',
            name: 'nameField',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'name',
            reference: 'emp',
            bind: {
                store: '{employeeStore}',
                value: '{name}'
            }
        },{
            xtype: 'dataview',
            itemId: 'empList',
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="dataview-multisort-item">',
                        '<h3>{name}</h3>',
                         '<tpl if="passed">Selected</tpl>',
                    '</div>',
                '</tpl>'
            ),
            itemSelector: 'div.dataview-multisort-item',

            bind: {
                store: '{employeeStore}'
            },

            prepareData: function(data, index, record) {
                 var name = this.up().getViewModel().get('name');
                 var passed = record.get('name') == name;
                 return Ext.apply({passed: passed}, data);
            }
        }
    ],

    initComponent: function() {
        this.callParent(arguments);
        var me = this;

        // refresh the dataview when name is changed.
        this.getViewModel().bind('{name}', function() {
            var dataview = me.down('#empList');
            dataview.refresh();
        });
    }
});
person JChap    schedule 15.03.2016
comment
Как получить доступ к значениям из ViewModel внутри шаблона представления данных с помощью bind? - person serg; 15.03.2016
comment
DataView работает с Store, но мы имеем дело с одним значением. Итак, могу ли я узнать, почему вы хотите использовать DataView для одного значения? - person JChap; 15.03.2016
comment
Я не имею дело с одним значением, у меня есть такое представление данных: examples.sencha.com/extjs/6.0.1/examples/kitchensink/ , и мне нужно проверить какое-то условие внутри этого шаблона представления данных, которое вычисляется на основе другого значения со списком. - person serg; 15.03.2016
comment
Да, это то, чего я пытался избежать, чтобы вводить данные в хранилище. Ну ладно, если нет лучшего способа. Спасибо. - person serg; 15.03.2016
comment
вернуть Ext.apply({пройдено: пройдено}, данные); На всякий случай, если мы не хотим, чтобы базовая модель была изменена. - person JChap; 15.03.2016