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 ();