程序博客网 > 格式化js代码

ExtJS远程数据-本地分页

来源：互联网 发布：格式化js代码 编辑：程序博客网 时间：2024/05/21 09:54

背景

    一般情况下，分页展示是前端只负责展示，后台通过SQL语句实现分页查询。当总数据量在千条以下，适合一次性查询出符合条件的所有数据，让前端页面负责分页也是一种选择。

实例

    现通过ExtJS 4扩展类库Ext.ux.data.PagingStore来实现分页，建议使用前在GitHub获取最新版本。

    使用时非常简单，只需将Store的继承类改为“Ext.ux.data.PagingStore”，其他分页配置可参照之前的文章《ExtJS实现分页grid paging》。

  1. Ext.define('XXX', {
  2.   extend : 'Ext.ux.data.PagingStore'
  3.   ...
  4. })

    但是，针对不同的应用场景还有2个疑问：

  • 本地分页后，如何强制重新查询后台数据？

    根据PagingStore的实现来看，只有查询参数修改后才会再次调用后台进行查询。但是，如果我们修改了列表中某条数据后，需要按当前条件刷新列表。这时，我是在条件中添加一个时间戳来进行刷新的。

    1. store.getProxy().extraParams._TIME=new Date().getTime();


  • 分页按钮中的“刷新”如何去除？

        因为是本地分页，ExtJS自带的分页“刷新”按钮似乎成了摆设。可以在页面加载完成后，将其隐藏。在Controller层添加afterrender事件来实现。代码中的tab_id可通过开发人员工具在ExtJS生成的页面源码中看到，这里是抛砖引玉，希望大家写出更好的选择器。

  1. afterrender : function(){
  2.         Ext.get("tab_id").down(".x-tbar-loading").up(".x-btn").setVisible(false);
  3. }


    

    

