ExtJs 实现combo前台分页

最新推荐文章于 2024-07-24 14:58:19 发布

tingyuanss

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量2.2k

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/tingyuanss/article/details/46803985

版权

ExtJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如果不想在后台处理分页，一般做法是用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>