在sencha touch的list里嵌入自己想要的控件，有多种选择方案。

其中一种是直接在tpl上加上html标签(如<button><input>)创建html控件。效果如下：

蛋疼了吧。。。风格不统一，而且要给按钮加事件也显得比较别扭。这个方案，当然还是有它的好处的，这是所有方案中效率最高的一个。

如果你使用的是图片按钮，自然也是可以很协调的。

如果我们想要用框架原有的按钮怎么办，这就是本篇文章的重点了。

第二种方案

先看效果

这个方案，要求你对Sencha Touch框架有一定程度的了解，当然，学习它也能让你对这个框架有更深一层的认识。

废话不说直接上代码。

  Ext.regModel('Example',{      fields:['id','text']  });    Ext.regStore('MyStore',{      model :'Example',      data:[          {id : '0', text : 'aaaa'},          {id : '1', text : 'bbbb'},          {id : '2', text : 'cccc'},          {id : '3', text : 'dddd'}      ]  });    var myApp = new Ext.Application({    //利用框架的Application类的构造函数构造一个应用      name: 'myApp',        //为这个应用指定名称      //useLoadMask: true,      launch: function () {            //这是程序的入口          var list = new Ext.List({              itemTpl : new Ext.XTemplate(                  '<div>{text}</div>',                  '<div style="float:right" id="button_{id}"></div>'),//这里的id让后面可以找到这个div并将按钮渲染到这个div中              store : 'MyStore',              isAfterrendered : false,    //添加一个变量，用于检测afterrender是否已经发生              listeners : {                  afterrender : function() {            //afterrender事件只有list首次载入的时候才会触发。                      this.isAfterrendered = true;    //这个this是指list                      console.log('afterrender');        //请在调试状态下查看事件发生的顺序                  },                  update : function() {    //update事件在render（渲染）之前执行一次，渲染完毕                                          //后又会执行一次。以后在list内容发生改变时执行。                      console.log('update');                      if (this.isAfterrendered) {                          Ext.each(Ext.StoreMgr.lookup('MyStore').data.items,//对MyStore的每一条数据执行一次循环                              function(arrayItem, index) {                                  new Ext.Button({                                      iconMask : true,                                      ui : 'plain',    //按钮背景透明                                      iconCls : 'delete',                                      renderTo : 'button_' + arrayItem.data.id                                  });                              });                      }                  }                        }          });                    var panel = new Ext.Panel({              fullscreen : true, //设为全屏就会显示出来              items : list          });      }  });

该说的在注释里头都说了，就这样吧。

所有的控件都可以用过来，很好地保持了风格的统一，而且添加按钮事件也比较方便。

但是这样做因为需要额外的渲染，效率明显不如第一个方案。