Ext.Template 及 Ext.XTemplate怎么用呀?

 

我想用模板循环以表格的形式把数据显示到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>  

 

3个回答

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"] '

', [/code]
'{id}',
'{Name}
',
''
);

var data = [{
id : 'id',
[code="java"] name : 'id',[/code]
type : 'float'
}, {
name : 'Name',
type : 'string'
}];

后台是否返回了[{Name:'aaaaaaaaaaaaa',id:'1'},{Name:'aaaaaaaaaab',id:'2'}]格式数据

立即提问