iteye_9116
iteye_9116
2010-10-23 19:24

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条回答

  • lizhiyezi lizhiyezi 11年前

    store.load();
    需要放在Ext.DataView 后面

    点赞 评论 复制链接分享
  • lizhiyezi lizhiyezi 11年前

    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'}]格式数据

    点赞 评论 复制链接分享
  • lizhiyezi lizhiyezi 11年前

    放在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
    }]
    })
    })

    点赞 评论 复制链接分享

相关推荐