关闭

ExtJs 实现combo前台分页

1191人阅读 评论(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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:324779次
    • 积分:3801
    • 等级:
    • 排名:第8466名
    • 原创:75篇
    • 转载:54篇
    • 译文:1篇
    • 评论:38条
    文章分类
    最新评论