模板（Ext.js）

星期五下班后，打开excel表总结工作，被老大吐槽了。所以我决定博客和本子都利用起来。
1、简单的模板渲染
第一步是创建模板实例

//var marktpl = new Ext.XTemplate(
// '<table class="mark" border=1px cellspacing=0  width=485px>',
//    '<tpl if="xindex == 1"><td style="text-align:center" rowspan={[xcount]}>备注</td><td style="text-align:center" rowspan={[xcount]}>信息</td><td style="text-align:center" rowspan={[xcount]}>备注人</td><td style="text-align:center" rowspan={[xcount]}>时间</td></tpl>',
// '<tpl for="mark"><tr>',
//    '<td style="text-align:center">{[xindex]}</td>',
//    '<td style="text-align:center">{[values.info]}</td>',
//    '<td style="text-align:center" >{[values.name]}</td>',
//    '<td style="text-align:center">{[values.time]}</td>',
// '</tr></tpl>',
// '</table>'

第二步 覆写
打开页面的时候就渲染，需要监听beforerender事件

listeners:{
    'beforerender':function(){
         tpl.overwrite(panel.body,data)      
}
}

主要就是这个overwrite方法了。panel.body是需要覆写的目标。

2、高级的自定义模板
高级的自定义模板就是说可以给模板添加事件，最大的不同就是创建了view的实例。当初实现的时候特别想让文件结构，结果老不成功，比如define了一个view,继承Ext.view.View结果不行，所以新建实例什么的都给写在了一起。还是要找一下原因是什么的。
需要注意的是，itemclick监听德item是从store获取到的{}绑定的item,写死的是监听不了的。

{
          title: '',
          frame: true,
          xtype: 'panel',
          //id: 'panelwo',
          resizeble: true,
          reference: 'testwo',
          margin: '5 0 5 63',
          autoScroll: true,
          bodyStyle: 'background-color:#F5F5F5',
          width: 480,
          height: 300,
          //store: markstore,   

          items: Ext.create('Ext.view.View', {                              
              height: 300,             
              tpl: [
                        '<table class="mark" border=1px cellspacing=0  width=480px>',
                        '<tpl if="xindex == 1"><td style="text-align:center" rowspan={[xcount]}>备注</td><td style="text-align:center" rowspan={[xcount]}>信息</td><td style="text-align:center" rowspan={[xcount]}>备注人</td><td style="text-align:center" rowspan={[xcount]}>时间</td></tpl>',
                        '<tpl for="."><tr>',
                        '<td>{[xindex]}</td>',
                        '<td>{info}</td>',
                        '<td>{name}</td>',
                        '<td>{time}</td>',
                        '</tr></tpl>',
                        '</table>'                    
              ],
              itemSelector: 'table',
              store: Ext.create('Ext.data.Store', {
                  autoLoad: true,
                  sortOnLoad: true,
                  fields: ['name', 'thumb', 'url', 'type'],
                  proxy: {
                      type:'ajax',
                      url :'teptest.json',
                      reader: {
                          type: 'json',
                          rootProperty: ''
                      }
                  }
              }),

              listeners: {
                  'beforerender': function () {


                      //console.log(imgdata)
                      //tpl.overwrite(this, imgdata);
                              },
                  'itemclick': {
                      fn: function (view, record, item, index, evt, eOpts) {
                          console.log("点击")
                      }
                  }
              }
          })

      },