如何從ExtJS6的dataview的tpl中訪問視圖？

Question

我想測試對一個組合框的值從數據視圖的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

更新：我更新的代碼來使用數據視圖，數據視圖是有點棘手，我重寫了prepareData方法額外的信息傳遞給模板，並更新數據視圖時組合值被改變。這裏是更新變化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(); 
     }); 
    } 
});