ExtJs 实现combo前台分页

来源：互联网发布：神秘代码知乎编辑：程序博客网时间：2024/05/16 16:07

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

0 0