EXTJS 페이지 기술

EXT 페이지를 철저하게 나누지 못했기 때문에combobobox의 페이지를 만드는 데 어떻게 손을 대야 할지 모르겠다.한동안의 사용 끝에 마침내 알게 되었다.EXT 페이지를 처음 배울 때 그의 원리를 잘 알지 못했지만 사실은 매우 간단하다. 바로 비동기적으로 요청한 json 데이터를grid에 채우는 것이다.페이지 나누기는 사실상 일부 파라미터에 대한 제어일 뿐, start,limit는 중요한 파라미터baseParams도 있다.우리는 자주 페이지를 나누는 상황에 부딪히며, 동시에 분류된 데이터에 대해 페이지를 나누어야 한다.처음에는 배우기 시작했는데 분류하지 않는 데이터의 페이지를 구분할 수 없었고, 분류 데이터에 대해 페이지를 나누는 것은 말할 것도 없었다.내가 여기서 세 가지 상황을 총결하여 참고하면 아마도 초보자에게 도움이 될 것이다.첫 번째: 같은 종류의 데이터 페이지, 두 번째: 분류 데이터 페이지.세 번째:combobobox 페이지를 추가합니다.
grid 페이지는 이 세 개의 매개 변수의 의미를 반드시 알아야 한다.start는 어떤 기록부터 시작하는지 표시하고, limit는 몇 개의 기록을 표시하는지 표시합니다.mysql에서 데이터베이스에서 select*from tb_xx limit $start,$limit; 백그라운드에서 이 조회 데이터를 json 형식으로 출력하면 ok입니다.나머지 동작은 페이지 나누기가 자동으로 완성되었다.firfox+firbug로 디버깅을 하면 $start와 $limit의 값을 출력하면 그 이치를 알 수 있습니다.
간단한 페이지:
 
Ext 코드

var client_cm = new Ext.grid.ColumnModel([     

        new Ext.grid.RowNumberer(),   

        client_check_select,       

        {header:'ID',dataIndex:'id',width:40,sortable:true},   

         .....................................   

]);   

  

  

var person_ds = new Ext.data.Store({   

        id:         'client_datasource',   

        proxy: new Ext.data.HttpProxy({url:'grid.php'}),   

        reader: new Ext.data.JsonReader({   

            totalProperty: 'totalProperty',   

            root: 'root'  

        }, [   

            {name: 'id'},   

            {name: 'user_name'},   

            {name: 'ip_addr'}   

        ])   

    });   

  

  

var grid = new Ext.grid.GridPanel({   

        ds: person_ds,   

        cm: client_cm,   

        tbar: new Ext.PagingToolbar({   

            pageSize: 10,   

            store: ds,   

            displayInfo: true,   

displaymsg:'{0}조에서 {1}조까지의 기록을 표시하고 모두 {2}조',

emptymsg: "기록 없음"

        })   

    });   

  

person_ds.load({params:{start:0,limit:10}});       

  

백그라운드 getParameter.start, limit, 각종 언어가 다르면 말할 필요가 없다.  

검색 결과 인쇄 json, 페이지 나누기 자동 완성.  

