Sencha Touch自定義List三種實(shí)現(xiàn)方案

作者：佚名 2011-09-05 12:43:23

Sencha Touch自定義List三種實(shí)現(xiàn)方案是本文要介紹的內(nèi)容，主要是來了解Sencha Touch中事件的實(shí)現(xiàn)方法，具體內(nèi)容來看本文詳解。

Sencha Touch自定義List三種實(shí)現(xiàn)方案是本文要介紹的內(nèi)容，主要是來了解Sencha Touch中事件的實(shí)現(xiàn)方法，具體內(nèi)容來看本文詳解。在sencha touch的list里嵌入自己想要的控件，有多種選擇方案。

其中一種是直接在itemTpl相應(yīng)的地方加上html標(biāo)簽(如<button><input>)創(chuàng)建html控件。效果如下：

蛋疼了吧。。。風(fēng)格不統(tǒng)一，而且要給按鈕加事件也顯得比較別扭。這個(gè)方案，當(dāng)然還是有它的好處的，這是所有方案中效率最高的一個(gè)。

如果你使用的是圖片按鈕，自然也是可以很協(xié)調(diào)的。

如果我們想要用框架原有的按鈕怎么辦，這就是本篇文章的重點(diǎn)了。

第二種方案

先看效果

這個(gè)方案，要求你對(duì)Sencha Touch框架有一定程度的了解，當(dāng)然，學(xué)習(xí)它也能讓你對(duì)這個(gè)框架有更深一層的認(rèn)識(shí)。

廢話不說直接上代碼。

list示例

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類的構(gòu)造函數(shù)構(gòu)造一個(gè)應(yīng)用  
    name: 'myApp',        //為這個(gè)應(yīng)用指定名稱  
    //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讓后面可以找到這個(gè)div并將按鈕渲染到這個(gè)div中  
            store : 'MyStore',  
            isAfterrendered : false,    //添加一個(gè)變量，用于檢測(cè)afterrender是否已經(jīng)發(fā)生  
            listeners : {  
                afterrender : function() {            //afterrender事件只有l(wèi)ist首次載入的時(shí)候才會(huì)觸發(fā)。  
                    this.isAfterrendered = true;    //這個(gè)this是指list  
                    console.log('afterrender');        //請(qǐng)?jiān)谡{(diào)試狀態(tài)下查看事件發(fā)生的順序  
                },  
                update : function() {    //update事件在render（渲染）之前執(zhí)行一次，渲染完畢  
                                        //后又會(huì)執(zhí)行一次。以后在list內(nèi)容發(fā)生改變時(shí)執(zhí)行。  
                    console.log('update');  
                    if (this.isAfterrendered) {  
                        Ext.each(Ext.StoreMgr.lookup('MyStore').data.items,//對(duì)MyStore的每一條數(shù)據(jù)執(zhí)行一次循環(huán)  
                            function(arrayItem, index) {  
                                new Ext.Button({  
                                    iconMask : true,  
                                    ui : 'plain',    //按鈕背景透明  
                                    iconCls : 'delete',  
                                    renderTo : 'button_' + arrayItem.data.id  
                                });  
                            });  
                    }  
                }  
          
            }  
        });  
          
        var panel = new Ext.Panel({  
            fullscreen : true, //設(shè)為全屏就會(huì)顯示出來  
            items : list  
        });  
    }  
});

該說的在注釋里頭都說了，就這樣吧。

所有的控件都可以用過來，很好地保持了風(fēng)格的統(tǒng)一，而且添加按鈕事件也比較方便。

但是這樣做因?yàn)樾枰~外的渲染，效率明顯不如第一個(gè)方案。

第三個(gè)方案

這個(gè)是最近才想到的，在kitchen sink中，官方給出了三種list的示例，其中，第三種是這樣的：

那么，只要我們將右側(cè)的按鈕圖片換成我們自己需要的，便能夠?qū)崿F(xiàn)我們想要的效果了。

通過分析sencha touch的源碼，我找到了相應(yīng)的css代碼，并提取出來，改成了自己的css，將其賦給自己的指定的list。

以下便是全部css的代碼。

css   
 
.delBtnList .x-list-disclosure {  
  overflow: visible;  
  -webkit-mask: 0 0 url('data:image/png;base64,  
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  
    /YZm0/wPdHqnTTpY+CgAAAABJRU5ErkJggg==');  
  -webkit-mask-size: 1.7em;  
 
 
  background-color: #0e6ee9;  
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4f98f4), color-stop(50%, #1f7cf1), 
       color-stop(51%, #0e6ee9), color-stop(100%, #0d63d1));  
  background-image: linear-gradient(#4f98f4, #1f7cf1 50%, #0e6ee9 51%, #0d63d1);  
  width: 1.7em;  
  height: 1.7em;  
}  
 
.delBtnList.x-list-indexed .x-list-disclosure {  
  margin-right: 1.3em;  
}  
 
.delBtnList .x-item-selected .x-list-disclosure {  
  background: #fff none;  
}

但是這個(gè)方法這樣做仍然存在一個(gè)問題：當(dāng)小圖標(biāo)被點(diǎn)擊時(shí)，仍然會(huì)觸發(fā)itemtap事件，導(dǎo)致本不該執(zhí)行的操作被執(zhí)行。

繼續(xù)查閱api文檔，我發(fā)現(xiàn)了一個(gè)配置項(xiàng)：

preventSelectionOnDisclose True to prevent the item selection when the user taps a disclose icon. Defaults to true

這意味著，當(dāng)我們點(diǎn)擊了item的時(shí)候，會(huì)觸發(fā)selectionchange事件，而點(diǎn)擊小圖標(biāo)時(shí)不會(huì)。

我們可以通過這個(gè)特性，將點(diǎn)擊item時(shí)要執(zhí)行的操作寫在selectionchange事件中，這樣便能將兩個(gè)操作隔開了。

后來又發(fā)現(xiàn)selectionchange取消選中時(shí)發(fā)生一次，選中時(shí)又發(fā)生一次。也就是說，點(diǎn)一次會(huì)執(zhí)行兩次，于是又加了段代碼來fix它。

以下是成果。完成的效果，跟上面的第二種是類似的，但是因?yàn)槔玫氖窍到y(tǒng)原生的東西，bug少，不易出岔子，如圖：

list示例

var list = new Ext.List({      
  cls : 'delBtnList',//為這個(gè)list的div添加一個(gè)類,我們通過這個(gè)來找到并更改item的右側(cè)小圖標(biāo)。      
   onItemDisclosure : {//若配置該項(xiàng)，list每一項(xiàng)的右側(cè)都會(huì)出現(xiàn)一個(gè)小圖標(biāo)。其他功能請(qǐng)查看api          
   handler : function(record, btn, index) {         
        alert('點(diǎn)擊小按鈕觸發(fā)的事件');                  
     }      
 },      
listeners : {        
  selectionchange: function(selectionModel, records){         
       if (this.firstTime == true) {           
              this.firstTime = false;              
  }         
      else {              
          this.firstTime = true;                  
          alert('點(diǎn)擊item其他位置觸發(fā)的事件');             
      }         
  },      
},}  
);