Sencha touch 2 dataview/list Paging

The paging function of sencha touch 2's list must not be described too much. You should know it all. There are also official examples.

However, it is not perfect to directly copy the paging function of the List to dataview. There is a small bug that leads to continuous loading ....

Uncaught typeerror: object [object] has no method 'scrolldockheightrefresh'

Obviously, this function is not available in the dataview component, only in list, but this method is required by the paging plug-in.

Since we need it, we will not care what it will do, so we will add it first. How can I add this method to dataview?

It is easy to add methods in custom components. You only need to add them after config.

After testing, the problem is solved after the scrolldockheightrefresh method is added.

Complete code:

 

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: 'inclumgs', type: 'string'}, {Name: 'inclumgb', type: 'string'}, {Name: 'smpimgs ', type: 'string'}, {Name: 'smpimg', ty PE: '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: 'viewprodu CT ', fullscreen: True, showanimation: {type: 'slide', direction: 'left'}, hideanimation: {type: 'slideout', direction: 'right '}, items: [{xtype: 'toolbar', docked: 'top', ID: 'productviewtb', items: [{xtype: 'twent', UI: 'back', text: 'Back to category list', Action: 'background'}, {xtype: 'spacer'}, {xtype: 'segmentedbutton ', margin: '0 10 0 0', items: [{xtype: 'button ', text: 'sort by payment amount', action: 'Sortbyskc'}, {xtype: 'button ', text: 'sort by design id', Action: 'sortbydesignid'}]}, {xtype: 'segmentedbutton', ID: 'segbtnimagetype ', items: [{xtype: 'button', ID: 'btndesignimg', text: 'Design sketch ', UI: 'Confirm', Action: 'designimg '}, {xtype: 'button ', text: 'sample image', UI: 'Confirm', Action: 'sampleimg'}], store: 'product', emptytext: 'No data found. Check the conditions! ', Padding: 30, plugins: [{xclass: 'ext. plugin. listpaging ', nomorerecordstext:' No more records ', loadmoretext: 'more', autopaging: true}]}, scrolldockheightrefresh: function (){}});