var client_cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), client_check_select, {header:'ID',dataIndex:'id',width:40,sortable:true}, ..................................... ]); var person_ds = new Ext.data.Store({ id: 'client_datasource', proxy: new Ext.data.HttpProxy({url:'grid.php'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'user_name'}, {name: 'ip_addr'} ]) }); var grid = new Ext.grid.GridPanel({ ds: person_ds, cm: client_cm, tbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '  {0}   {1}  ，   {2}  ',
           e            )        

 
분류 데이터 페이지 나누기: 데이터 분류 관리의 상황을 자주 만나는 동시에 분류 결과에 대해 페이지를 나누어야 한다.이전에 막 배웠을 때 start, limit 위에서 발을 디디거나 다른 방식을 사용해 보았지만 사실 그렇게 복잡하지 않았다. WEB 개발을 한 사람들은 모두 알고 있다. 분류 페이지를 나누어 매개 변수를 많이 전달하고 많이 전달하는 이 매개 변수의 값을 바꾸면 된다.그러면 이 매개 변수는 baseParams를 통해 전달됩니다. 여기서 다중 매개 변수는 type이라고 가정하면 다음과 같은 코드를 보십시오.
Ext 코드

var person_ds = new Ext.data.Store({   

        id:         'client_datasource',   

        baseParams: {type:0},   

        proxy: new Ext.data.HttpProxy({url:'grid.php'}),   

        reader: new Ext.data.JsonReader({   

            totalProperty: 'totalProperty',   

            root: 'root'  

        }, [   

            {name: 'id'},   

            {name: 'machine_name'},   

            {name: 'user_name'}   

        ])   

    });  

var person_ds = new Ext.data.Store({ id: 'client_datasource', baseParams: {type:0}, proxy: new Ext.data.HttpProxy({url:'grid.php'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'machine_name'}, {name: 'user_name'} ]) });

여기와 위의 차이점은baseParams: {type:0}을 추가했을 뿐입니다. type 기본값은 0입니다. 더 많은 매개 변수를 전달하려면 바로 뒤에 쓰면 됩니다.base Params: {type: 0, other: 1}, 또는 base Params: {type:'all', other:'not'}, 값은 전달되었습니다. base Params를 어떻게 바꾸는지 간단합니다:person_ds.baseParams = {type:2}; 당신의 사건에 추가하고 Reload를 하면 됩니다.이때 백그라운드는 상응하는 조정을 해야 한다. 매개 변수 가져오기 start,limit,type...검색 문장: select * from tb_xx where type='$type' limit $start,$limit;프린트.
 
combobobox 밑에 페이지 선택: 처음에 나도 어떻게 손을 대야 할지 몰랐고, 매개 변수를 어떻게 전달해야 할지, limit를 바꿔야 할지 몰랐습니다.아니면 베이스 Params를 바꿀까요?인터넷에서 관련 예를 찾아봤는데 좀 복잡해 보여서 간단하게 하려고 했어요.원리는 간단합니다. 아래 목록의 어떤 값을 선택할 때 더 limit 매개 변수 값을 선택하면 됩니다.이때 나는 리밋의 값을 바꾸고 싶었다.
person_ds.reload({params:{start:0,limit:parseInt(comboBox.getValue()}});
이렇게 첫 페이지는 문제없다. 페이지를 넘길 때 문제가 발생한다.limit 또 10...PagingToolbar에 pageSize 매개 변수가 있다는 것을 기억해라. 이 값을 바꾸면 성공한다. 원래 pageSize를 바꾸는 것은 limit의 값을 바꾸는 것과 같다. 코드는 다음과 같다.
 
Ext 코드

//페이지별 드롭다운 상자

var pagesize_combo = new Ext.form.ComboBox({   

        store: page_size_store,   

     width:50,   

        readOnly:true,   

     emptyText: '10',   

        mode: 'remote',   

        triggerAction: 'all',   

        valueField: 'value',   

        displayField: 'text'  

    });   

       

//드롭다운 목록 이벤트, pageSize 변경.다시 로드

    pagesize_combo.on("select",function(comboBox){          

        page_toolbar.pageSize = parseInt(comboBox.getValue());   

        person_ds.reload({params:{start:0,limit:page_toolbar.pageSize}});   

    });   

       

       

       

//페이지 나누기 도구 모음

    var page_toolbar =  new Ext.PagingToolbar({   

        region:'south',   

        pageSize: 10,   

        store: client_person_ds,   

        displayInfo: true,   

displaymsg:'{0}조에서 {1}조까지의 기록을 표시하고 모두 {2}조',

emptymsg: "기록 없음",

        items:[   

'페이지당 기록 수량:','

            pagesize_combo   

        ]   

    });   

  

  

//드디어 다 썼으니 초보자에게 도움이 되었으면 좋겠습니다.