问题描述
我想用模板循环以表格的形式把数据显示到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> 问题补充：-<strong>-extjs</strong>----------------<br />createFlowConsole : function() {<br />var data = [{id:'entityId', type: 'float'},{name:'Name', type:'string'}];<br /><br />var store = new Ext.data.JsonStore({<br />url: _ctx.base + '/osworkeflow/getAvailableActions.action',<br />fields: data<br />});<br />store.load();<br /><br />var xtpl = new Ext.XTemplate(<br />'<tpl for=".">',<br /> '<div class="thumb-wrap" id="{name}">',<br /> '<span class="x-editable">{id}</span>',<br /> '<span class="x-editable">{Name}</span></div>',<br /> '</tpl>'<br />);<br /><br />var availableActionsPanel = new Ext.Panel( {<br />id : 'mySteps_panel',<br />region : 'north',<br />title : '我的步骤',<br />margins : '0 0 5 0',<br />height : 150,<br />items: new Ext.DataView({<br /> store: store,<br /> tpl: xtpl,<br /> autoHeight:true,<br /> multiSelect: true,<br /> overClass:'x-view-over',<br /> itemSelector:'div.thumb-wrap',<br /> emptyText: 'No data to display'<br /> })<br />});<br /><br />var steps = this.createSetpsGrid();<br /><br />var flowConsole = new Ext.Panel( {<br />region : 'center',<br />layout : "border",<br />border : false,<br />items : [ availableActionsPanel, steps ],<br />margins : '5 5 5 0'<br />});<br />return flowConsole;<br />},<br /><br /><strong>从后台读取数据，数据显示不出来？</strong>
解决方案
store.load(); 需要放在Ext.DataView 后面
解决方案二：
var xtpl = new Ext.XTemplate( '<tpl for=".">', '<div class="thumb-wrap" id="{Name}">', '<span class="x-editable">{id}</span>', '<span class="x-editable">{Name}</span></div>', '</tpl>' );var data = [{id : 'id',name : 'id',type : 'float'}, {name : 'Name',type : 'string'}];后台是否返回了[{Name:'aaaaaaaaaaaaa',id:'1'},{Name:'aaaaaaaaaab',id:'2'}]格式数据
解决方案三：
放在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}]})})