ExtJS4学习笔记八－－Template的使用(转)

http://hnhnhnhnhn.iteye.com/blog/1163291

ExtJS4学习笔记八－－Template的使用

博客分类：  ExtJS4

ExtJS4

1、append方法 

var tpl = new Ext.Template(//定义模板
    '',
    '姓名{0}',
    '年龄{1}',
    '性别{2}',
    ''
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);

2、overwrite方法： 

var tpl = new Ext.Template(//定义模板
    '',
    '姓名{name}',
    '年龄{age}',
    '性别{sex}',
    ''
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});

3、模板中使用格式化函数： 

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
    '',
    '员工姓名',
    //{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
    '{userName:capitalize}',
    '工作日期',
    //{WorkDate:this.cusFormat()}使用自定义格式化函数
    '{WorkDate:this.cusFormat()}',
    ''
]);
//定义模板数据
var tplData = {
    userName : 'tom',
    WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
    return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

4、使用自定义格式化函数解析多层json对象 

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
    '',
    '姓名',
    '{name}',
    '年龄',
    '{age}',
    '身高',
    '{stature:this.parseJson}',
    ''
);
//定义模板数据
var tplData = {
    name : 'tom',
    age : 24,
    stature : {
        num : 170,
        unit : 'cm'
    }
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
    return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

5、使用tpl标签和for运算符 

//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
    '',
    '姓名年龄',
    '',
    '{name}{age}',
    '',
    ''
);
//定义模板数据
var tplData = [
    {name:'张三',age:20},
    {name:'李四',age:25},
    {name:'王五',age:27},
    {name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

6、使用parent在子模板中访问父对象 

//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
    '',
    '姓名年龄公司',
    '',
    '{name}{age}{parent.companyName}',
    '',
    ''
);
//定义模板数据
var tplData = {
    companyName : 'ACB公司',
    emps:[
        {name:'张三',age:20},
        {name:'李四',age:25},
        {name:'王五',age:27},
        {name:'赵六',age:26}
    ]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

7、数组索引与简单数学运算 

//定义模板，数组索引与简单数学运算
var tpl = new Ext.XTemplate(
    '',
    '序号姓名工资',
    '',
    '{#}{name}{wage * .9}',
    '',
    ''
);
//定义模板数据
var tplData = [
        {name : '张三',wage : 1000},
        {name : '李四',wage : 1200},
        {name : '王五',wage : 900},
        {name : '赵六',wage : 1500}
    ]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

8、自动渲染简单数组 

//定义模板，自动渲染简单数组
var tpl = new Ext.XTemplate(
    '',
    '序号姓名',
    '',
    '{#}{.}',
    '',
    ''
);
//定义模板数据
var tplData = ['张三','李四','王五','赵六']
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

9、基本的条件逻辑判断 

//定义模板，基本的条件逻辑判断
var tpl = new Ext.XTemplate(
    '',
    '序号姓名工资',
    '',
    '',
    '{#}{name}{wage}',
    '',
    '',
    ''
);
//定义模板数据
var tplData = [
        {name : '张三',wage : 1000},
        {name : '李四',wage : 1200},
        {name : '王五',wage : 900},
        {name : '赵六',wage : 1500}
    ]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

10、在模板中执行任意代码 

"text/css">
    .even { background-color: #CCFFFF; }
    .odd { background-color: #FFFFFF; }
    .title {text-align: center;}

//定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
    '',
    '序号姓名工资奖金',
    '',
    '',
    '{[xindex]}{[values.name]}',
    '{[values.wage * parent.per]}',
    '{[Math.round(values.wage * parent.per / xcount)]}',
    '',
    '发薪时间{[fm.date(new Date,"Y年m月d日")]}',
    '工资总计{[this.avgWage(values)]}',
    ''
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
    var sum = 0;
    var length = o.emps.length;
    for(var i = 0 ; i
        sum += o.emps[i].wage;
    }
    return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
    per : 0.9,
    emps : [
        {name : '张三',wage : 1000},
        {name : '李四',wage : 1200},
        {name : '王五',wage : 900},
        {name : '赵六',wage : 1500}
    ]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

11、使用模板成员函数 

//定义模板，在模板中使用模板成员函数
var tpl = new Ext.XTemplate(
    '',
    '姓名工资',
    '',
    '',
    '{name}',
    '{[this.format(values.wage)]}',
    '',
    '',
    {
        //定义模板成员函数
        check : function(wage) {
            if(wage > 1000){
                return true;
            }else {
                return false
            }
        },
        //定义模板成员函数
        format : function(wage) {
            if(wage > 1300){
                return ''+wage+'';
            }else {
                return ''+wage+'';
            }

        }
    }
);
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = [
        {name : '张三',wage : 1000},
        {name : '李四',wage : 1200},
        {name : '王五',wage : 900},
        {name : '赵六',wage : 1500}
    ]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

12、在Extjs组件中使用模板 

"text/css">
    .even { background-color: #CCFFFF; }
    .odd { background-color: #FFFFFF; }

//定义组合框模板
var itemTpl = new Ext.XTemplate(
    '',
    '{#} ：{[this.check(values)]}

',  

    {  

        check : function (values) {  

            if(values.value > 2 ){  

                return ""+values.item+"";  

            }else {  

                return ""+values.item+"";  

            }  

        }  

    }  

);  

//创建数据模型  

Ext.regModel('ItemInfo', {  

    fields: ['item','value']  

});  

  

new Ext.form.Panel({  

    title:'在Extjs组件中使用模板',  

    renderTo: Ext.getBody(),  

    bodyPadding: 5,  

    height : 100,  

    frame : true,  

    width : 350,  

    items : [{  

        xtype : 'combo',  

        fieldLabel:'邮政编码',  

        displayField:'item',  

        valueField:'value',  

        labelSeparator :'：',//分隔符  

        listConfig : {  

            itemTpl : itemTpl  

        },  

        editable : false,  

        queryMode: 'local',  

        triggerAction: 'all',  

        store : new Ext.data.Store({  

            model : 'ItemInfo',  

            fields: ['item','value'],  

            data : [{item:'条目1',value:1},  

                    {item:'条目2',value:2},  

                    {item:'条目3',value:3},  

                    {item:'条目4',value:4},  

                    {item:'条目5',value:5},  

                    {item:'条目6',value:6}]  

        })  

    }]  

});  

13、Ext.view.View示例 

var inputForm = Ext.create('Ext.form.Panel',{
bodyPadding: 5,
width : 490,
flex : 2,
fieldDefaults:{//统一设置表单字段默认属性
    labelSeparator :'：',//分隔符
    labelWidth : 60,//标签宽度
    width : 150,//字段宽度
    msgTarget : 'side',
    allowBlank : false,
    labelAlign : 'right'
},
layout: {//设置容器字段布局
    type: 'hbox',
    align: 'middle'//垂直居中
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
    fieldLabel:'产品名称',
    name : 'productName'
},{
    fieldLabel:'数量',
    xtype : 'numberfield',
    name : 'productNum'
},{
    fieldLabel:'金额',
    xtype : 'numberfield',
    name : 'productPrice'
}],
fbar : [{
    text : '添加',
    handler : function(){
        if(inputForm.getForm().isValid()){
            var data = inputForm.getForm().getValues();
            var product = Ext.ModelMgr.create(data, 'ProductInfo');
                productStore.add(product);
                inputForm.getForm().reset();
            }
        }
    }]
});
//创建数据模型
Ext.regModel('ProductInfo', {
fields: ['productName','productNum','productPrice']
});
//创建产品数据源
var productStore = Ext.create('Ext.data.Store',{
autoLoad : true,
data : [],
model : 'ProductInfo',
proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'datas'
        }
    }
});
//定义模板
var productTpl = new Ext.XTemplate(
    '',
'产品名称数量金额',
'',
'{productName}{productNum}{productPrice}',
'',
''
);
//产品数据视图
var productView = Ext.create('Ext.view.View',{
store: productStore,
tpl: productTpl,
deferEmptyText : false,
itemSelector:'div.thumb-wrap',
emptyText: '请录入商品'
});
//产品面板
var productViewPanel = Ext.create('Ext.panel.Panel',{
autoScroll:true,
width : 490,
flex : 3,
layout : 'fit',
bodyStyle:'background-color:#FFFFFF',
    items: productView
});
Ext.create('Ext.panel.Panel',{
renderTo: document.body,
frame:true,
width : 500,
height: 200,
layout:'vbox',
title:'产品录入',
    items: [inputForm, productViewPanel]
});