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