Sencha Touch開發心得分享

【1】元件擷取方式 ： 第一種： refs : {      wbList :  'waybillList ' }, 在 controller中定義 wbList，其中 waybillList為清單的xtype，擷取元件方式如下： var  me  =  this,      wbList  =  me .getWbList(); 第二種： var  me  =  this ,      packList  =  me .getPackList(); var  packSet  =  Ext . create ( 'Ext.form.FieldSet' , {      title :  title ,      itemId :  'add' ,      items : [           {                xtype :  'list' ,           }      ] }); packList . add ([ packSet ]); 定義 form元件 ， 擷取元件方式如下： var  pack_item  =  packList . getComponent ( ' add ' ); 第三種： list 為某元件下的清單的xtype，擷取元件方式如下：（是通過xtype擷取的） var  goods_list  =  pack_item . down ( 'list' ); 再如擷取form下某元件（是通過itemId擷取的） var  serviceItem  =  myForm . down ( '#serviceItem' ); 第四種： 通過全局檢索（不建議該用法），其中insurance為元件的itemId屬性 var  insuranceCon  =  Ext .ComponentQuery. query ( "#insurance" )[ 0 ]; 【2】store擷取 方式 ： var  waybillStore  =  Ext . getStore ( 'Waybill' ); waybillStore . load ({      callback :  function (records, operation, success) {                var  addWaybill  =  wbList . down ( '#addWaybill' );                if (! Ext . isEmpty (records)){                     addWaybill .setHidden( true );                } else {                     addWaybill .setHidden( false );                }           } }); 【3】頁面回退 ： history . back (); 【4】頁面跳轉 ： me . redirectTo ( 'view/account_Login' );（該方法為封裝方法） redirectTo :  function  (place, data) {           var  me  =  this ;           me . hideMenus ();           Ext .leo. CONTEXT . viewData  = data;           return this . callSuper ([place]); }, 【5】清單頁長按短按問題 ： 1.清單單擊事件： onWaybillListTap :  function  (list, index, target, record, e, eOpts) {     if  (!list. isTapHold ) {  // 有長按辨別，則不執行下面的代碼     console . log ( 'itemtap' ); // 這裡的代碼才是點選事件     } else {         delete  list. isTapHold ;  // 否則清除長按辨別     } }, 2.清單長按事件 : onHoldWaybillListTap: function (list, index, target, record, e, eOpts) {      list.  isTapHold  =  true ; //增加辨別：是否長按操作 } 【6】按鈕的定義及彈層 ： var  items  = [{ text :  ' 添加 ' ,          itemId:"addWaybillList",     xtype:'button',     ui : 'action',     scope:this,     cls:'cls cls2',     handler: function(){   this.actions.hide();          this.actions.destroy();          this.actions = null;          me.redirectTo('view/member_WbEdit/opt-add_wh-'+record.data.wh_id);      } }]; 彈層新增一個viewport： if  ( this . actions ) {     this.actions.destroy();      this . actions  =  null ; } ..........................................【彈層内容代碼】items定義後加元素可通過 items . push ( edit )實作 if(!this.actions){          this.actions = Ext.create('Ext.ActionSheet',{      items:items      }); } Ext . Viewport . add ( this . actions ); this . actions . show (); 【7】頁面加載或送出等待提示：

例：清單頁進入詳情頁，或詳情頁送出表單 如 清單頁進入詳情頁，在擷取詳情頁資料時加入以下代碼： Ext . Viewport .setMasked({      xtype :  'loadmask' ,      message :  ' 努力加載中 ...' }); 在aj請求成功并渲染完列面資料後關閉，加入以下代碼： Ext . Viewport .setMasked( false ); 注意：1.在哪裡添加加載中的提示就對哪個元件進行加載（wbForm）或者采用新viewport（ Ext . Viewport ）        2.該操作的aj請求方式應為 true,即 異步請求

【8】接口對空值處理問題及節省網絡開銷雙保險 ： var  store  =  Ext . getStore ( 'Waybill' ); var  extraParams  =  store . getParams (); store . currentPage  =  1 ; extraParams . condition  =  condition ; extraParams  =  Ext .leo. filterEmpty ( extraParams ); store .setParams( extraParams ); store . load ();