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