附上Ext.ux.data.PagingStore.js的源码：

  2. /*
  3.  * PagingStore for Ext 4 - v0.6
  4.  * Based on Ext.ux.data.PagingStore for Ext JS 3, by Condor, found at
  5.  * http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5
  6.  * Stores are configured as normal, with whatever proxy you need for remote or local.  Set the
  7.  * lastOptions when defining the store to set start, limit and current page.  Store should only
  8.  * request new data if params or extraParams changes.  In Ext JS 4, start, limit and page are part of the
  9.  * options but no longer part of params.
  10.  * Example remote store:
  11.  *     var myStore = Ext.create('Ext.ux.data.PagingStore', {
  12.              model: 'Artist',
  13.              pageSize: 3,
  14.              lastOptions: {start: 0, limit: 3, page: 1},
  15.              proxy: {
  16.                type: 'ajax',
  17.                url: 'url/goes/here',
  18.                reader: {
  19.                  type: 'json',
  20.                  root: 'rows'
  21.                }
  22.              }
  23.        });
  24.  * Example local store:
  25.  *    var myStore = Ext.create('Ext.ux.data.PagingStore', {
  26.             model: 'Artist',
  27.             pageSize: 3,
  28.             proxy: {
  29.               type: 'memory',
  30.               reader: {
  31.                 type: 'array'
  32.               }
  33.             },
  34.             data: data
  35.       });
  36.  * To force a reload, delete store.lastParams.
  37.  */
  38. Ext.define('Ext.ux.data.PagingStore', {
  39. extend: 'Ext.data.Store',
  40. alias: 'store.pagingstore',
  42. destroyStore: function () {
  43. this.callParent(arguments);
  44. this.allData = null;
  45. },
  47. /**
  48.  * Currently, only looking at start, limit, page and params properties of options.  Ignore everything
  49.  * else.
  50.  * @param {Ext.data.Operation} options
  51.  * @return {boolean}
  52.  */
  53. isPaging: function (options) {
  54. var me = this,
  55. start = options.start,
  56. limit = options.limit,
  57. page = options.page,
  58. currentParams;
  60. if ((typeof start != 'number') || (typeof limit != 'number')) {
  61. delete me.start;
  62. delete me.limit;
  63. delete me.page;
  64. me.lastParams = options.params;
  65. return false;
  66. }
  68. me.start = start;
  69. me.limit = limit;
  70. me.currentPage = page;
  71. var lastParams = this.lastParams;
  72. currentParams = Ext.apply({}, options.params, this.proxy ? this.proxy.extraParams : {});
  73. me.lastParams = currentParams;
  74. if (!this.proxy) {
  75. return true;
  76. }
  77. // No params from a previous load, must be the first load
  78. if (!lastParams) {
  79. return false;
  80. }
  82. //Iterate through all of the current parameters, if there are differences, then this is
  83. //not just a paging request, but instead a true load request
  84. for (var param in currentParams) {
  85. if (currentParams.hasOwnProperty(param) && (currentParams[param] !== lastParams[param])) {
  86. return false;
  87. }
  88. }
  89. //Do the same iteration, but this time walking through the lastParams
  90. for (param in lastParams) {
  91. if (lastParams.hasOwnProperty(param) && (currentParams[param] !== lastParams[param])) {
  92. return false;
  93. }
  94. }
  95. return true;
  96. },
  98. applyPaging: function () {
  99. var me = this,
  100. start = me.start,
  101. limit = me.limit,
  102. allData, data;
  104. if ((typeof start == 'number') && (typeof limit == 'number')) {
  105. allData = this.data;
  106. data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey);
  107. data.addAll(allData.items.slice(start, start + limit));
  108. me.allData = allData;
  109. me.data = data;
  110. }
  111. },
  113. loadRecords: function (records, options) {
  114. var me = this,
  115. i = 0,
  116. length = records.length,
  117. start,
  118. addRecords,
  119. snapshot = me.snapshot,
  120. allData = me.allData;
  122. if (options) {
  123. start = options.start;
  124. addRecords = options.addRecords;
  125. }
  127. if (!addRecords) {
  128. delete me.allData;
  129. delete me.snapshot;
  130. me.clearData(true);
  131. } else if (allData) {
  132. allData.addAll(records);
  133. } else if (snapshot) {
  134. snapshot.addAll(records);
  135. }
  137. me.data.addAll(records);
  139. if (!me.allData) {
  140. me.applyPaging();
  141. }
  143. if (start !== undefined) {
  144. for (; i < length; i++) {
  145. records[i].index = start + i;
  146. records[i].join(me);
  147. }
  148. } else {
  149. for (; i < length; i++) {
  150. records[i].join(me);
  151. }
  152. }
  154. /*
  155.  * this rather inelegant suspension and resumption of events is required because both the filter and sort functions
  156.  * fire an additional datachanged event, which is not wanted. Ideally we would do this a different way. The first
  157.  * datachanged event is fired by the call to this.add, above.
  158.  */
  159. me.suspendEvents();
  161. if (me.filterOnLoad && !me.remoteFilter) {
  162. me.filter();
  163. }
  165. if (me.sortOnLoad && !me.remoteSort) {
  166. me.sort(undefined, undefined, undefined, true);
  167. }
  169. me.resumeEvents();
  170. me.fireEvent('datachanged', me);
  171. me.fireEvent('refresh', me);
  172. },
  174. loadData: function (data, append) {
  175. var me = this,
  176. model = me.model,
  177. length = data.length,
  178. newData = [],
  179. i,
  180. record;
  182. me.isPaging(Ext.apply({}, this.lastOptions ? this.lastOptions : {}));
  184. //make sure each data element is an Ext.data.Model instance
  185. for (i = 0; i < length; i++) {
  186. record = data[i];
  188. if (!(record.isModel)) {
  189. record = Ext.ModelManager.create(record, model);
  190. }
  191. newData.push(record);
  192. }
  194. me.loadRecords(newData, append ? me.addRecordsOptions : undefined);
  195. },
  197. loadRawData: function (data, append) {
  198. var me = this,
  199. result = me.proxy.reader.read(data),
  200. records = result.records;
  202. if (result.success) {
  203. me.totalCount = result.total;
  204. me.isPaging(Ext.apply({}, this.lastOptions ? this.lastOptions : {}));
  205. me.loadRecords(records, append ? me.addRecordsOptions : undefined);
  206. me.fireEvent('load', me, records, true);
  207. }
  208. },
  210. load: function (options) {
  211. var me = this,
  212. pagingOptions;
  214. options = options || {};
  216. if (typeof options == 'function') {
  217. options = {
  218. callback: options
  219. };
  220. }
  222. options.groupers = options.groupers || me.groupers.items;
  223. options.page = options.page || me.currentPage;
  224. options.start = (options.start !== undefined) ? options.start : (options.page - 1) * me.pageSize;
  225. options.limit = options.limit || me.pageSize;
  226. options.addRecords = options.addRecords || false;
  228. if (me.buffered) {
  229. return me.loadToPrefetch(options);
  230. }
  231. var operation;
  233. options = Ext.apply({
  234. action: 'read',
  235. filters: me.filters.items,
  236. sorters: me.getSorters()
  237. }, options);
  238. me.lastOptions = options;
  240. operation = new Ext.data.Operation(options);
  242. if (me.fireEvent('beforeload', me, operation) !== false) {
  244. me.loading = true;
  245. pagingOptions = Ext.apply({}, options);
  246. if (me.isPaging(pagingOptions)) {
  247. Ext.Function.defer(function () {
  248. if (me.allData) {
  249. me.data = me.allData;
  250. delete me.allData;
  251. }
  252. me.applyPaging();
  253. me.fireEvent("datachanged", me);
  254. me.fireEvent('refresh', me);
  255. var r = [].concat(me.data.items);
  256. me.loading = false;
  257. me.fireEvent("load", me, r, true);
  258. if (me.hasListeners.read) {
  259. me.fireEvent('read', me, r, true);
  260. }
  262. if (options.callback) {
  263. options.callback.call(options.scope || me, r, options, true);
  264. }
  265. }, 1, me);
  266. return me;
  267. }
  269. me.proxy.read(operation, me.onProxyLoad, me);
  270. }
  272. return me;
  273. },
  275. insert: function (index, records) {
  276. var me = this,
  277. sync = false,
  278. i,
  279. record,
  280. len;
  282. records = [].concat(records);
  283. for (i = 0, len = records.length; i < len; i++) {
  284. record = me.createModel(records[i]);
  285. record.set(me.modelDefaults);
  286. // reassign the model in the array in case it wasn't created yet
  287. records[i] = record;
  289. me.data.insert(index + i, record);
  290. record.join(me);
  292. sync = sync || record.phantom === true;
  293. }
  295. if (me.allData) {
  296. me.allData.addAll(records);
  297. }
  299. if (me.snapshot) {
  300. me.snapshot.addAll(records);
  301. }
  303. if (me.requireSort) {
  304. // suspend events so the usual data changed events don't get fired.
  305. me.suspendEvents();
  306. me.sort();
  307. me.resumeEvents();
  308. }
  310. me.fireEvent('add', me, records, index);
  311. me.fireEvent('datachanged', me);
  312. if (me.autoSync && sync && !me.autoSyncSuspended) {
  313. me.sync();
  314. }
  315. },
  317. doSort: function (sorterFn) {
  318. var me = this,
  319. range,
  320. ln,
  321. i;
  323. if (me.remoteSort) {
  324. // For a buffered Store, we have to clear the prefetch cache since it is keyed by the index within the dataset.
  325. // Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
  326. // via the guaranteedrange event
  327. if (me.buffered) {
  328. me.pageMap.clear();
  329. me.loadPage(1);
  330. } else {
  331. //the load function will pick up the new sorters and request the sorted data from the proxy
  332. me.load();
  333. }
  334. } else {
  335. if (me.allData) {
  336. me.data = me.allData;
  337. delete me.allData;
  338. }
  339. me.data.sortBy(sorterFn);
  340. if (!me.buffered) {
  341. range = me.getRange();
  342. ln = range.length;
  343. for (i = 0; i < ln; i++) {
  344. range[i].index = i;
  345. }
  346. }
  347. me.applyPaging();
  348. me.fireEvent('datachanged', me);
  349. me.fireEvent('refresh', me);
  350. }
  351. },
  353. getTotalCount: function () {
  354. return this.allData ? this.allData.getCount() : this.totalCount || 0;
  355. },
  357. //inherit docs
  358. getNewRecords: function () {
  359. if (this.allData) {
  360. return this.allData.filterBy(this.filterNew).items;
  361. }
  362. return this.data.filterBy(this.filterNew).items;
  363. },
  365. //inherit docs
  366. getUpdatedRecords: function () {
  367. if (this.allData) {
  368. return this.allData.filterBy(this.filterUpdated).items;
  369. }
  370. return this.data.filterBy(this.filterUpdated).items;
  371. },
  373. remove: function (records, /* private */ isMove) {
  374. if (!Ext.isArray(records)) {
  375. records = [records];
  376. }
  378. /*
  379.  * Pass the isMove parameter if we know we're going to be re-inserting this record
  380.  */
  381. isMove = isMove === true;
  382. var me = this,
  383. sync = false,
  384. i = 0,
  385. length = records.length,
  386. isNotPhantom,
  387. index,
  388. record;
  390. for (; i < length; i++) {
  391. record = records[i];
  392. index = me.data.indexOf(record);
  394. if (me.allData) {
  395. me.allData.remove(record);
  396. }
  398. if (me.snapshot) {
  399. me.snapshot.remove(record);
  400. }
  402. if (index > -1) {
  403. isNotPhantom = record.phantom !== true;
  405. // don't push phantom records onto removed
  406. if (!isMove && isNotPhantom) {
  408. // Store the index the record was removed from so that rejectChanges can re-insert at the correct place.
  409. // The record's index property won't do, as that is the index in the overall dataset when Store is buffered.
  410. record.removedFrom = index;
  411. me.removed.push(record);
  412. }
  414. record.unjoin(me);
  415. me.data.remove(record);
  416. sync = sync || isNotPhantom;
  418. me.fireEvent('remove', me, record, index);
  419. }
  420. }
  422. me.fireEvent('datachanged', me);
  423. if (!isMove && me.autoSync && sync && !me.autoSyncSuspended) {
  424. me.sync();
  425. }
  426. },
  428. filter: function (filters, value) {
  429. if (Ext.isString(filters)) {
  430. filters = {
  431. property: filters,
  432. value: value
  433. };
  434. }
  436. var me = this,
  437. decoded = me.decodeFilters(filters),
  438. i = 0,
  439. doLocalSort = me.sorters.length && me.sortOnFilter && !me.remoteSort,
  440. length = decoded.length;
  442. for (; i < length; i++) {
  443. me.filters.replace(decoded[i]);
  444. }
  446. if (me.remoteFilter) {
  447. // So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
  448. delete me.totalCount;
  450. // For a buffered Store, we have to clear the prefetch cache because the dataset will change upon filtering.
  451. // Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
  452. // via the guaranteedrange event
  453. if (me.buffered) {
  454. me.pageMap.clear();
  455. me.loadPage(1);
  456. } else {
  457. // Reset to the first page, the filter is likely to produce a smaller data set
  458. me.currentPage = 1;
  459. //the load function will pick up the new filters and request the filtered data from the proxy
  460. me.load();
  461. }
  462. } else {
  463. /**
  464.  * @property {Ext.util.MixedCollection} snapshot
  465.  * A pristine (unfiltered) collection of the records in this store. This is used to reinstate
  466.  * records when a filter is removed or changed
  467.  */
  468. if (me.filters.getCount()) {
  469. me.snapshot = me.snapshot || me.allData.clone() || me.data.clone();
  470. if (me.allData) {
  471. me.data = me.allData;
  472. delete me.allData;
  473. }
  474. me.data = me.data.filter(me.filters.items);
  475. me.applyPaging();
  477. if (doLocalSort) {
  478. me.sort();
  479. } else {
  480. // fire datachanged event if it hasn't already been fired by doSort
  481. me.fireEvent('datachanged', me);
  482. me.fireEvent('refresh', me);
  483. }
  484. }
  485. }
  486. },
  488. clearFilter: function (suppressEvent) {
  489. var me = this;
  491. me.filters.clear();
  493. if (me.remoteFilter) {
  495. // In a buffered Store, the meaing of suppressEvent is to simply clear the filters collection
  496. if (suppressEvent) {
  497. return;
  498. }
  500. // So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
  501. delete me.totalCount;
  503. // For a buffered Store, we have to clear the prefetch cache because the dataset will change upon filtering.
  504. // Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
  505. // via the guaranteedrange event
  506. if (me.buffered) {
  507. me.pageMap.clear();
  508. me.loadPage(1);
  509. } else {
  510. // Reset to the first page, clearing a filter will destroy the context of the current dataset
  511. me.currentPage = 1;
  512. me.load();
  513. }
  514. } else if (me.isFiltered()) {
  515. me.data = me.snapshot.clone();
  516. delete me.allData;
  517. delete me.snapshot;
  518. me.applyPaging();
  520. if (suppressEvent !== true) {
  521. me.fireEvent('datachanged', me);
  522. me.fireEvent('refresh', me);
  523. }
  524. }
  525. },
  527. isFiltered: function () {
  528. var snapshot = this.snapshot;
  529. return !!snapshot && snapshot !== (this.allData || this.data);
  530. },
  532. filterBy: function (fn, scope) {
  533. var me = this;
  535. me.snapshot = me.snapshot || me.allData.clone() || me.data.clone();
  536. me.data = me.queryBy(fn, scope || me);
  537. me.applyPaging();
  538. me.fireEvent('datachanged', me);
  539. me.fireEvent('refresh', me);
  540. },
  542. queryBy: function (fn, scope) {
  543. var me = this,
  544. data = me.snapshot || me.allData || me.data;
  545. return data.filterBy(fn, scope || me);
  546. },
  548. collect: function (dataIndex, allowNull, bypassFilter) {
  549. var me = this,
  550. data = (bypassFilter === true && (me.snapshot || me.allData)) ? (me.snapshot || me.allData) : me.data;
  552. return data.collect(dataIndex, 'data', allowNull);
  553. },
  555. getById: function (id) {
  556. return (this.snapshot || this.allData || this.data).findBy(function (record) {
  557. return record.getId() === id;
  558. });
  559. },
  561. removeAll: function (silent) {
  562. var me = this;
  564. me.clearData();
  565. if (me.snapshot) {
  566. me.snapshot.clear();
  567. }
  569. if (me.allData) {
  570. me.allData.clear();
  571. }
  573. // Special handling to synch the PageMap only for removeAll
  574. // TODO: handle other store/data modifications WRT buffered Stores.
  575. if (me.pageMap) {
  576. me.pageMap.clear();
  577. }
  578. if (silent !== true) {
  579. me.fireEvent('clear', me);
  580. }
  581. }
  582. });

