ExtJs 实现combo前台分页

原创 2015年07月08日 15:36:01

如果不想在后台处理分页,一般做法是用ajax请求数据然后保存在本地内存,Ext提供了内存分页的方法,Ext.ux.data.PagingMemoryProxy。

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>



PagingMemoryProxy

前因:项目需要,快速DEMO,采用EXT组件,想在纯HTML+JS的环境下给客户展示分页效果后果:example、API都没有找到,想组合Array Grid 和 Paging两个示例,达不到目的.....
  • barrier9591
  • barrier9591
  • 2009年12月07日 15:45
  • 4061

[Ext JS 4] Grid 实战之分页功能

分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据。也就是要多少取多少。这种方式比较适合Grid 的数据量很大,需分批...
  • oscar999
  • oscar999
  • 2013年07月24日 14:26
  • 11724

ExtJs——ComboBox(下拉列表、从后台读取数据、带分页)!!!

一,先来一个规范,而且简单的,从后台取数据ext //ajax combobox var proxy = new Ext.data.HttpProxy({url:'DataServlet.do'}...
  • zq9017197
  • zq9017197
  • 2011年03月10日 10:50
  • 8360

ExtJs6 combo下拉框分页、提示、换行提示等增强功能

先写一个最简易配置的远程下拉框配置: Ext.define('App.combo.UsrField', { extend: 'Ext.form.ComboBox', alias: 'w...
  • eumenides_
  • eumenides_
  • 2016年09月27日 17:52
  • 456

Extjs分页数据与后台交互

自己就是记记笔记,欢迎讨论,测试通过 1,前端代码 这里最重要的就是::1)路径:url:"role/search.do" 2)配置json数据格式:例如:[{"total":50,"rows":[{...
  • changjh1
  • changjh1
  • 2017年01月13日 15:08
  • 2048

Extjs分页详解

http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html 相信不少刚学Extjs的都会在分页那里感到头疼,网上一大堆例子,找不到...
  • csnewdn
  • csnewdn
  • 2016年11月10日 11:02
  • 1838

ExtJs带条件查询分页问题的解决方法

extjs在分页时,在 app.store.load({ params : { ...
  • hanchuang213
  • hanchuang213
  • 2017年03月21日 17:24
  • 253

EXTJS分页技术

开始对EXT分页没搞透彻,所以做combobox的分页不知道如何下手。经过一段时间的使用终于弄明白了。刚学EXT分页的时候搞不清楚他的原理,其实很简单,就是把异步请求的json数据填充到grid中。至...
  • cy609329119
  • cy609329119
  • 2009年12月25日 14:11
  • 3356

ext前台分页

var store = new Ext.data.Store({         id: 'JsonStore1', //model:msg.fieldNames, pageSize:34, ...
  • qq_40033445
  • qq_40033445
  • 2018年02月07日 09:51
  • 32

extjs_09_自定义分页组件

extjs_09_自定义分页组件
  • adam_zs
  • adam_zs
  • 2014年07月07日 23:16
  • 1328
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJs 实现combo前台分页
举报原因:
原因补充:

(最多只允许输入30个字)