ExtJs 实现combo前台分页
2015-07-08 15:36
686 查看
如果不想在后台处理分页,一般做法是用ajax请求数据然后保存在本地内存,Ext提供了内存分页的方法,Ext.ux.data.PagingMemoryProxy。
Ext版本是4.2.1,ext-4.2.1/examples/ux/data/PagingMemoryProxy.js提供了pagingmemory(内存分页),我们需要引入这个文件。
数据文件1.txt
Ext版本是4.2.1,ext-4.2.1/examples/ux/data/PagingMemoryProxy.js提供了pagingmemory(内存分页),我们需要引入这个文件。
数据文件1.txt
[ ['value1', 'text1'], ['value2', 'text2'], ['value3', 'text3'], ['value4', 'text4'], ['value5', 'text5'], ['value6', 'text6'], ['value7', 'text7'], ['value8', 'text8'], ['value9', 'text9'], ['value10', 'text10'], ['value11', 'text11'], ['value12', 'text12'], ['value13', 'text13'], ['value14', 'text14'], ['value15', 'text15'], ['value16', 'text16'], ['value17', 'text17'], ['value18', 'text18'], ['value19', 'text19'], ['value20', 'text20'], ['value21', 'text21'], ['value22', 'text22'], ['value23', 'text23'], ['value24', 'text24'], ['value25', 'text25'], ['value26', 'text26'], ['value27', 'text27'] ]combopage.html
<!DOCTYPE html> <html> <head> <title>paging</title> <link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css"> <script type="text/javascript" src="ext-4.2.1/ext-all.js"></script> <script type="text/javascript" src="ext-4.2.1/examples/ux/data/PagingMemoryProxy.js"></script> <script type="text/javascript"> Ext.Loader.setPath('Ext.ux', 'ext-4.2.1/examples/ux') Ext.require('Ext.ux.data.PagingMemoryProxy'); var data = new Ext.data.Store({ proxy:{ type: 'ajax', url: '1.txt', reader:{ type: 'array' } }, fields:[ {name: 'value'}, {name: 'text'} ], autoLoad:true }); console.log(data.data.items); var store = new Ext.data.Store({ pageSize: 3, proxy:{ type: 'pagingmemory', data: data.data.items, reader:{ type: 'array' } }, fields:[ {name: 'value'}, {name: 'text'} ] }); Ext.onReady(function(){ new Ext.form.ComboBox({ store: store, emptyText: 'select one', mode: 'remote', triggerAction: 'all', valueField: 'value', displayField: 'text', width: 400, pageSize: 5, renderTo: Ext.getBody() }); }); </script> </head> <body> </body>
相关文章推荐
- js内存分析
- JSP四个作用域
- ExtJs 继承 和 插件 示例
- Javascript实现Tab切换
- 【FastJSON】解决FastJson中“$ref 循环引用”的问题
- knockout.js实例一~联系人管理器
- js寻路算法
- javascript实现10个球随机运动、碰撞实例详解
- JVM监控工具介绍jstack, jconsole, jinfo, jmap, jdb, jstat
- ArcGIS文件(arcgis_js_api)部署相关问题总结
- Javascript报uncaught typeerror illegal invocation错误
- 汉字转拼音插件:LM-PinYin.js
- js性能调试
- JS-JavaScript学习笔记(一)
- javascript基础八(知识点类闭包)
- js实现图片滚轮放大缩小以及鼠标拖动
- Javascript 正则表达式_3
- seaJS教程指南
- C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte
- JS通过Url传递中文参数,c#获取参数