javascript - Sencha Touch infinite scroll paging issue -
i have followed tutorial making infinite scroll page in sencha touch (with page size of 25). though paging works perfectly, have been having trouble scroll position getting resetting top. workaround, have tried manually saving scroll position , setting again did not have desired effect.
the code page follows:
ext.define('rms.view.common.assetlistpanel', { extend: 'ext.panel', alias: 'widget.asset_list', requires: [ 'rms.model.assetmodel', 'ext.plugin.listpaging', 'ext.dataview.list', 'ext.field.search' ], config: { layout: 'fit', store: null, items: {} }, initialize: function () { ext.viewport.setmasked({ xtype: 'loadmask', message: 'fetching assets...' }); this.setitems( { xtype: 'list', id: 'lis', indexbar:false, grouped: false, store: this.config.store, plugins: [{ autopaging: true, type: 'listpaging' } ], infinite: true, onitemdisclosure: true, variableheights: true, //scrolltotoponrefresh: false, items: [ { xtype: 'toolbar', docked: 'top', items: [ { xtype: 'searchfield', id: 'assetlistsearch', docked: 'right', width: 130, placeholder:'search', listeners: { scope: this, keyup: function (field) { var value = field.getvalue(); var assetstore = ext.getstore('assetstore'); assetstore.clearfilter(); //sto.filter('name', value); if (value) { var thisregex = new regexp(value, "i"); assetstore.filterby(function (record) { return (thisregex.test(record.get('name'))) }); } var list = ext.getcmp('lis'); if (list.scroller) { list.scroller.scrollto({x:0, y:0},true); } list.refresh(); }, clearicontap: function () { var assetstore = ext.getstore('assetstore'); assetstore.clearfilter(); } } }, { xtype: 'button', text: 'near', id: 'nearest_asset' }, { xtype: 'button', text: 'group list' } ] }, { xtype: 'toolbar', docked: 'top', layout: { pack: 'center' }, items: [ { //segmented button sorting xtype: 'segmentedbutton', pack: 'center', allowmultiple: false, margin: '0 0 0 10', items: [ { text: 'a-z', handler: function () { var list = ext.getcmp('lis'); var store = ext.getstore('assetstore'); //resetting grouper list.getstore().setgrouper({ groupfn: function () { return ''; } }); list.setgrouped(false); //setting grouper store.setgrouper({ groupfn: function (record) { return record.get('name')[0].touppercase(); } }); list.setgrouped(true); list.setindexbar(true); //list.setindexbar( { // letters: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'].sort() // }); } }, { text: 'status', handler: function () { var list = ext.getcmp('lis'); var store = ext.getstore('assetstore'); //resetting grouper list.getstore().setgrouper({ groupfn: function () { return ''; } }); list.setgrouped(false); //setting grouper store.setgrouper({ groupfn: function (record) { return record.get('assetstatus').touppercase(); } }); list.setgrouped(true); list.setindexbar(false); } }, { text: 'none', pressed: true, handler: function () { var list = ext.getcmp('lis'); var assetstore = ext.getstore('assetstore'); list.getstore().setgrouper({ groupfn: function () { return ''; } }); list.setgrouped(false); list.setindexbar(false); list.refresh(); } } ] }, { xtype: 'spacer' }, { xtype: 'segmentedbutton', pack: 'center', allowmultiple: false, margin: '0 10 0 0', items: [ { text: 't ▼', pressed: true, handler: function () { //sort last reported time var sorters3 = [{ property: 'lastreporttime', direction: 'desc', sorterfn: function (o1, o2) { var date1 = o1.data.lastreporttime.replace('t', ' '); var first = new date(date1.replace(/-/g, '/')); var date2 = o2.data.lastreporttime.replace('t', ' '); var second = new date(date2.replace(/-/g, '/')); var v1 = new date(first); var v2 = new date(second); return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); } }]; var assetstore = ext.getstore('assetstore'); assetstore.sort(sorters3); } }, { text: 't ▲', handler: function () { //sort last reported time var sorters4 = [{ property: 'lastreporttime', direction: 'asc', sorterfn: function (o1, o2) { var date1 = o1.data.lastreporttime.replace('t', ' '); var first = new date(date1.replace(/-/g, '/')); var date2 = o2.data.lastreporttime.replace('t', ' '); var second = new date(date2.replace(/-/g, '/')); var v1 = new date(first); var v2 = new date(second); return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); } }]; var assetstore = ext.getstore('assetstore'); assetstore.sort(sorters4); } } ] } ] }, { xtype: 'toolbar', docked: 'bottom', minheight: '1.8em', title: '<div style="font-size: 0.7em">'+(ext.getstore('assetstore')).getcount()+' assets</div>' // items:[ // { // xtype: 'spacer' // }, // { // xtype: 'title', // title: '<div style="font-size: 0.7em">'+(ext.getstore('assetstore')).getcount()+' assets</div>' // } // ] } ], itemtpl: ext.create('ext.xtemplate', '<span class="iconlist ao-{domainobjecttype}"><b>{name}</b><br><span>{[this.formatdatetime(values.lastreporttime)]}<br> <b>{[this.enginestate(values.assetstatus, values.domainobjecttype)]}</b></span></span>', { formatdatetime: function (isodate) { //fixing ios var tempdate = isodate.replace('t', ' '); var date = new date(tempdate.replace(/-/g, '/')); date.setminutes(date.getminutes() + app.config.user.timezoneoffset); return ext.date.format(date, app.config.user.datetimeformat); }, enginestate: function (assetstatus, config) { if (config == 'canbusfleetvehicle') { if (assetstatus == 'normal') { return "engine on" } else if (assetstatus == 'idling') { return 'idle' } else { return "engine off" } } else { if (assetstatus == 'normal' || assetstatus == 'idling') { return "operating" } else { return "not operating" } } } } ) }); ext.viewport.setmasked(false); } }); the store follows:
ext.define('rms.store.assetstore', { extend : 'ext.data.store', requires: ['rms.model.assetmodel'], config : { model : 'rms.model.assetmodel', storeid : 'assetstore', pagesize : 25, buffered : true, clearonpageload: false, remotesort : true, params : { domaindataview: 'allassets', sortvalue : 'lastreporttime', sortorder : 1, filters : json.stringify([]) }, grouper: { groupfn: function (item) { return; } // groupfn }, // grouper sorters: [{ }], proxy : { type : 'ajax', crossdomain: true, url : app.config.serviceurl + 'caesarobject/objectdataprovider3', reader : { type : 'json', rootproperty : 'ui.items', totalproperty: 'originalsize' }, extraparams: { domainobjectvalues: json.stringify([ 'name', 'lastreporttime', 'assetstatus', 'location', 'internalnumber', 'group', 'driver', 'alarmstatusforasset', 'lastreporttype', 'configuration', 'active' ]) }, limitparam : 'take', pageparam : 'page', startparam : 'skip' } } }); the console shows following issues:
container.js?_dc=1427538981315:494 uncaught typeerror: cannot read property
Comments
Post a Comment