extjs - 在数据视图中具有 3 列的垂直列表视图

Question

我正在尝试创建一个数据视图，使其具有三个表格列，并按以下顺序显示项目：

• 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 成员函数中访问此数据视图的存储？

Answer 1

您可以将商店添加到 XTemplate 的定义配置中，以便从模板中访问它：

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