extjs模板的使用:Ext.XTemplate

weixin_34119545發表於2011-01-24

Js程式碼

Ext.onReady(function(){
    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>'
        );
        
        //通過自定義格式化函式解析json物件  {stature:this.parseJson()}
        var tpl2 = new Ext.Template(
            '<table border=1 cellpadding=0 cellspacing = 0>',
            '<tr><td width=90 >姓名</td>',
            '<td width=120>{name}</td></tr>',
            '<tr><td width=90 >年齡</td>',
            '<td width=120>{age}</td></tr>',
            '<tr><td width=90 >身高</td>',
            '<td width=120>{stature:this.parseJson()}</td></tr>',
            '</table>'
        );
        
        tpl2.parseJson = function(json){
            return json.num + json.unit;
        }
        
    //陣列索引與簡單數學運算 {#}    每一項都加上序號
     var tpl3 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
         '<tr><td>序號</td><td width=90 >姓名</td><td width=90 >工資</td></tr>',
         '<tpl for=".">',
         '<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
         '</tpl>',
         '</table>'
     );
    
     //自動渲染簡單陣列  使用特殊變數{.}可迴圈輸出
     var tpl4 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
            '<tr><td>序號</td><td width=90 >姓名</td></tr>',
            '<tpl for=".">',
            '<tr><td>{#}</td><td>{.}</td></tr>',
            '</tpl>',
            '</table>'
     );
    
     //基本的條件邏輯判斷  這沒有else的操作符 如需要,就要寫兩個邏輯相反的if的語句
     //輸出工資大於1000的員工資訊 工資 * 0.9
     var tpl5 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
         '<tr><td>序號</td><td width=90 >姓名</td><td width=90 >工資</td></tr>',
         '<tpl for=".">',
         '<tpl if="wage &gt; 1000">',
         '<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
         '</tpl>',
         '</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 productTpl = new Ext.XTemplate(
            '<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>'
        );
        Ext.get('addProduct').on('click',function(){
            var pname = Ext.get('productName').getValue();
            var pnum = Ext.get('productNum').getValue();
            var pprice = Ext.get('productPrice').getValue();
            productTpl.append('product-table',[pname,pnum,pprice]);
        });
    
     //定義模板資料
        var data1 = [
            {name:'張三',age:20},
            {name:'李四',age:25},
            {name:'王五',age:27},
            {name:'趙六',age:26}
        ];
        
        var data2 = {
            name : 'tom',
            age : 24,
            stature : {
                num : 170,
                unit : '釐米'
            }
        };
        
        var data3= [
                {name : '張三',wage : 1000},
                {name : '李四',wage : 1200},
                {name : '王五',wage : 900},
                {name : '趙六',wage : 1500}
            ];
        
        var data4 = ['張三','李四','王五','趙六'];
        
        
        //模板值和模板進行組合並將新生成的節點插入到id為'tpl-table'的元素中
        tpl1.append('tpl-1',data1);
        tpl2.append('tpl-2',data2);
        tpl3.append('tpl-3',data3);
        tpl4.append('tpl-4',data4);
        tpl5.append('tpl-5',data3);
    });
});

 

Html程式碼:

<div id='tpl-1'></div>

    <br>
    <div id="tpl-2"></div>
    <br>
    <div id="tpl-3"></div>
    <br>
    <div id="tpl-4"></div>
    <br>
    <div id="tpl-5"></div>
    <br>
    <div id="target"></div>
    <br>
    產品名稱:<input type="text" id="productName"><br>
    產品數量:<input type="text" id="productNum"><br>
    產品價格:<input type="text" id="productPrice">
    <input type="button" value="增加產品" id='addProduct'>
    <table id='product-table' border=1 cellspacing=0 cellpadding=0>
        <tr>
            <td width=160>產品名稱</td><td width=75>數量</td><td width=75>金額</td>
        </tr>
    </table>

相關文章