extjs模板的使用:Ext.XTemplate

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 > 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程式碼:

extjs模板的使用:Ext.XTemplate

相關文章