如何从 ExtJS6 中的 dataview 的 tpl 中访问视图？

Question

我正在尝试针对来自 dataview 的 tpl 内部的组合框值进行测试：

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 引用了模板本身，我不知道如何从内部访问视图。

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