Ext表格自定义分页大小 插件
2018-06-24 01:43:16来源:未知 阅读 ()
代码如下:
1 /* 2 * Ext表格自定义分页大小 插件 3 * 4 * 示例PagingToolbar 5 brr = new Ext.ux.PagingToolbar({ 6 plugins: new Ext.ui.plugins.ComboPageSize(), 7 pageSize : 25, 8 store : ds, 9 displayInfo : true, 10 displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 11 emptyMsg : "没有记录" 12 }); 13 示例查询 14 ds.load({ 15 params : Ext.apply({ 16 start : 0, 17 limit : brr.pageSize 18 },dsx.baseParams) 19 }); 20 * 21 */ 22 Ext.namespace('Ext.ui.plugins'); 23 24 Ext.ui.plugins.ComboPageSize = function(config) { 25 Ext.apply(this, config); 26 }; 27 28 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, { 29 30 pageSizes: [15, 20, 50, 100], 31 prefixText: '每页显示', 32 postfixText: '条', 33 addToItem: true, //true添加到items中去,配合index;false则直接添加到最后 34 index: 8, //在items中的位置 35 init: function(pagingToolbar) { 36 var ps = this.pageSizes; 37 var combo = new Ext.form.ComboBox({ 38 typeAhead: true, 39 triggerAction: 'all', 40 lazyRender: true, 41 mode: 'local', 42 width: 50, 43 store: ps, 44 enableKeyEvents: true, 45 editable: false, 46 loadPages: function() { 47 var rowIndex = 0; 48 var gp = pagingToolbar.findParentBy( 49 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; } 50 ); 51 var sm = gp.getSelectionModel(); 52 if (undefined != sm && sm.hasSelection()) { 53 if (sm instanceof Ext.grid.RowSelectionModel) { 54 rowIndex = gp.store.indexOf(sm.getSelected()); 55 } else if (sm instanceof Ext.grid.CellSelectionModel) { 56 rowIndex = sm.getSelectedCell()[0]; 57 } 58 } 59 rowIndex += pagingToolbar.cursor; 60 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize); 61 }, 62 listeners: { 63 select: function(c, r, i) {//select和blur事件不可共存 64 pagingToolbar.pageSize = ps[i]; 65 this.loadPages(); 66 } 67 } 68 }); 69 if (this.addToItem) { 70 var inputIndex = this.index; 71 if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length; 72 pagingToolbar.insert(++inputIndex, '-'); 73 pagingToolbar.insert(++inputIndex, this.prefixText); 74 pagingToolbar.insert(++inputIndex, combo); 75 pagingToolbar.insert(++inputIndex, this.postfixText); 76 } 77 else { 78 pagingToolbar.add('-'); 79 pagingToolbar.add(this.prefixText); 80 pagingToolbar.add(combo); 81 pagingToolbar.add(this.postfixText); 82 } 83 pagingToolbar.on({ 84 beforedestroy: function() { 85 combo.destroy(); 86 }, 87 change: function() { 88 combo.setValue(pagingToolbar.pageSize); 89 } 90 }); 91 92 } 93 });
效果图:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 麻雀虽小五脏俱全 Dojo自定义控件应用 2020-02-20
- JS实现table表格固定表头且表头随横向滚动而滚动 2020-02-07
- Extjs Label的 fieldLabel和html属性值对齐的方法 2020-01-07
- textarea不能通过maxlength属性来限制字数的解决方法 2019-12-21
- 详解bootstrap table表格的使用方法 2019-12-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash