ExtJs 구현combo 프론트 페이지

3422 단어
백그라운드에서 페이지를 처리하지 않으려면, 일반적인 방법은 aax로 데이터를 요청한 다음 로컬 메모리에 저장하는 것입니다. 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>

좋은 웹페이지 즐겨찾기