在數據視圖3列

我想創建一個數據視圖，使得它有三個表格列，並顯示在此順序的項目的垂直列表視圖：在數據視圖3列

1,7,13
2,8,14
3,9,15
4,10,16
5,11
6,12

我的商店包含16個數據模型，如上所示（上面的數字是模型中的'名稱'字段）。我正在嘗試使用帶有成員函數的xtemplate來完成此操作，該成員函數返回任何給定行的第二列和第三列的值。我允許每列最多6個項目。該代碼是

Ext.define('TestExtJs.view.ColumnView', { 
extend: 'Ext.view.View', 
alias: 'widget.columnview', 

itemSelector: 'div.thumb-wrap', 
emptyText: 'No items to show', 
config: { 
    store: null, 
    tpl: null, 
}, 
initComponent: function() { 

    var itemData = [ 
     {id: 1, name: '1'}, 
     {id: 2, name: '2'}, 
     {id: 3, name: '3'}, 
     {id: 4, name: '4'}, 
     {id: 5, name: '5'}, 
     {id: 6, name: '6'}, 
     {id: 7, name: '7'}, 
     {id: 8, name: '8'}, 
     {id: 9, name: '9'}, 
     {id: 10, name: '10'}, 
     {id: 11, name: '11'}, 
     {id: 12, name: '12'}, 
     {id: 13, name: '13'}, 
     {id: 14, name: '14'}, 
     {id: 15, name: '15'}, 
     {id: 16, name: '16'} 
    ]; 

    var theStore = new Ext.data.Store({ 
     //fields:['id', 'name'], 
     model: 'TestExtJs.model.Item', 
     data: itemData 
     //requires: ['TestExtJs.model.Item'] 
    }); 
    this.store = theStore; 
    /*var columntpl = new Ext.XTemplate(
      '<tpl for=".">', 
      '{name}', 
      '</tpl>' 
      );*/ 
    var columntpl = new Ext.XTemplate(
'<tpl for=".">', 
    '<tpl if="(xindex - 1) &lt; (xcount/3)">', 
    '<div style="width:100%;">', 

     '<div style="float: left;width: 33%" class="thumb-wrap-first">', 
     '{name} ', 
     '</div>', 

     '<tpl if="this.getVal(xindex, 2)">', 
      '<div style="float: left;width: 34%" class="thumb-wrap-second">', 
       '{[this.getVal(xindex, 2)]}', 
      '</div>', 
     '</tpl>', 

     '<tpl if="this.getVal(xindex, 2)">', 
      '<div style="float: left;width: 33%" class="thumb-wrap-third">', 
       '{[this.getVal(xindex, 3)]}', 
      '</div>', 
     '</tpl>', 

    '</div>', 
    '</tpl>', 
'</tpl>', 
{ 
    getVal : function(xin, cin){ 
     if(cin === 1){ 

     } 
     if(cin === 2){ 
      var v = this.getStore.getAt(xin + 6 - 1); 
      if(v){ 
       return v.get('name'); 
      } 
      return null; 
     } 
     if(cin === 3){ 
      var v = this.getStore.getAt(xin + 2*6 - 1); 
      if(v){ 
       return v.get('name'); 
      } 
      return null; 
     } 
    } 

} 
); 

    this.tpl = columntpl;//debugger; 
    this.callParent(arguments); 

} 

});

但是，在控制檯中我得到一個錯誤「XTemplate錯誤：無法調用未定義的方法‘getAt’」。如何在xtemplate成員函數中訪問此數據視圖的存儲？

來源

2013-10-18 Sonu Jha

您可以添加商店的XTemplate的definitions配置，使其可以訪問在模板中：

var columntpl = new Ext.XTemplate(
    '<tpl for=".">', 
     // [...] 
    '</tpl>', 
    { 
     store: theStore, 
     getVal : function(xin, cin){ 
      var v = this.store.getAt(xin + 6 - 1); 
      // [...] 
     } 
    } 
);

來源

2013-10-18 10:03:10 matt

在數據視圖3列

回答

相關問題