我想用模板循环以表格的形式把数据显示到form中。怎么做呀?下面是我找的一点代码:
急呀!高手出来指教一下! 下面的代码为什么显示不出来呢?
--ExtJS代码:------------------------
Ext.onReady(function(){
//定义模板 使用标签tpl和操作符for
var tpl1 = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
'<tpl for=".">',
'<tr><td>{name}</td><td>{age}</td></tr>',
'</tpl>',
'</table>'
);
//定义组合框模板 xindex:若是循环模板,这是当前循环的索引index(从1开始)。
// values:当前作用域下的值
var itemTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
'{#} :{[this.check(values)]}</div>',
'</tpl>',
{
check : function (values) {
if(values.value > 2 ){
return "<font color=red>"+values.item+"</font>";
}else {
return "<font color=blue>"+values.item+"</font>";
}
}
}
)
new Ext.form.FormPanel({
applyTo :'target',
title:'在Extjs组件中使用模板',
labelSeparator :':',//分隔符
height : 100,
frame : true,
width : 350,
items : [
new Ext.form.ComboBox({
fieldLabel:'combo',
displayField:'item',
valueField:'value',
tpl : itemTpl,//引入自定义模板
editable : false,
mode: 'local',
triggerAction: 'all',
store : new Ext.data.SimpleStore({
fields: ['item','value'],
data : [['条目1',1],['条目2',2],['条目3',3],
['条目4',4],['条目5',5],['条目6',6]]
})
})
]
});
//定义模板数据
var data1 = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
];
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl1.append('tpl-1',data1);
});
--html代码:------------------------
<div id='tpl-1'>1</div>
<br>
<div id="target">tgt</div>
store.load();
需要放在Ext.DataView 后面
放在form里面不是使用 tpl1.append('tpl-1',data1); 这样表示渲染在 tpl-1 div里面
放在form 里面可以结合 Ext.DataView 使用
new Ext.DataView({
tpl : tpl1,
autoHeight : true,
multiSelect : true,
itemSelector : 'table td',
emptyText : '没有数据显示',
store : new Ext.data.JsonStore({
fields : ['name', 'age'],
data : [{
name : '张三',
age : 20
}, {
name : '李四',
age : 25
}, {
name : '王五',
age : 27
}, {
name : '赵六',
age : 26
}]
})
})
var xtpl = new Ext.XTemplate(
'',
[code="java"] '
var data = [{
id : 'id',
[code="java"] name : 'id',[/code]
type : 'float'
}, {
name : 'Name',
type : 'string'
}];
后台是否返回了[{Name:'aaaaaaaaaaaaa',id:'1'},{Name:'aaaaaaaaaab',id:'2'}]格式数据