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>



Extjs分页详解

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

Extjs分页数据与后台交互

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

java中判断socket服务器端是否断开连接

最近在开发中遇到一个问题,就是如何判断远端服务器是否已经断开连接,如果断开那么需要重新连接。 首先想到socket类的方法isClosed()、isConnected()、isInputStream...
  • laukaka
  • laukaka
  • 2012年06月25日 10:32
  • 3658

java中判断socket服务器端是否断开连接

java中判断socket服务器端是否断开连接 最近在开发中遇到一个问题,就是如何判断远端服务器是否已经断开连接,如果断开那么需要重新连接。 首先想到socket类的方法isClosed()、i...
  • e_wsq
  • e_wsq
  • 2012年08月17日 16:13
  • 892

java实现前台页面分页信息调用

  • 2016年06月01日 16:32
  • 3KB
  • 下载

extjs combo分页显示多字段

采用ExtJS4.2的Ext.form.ComboBox实现自动完成 ExtJS    2014-08-06 摘要:采用ExtJS4.2的Ext.form.ComboBox实现自动完成,效...

前台实现分页,简单明了,一看就懂

前台页面分页实现

javascript(jquery)实现前台html简单的分页封装

/**  * 手机端列表的分页功能  *  url 后台取数据链接  * formid 表单的id  * target 存放数据的目标div的id  * initload 是否初始化加载数据...

用json-lib如何来处理数据,在前台实现分页

//查询出所有的员工信息     public void selectAllPersonInfo() throws IOException{         response.setContent...

jQuery datatables使用 ( 封装类实现前台分页 二 续...)

封装的公用分页的工具类: package com.sintai.util;   import java.util.ArrayList; import java.util.List;   p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJs 实现combo前台分页
举报原因:
原因补充:

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