[英]How to loop inside extjs XTemplate
我試圖用extjs xtemplate循環一個數組並創建一個表
Ext.define('dataview_model', {
extend : 'Ext.data.Model',
fields : [
{name: 'count', type: 'string'},
{name: 'maxcolumns', type: 'string'},
{name: 'maxrows', type: 'string'},
{name: 'numbers', type: 'array'}
]
});
Ext.create('Ext.data.Store', {
storeId : 'viewStore',
model : 'dataview_model',
data : [
{count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']}
]
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="count > 0">',
'<table class="view_table">',
'<tpl for="numbers">',
'<tr>',
'<td>{.}</td>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>',
'</tpl>'
);
Ext.create('Ext.DataView', {
width : 500,
height : 200,
renderTo : Ext.getBody(),
store : Ext.getStore('viewStore'),
tpl : tpl
});
這是我到目前為止的工作實例
我想要做的是一旦有5行就停止循環,並將其他值添加到第二列,如下所示
+----+ +----+
| | | |
+----+ +----+
+----+ +----+
| | | |
+----+ +----+
+----+
| |
+----+
+----+
| |
+----+
+----+
| |
+----+
知道如何做到這一點?
謝謝。
我只能用模板找到一種方法,但下面是我使用模板和datachanged監聽器的解決方案。
Ext.create('Ext.data.Store', {
storeId : 'viewStore',
model : 'dataview_model',
data : [
{count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']},
{count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']}
],
listeners: {
datachanged: function(store) {
store.data.each(function(record) {
record.data.groupedNumbers = [];
for (var i = 0, j = 0; i < record.data.count; ++i, j = i % record.data.maxrows) {
record.data.groupedNumbers[j] = record.data.groupedNumbers[j] || { row: j, numbers: [] };
record.data.groupedNumbers[j].numbers.push(record.data.numbers[i]);
}
});
}
}
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="count > 0">',
'<table class="view_table" style="border: 1px solid black">',
'<tpl for="groupedNumbers">',
'<tr>',
'<tpl for="numbers">',
'<td>{.}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>',
'</tpl>'
);
工作演示: http : //jsfiddle.net/6HgCd/2/
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<table class="view_table">',
'<tr>',
'<tpl for="numbers">',
'<td>{.}</td>',
'<tpl if="xindex % 5 === 0">',
'</tr><tr>',
'</tpl>',
'</tpl>',
'</tr>',
'</table>',
'</tpl>'
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.