0 0
格式化js代码 格式化js代码
原创粉丝点击
热门IT博客
上海it外包上海it外包
oct检查结果数据参考oct检查结果数据参考
阿里云 哪个节点好
怎样看降没有降权淘宝
情书淘宝店零食店
北京青少年行知实践
松下fp x编程软件
魔法王座皇冠升级数据
js 延迟1s
网络安全法的特点
淘宝大买家下载
易酷cms漏洞
淘桃美工网
mysql 1054
centos安装oracle 256
淘宝如何修改会员名
淘宝xboxone手柄会假吗
关系型数据库设计原则
caffe fcn边缘
java工程师刚入职
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 工商个人网上银行登录入口 工商网上银行登录入口 广东农工商职业技术学院 郑州工商学院教务系统 河南掌上工商app 农工商职业技术学院 四川工商职业技术学院 安徽工商职业 工商投诉电话 四川工商学院教务系统 浙江工商大学教务网 广州工商注册 工商上班时间 工商网上银行 工商信息查询系统 吉林工商学院 湖南工商大学教务系统 浙江工商大学教务处 四川工商技术学院 云南工商学院 广东工商职业技术大学 农工商技术学院 重庆工商大学融智学院 重庆工商大学几本 浙江工商教务网 工商企业信息 重庆工商职业学院 北京工商大学嘉华学院 陕西工商职业 工商企业信息查询系统 代理工商注册 工商电话银行 工商网上银行登录 全国工商企业信息查询系统 个体户工商年检 执照工商年检 工商注册公司需要多少钱 办工商执照多少钱 个体工商注册多少钱 工商注册代办多少钱 红盾网工商年检

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里