Sencha Touch 2的List的分页功能想必不用过多的介绍了,应该都了解,官方也有例子。
但是想直接把List的分页功能拷贝到DataView上,是不够完美的,存在一个小Bug,导致一直在加载中....
Uncaught TypeError: Object [object Object] has no method 'scrollDockHeightRefresh'
很明显DataView组件中没有这个功能,只有List中有,而分页插件却需要用到这个方法。
既然需要,切不理会什么用,那我们先给其加上。如何给DataView中添加这个方法呢?
很简单,在自定义组件中有介绍,添加方法,只需要在config{}后添加即可。
经测试,加入scrollDockHeightRefresh方法后,问题解决。
完整代码:
Ext.define('PLM.store.Product', { extend: 'Ext.data.Store', config: { fields: [ { name: 'productName', type: 'string' }, { name: 'designerId', type: 'string' }, { name: 'orderno', type: 'string' }, { name: 'state', type: 'string' }, { name: 'wfname', type: 'string' }, { name: 'desimgs', type: 'string' }, { name: 'desimgb', type: 'string' }, { name: 'smpimgs', type: 'string' }, { name: 'smpimgb', type: 'string' }, { name: 'Ida2a2', type: 'string' }, { name: 'pvr', type: 'string' } ], proxy: { type: "ajax", url: "/View/Reports/restful/SearchProduct", reader: { type: "json", rootProperty: "root", totalProperty: "totalCount" } }, pageSize: 50, autoLoad: false } }); Ext.define('PLM.view.Product', { extend: 'Ext.DataView', alias: 'Product', requires: [ 'PLM.store.Product' ], config: { id:'ViewProduct', fullscreen: true, showAnimation: { type: 'slide', direction: 'left' }, hideAnimation: { type: 'slideOut', direction: 'right' }, items: [ { xtype: 'toolbar', docked: 'top', id: 'productviewtb', items: [ { xtype: 'button', ui: 'back', text: '返回品类列表', action:'BackCategory' }, { xtype: 'spacer' } , { xtype: 'segmentedbutton', margin: '0 10 0 0', items: [ { xtype: 'button', text: '按款号排序', action: 'SortBySKC' }, { xtype: 'button', text: '按设计Id排序', action: 'SortByDesignId' } ] }, { xtype: 'segmentedbutton', id: 'segBtnImageType', items: [ { xtype: 'button', id: 'BtnDesignImg', text: '设计草图', ui: 'confirm', action: 'DesignImg' }, { xtype: 'button', text: '样衣图片', ui: 'confirm', action: 'SampleImg' } ] } ] }], store: 'Product', emptyText: '没有找到数据,请检查条件!', padding: 30, plugins: [ { xclass: 'Ext.plugin.ListPaging', noMoreRecordsText: '没有更多记录了', loadMoreText: '更多', autoPaging: true } ] }, scrollDockHeightRefresh: function () { } });