ExtJS 4.2 Using Tips---combobox combo box and Paging page tool

These two functions are often used together, generally when the combo combo box is generated, the setting pagesize is greater than 0, and a paging toolbar is automatically created in the footer position of the drop-down list, provided that Querymode: ' remote ' reads remotely data.

Start by creating a model:

Ext.define (' Post ', {        "Ext.data.Model",        proxy: {            ' ajax '            , '/admin/ organizations/extcombox/',            reader: {                '                json ', ' orgs ',                ' total '             }        }, Fields        : [            ' id ', mapping: ' ID '},            ' name ', mapping: ' Name '}        ]    });

Then the store and the Combox.

    vards = Ext.create (' Ext.data.Store ', {pageSize:10,//limit parameter, shows the number of bars per page, default is autoLoad:false, Model:' Post '    }); varCombox = ext.create (' Ext.panel.Panel '), {width:320, bodypadding:1, layout:' Anchor ', items: [{xtype:' Combo ', Store:ds, Displayfield:' Name ', Minchars:4,//minimum number of charactersTypeAhead:false, Hidelabel:true, Hidetrigger:true, Anchor:' 100% ', MultiSelect:false, Querydelay:1000, Querymode:' Remote ',//read the remote data reader to local dataQueryparam: ' Ssearch ',//query parameters, default to querylistconfig: {loadingtext:' Find in. ', Emptytext:' No data in compliance '//minheight,maxheight,minwidth,maxwidth:100 drop-down box min, max height and width settings}, PageSize:10//page size of drop-down list box, greater than 0 automatically create page bar}, {xtype:' Component ', Style:' margin-top:10px ', HTML:' Enter at least 4-bit characters '            }        ]    });

Then a container is referenced in the container, no container on the renderTo:Ext.getBody (), Effect:,

Get results for input query parameters

View the browser console to see the parameters sent:

_dc=1406791364718 cache serial number, automatic generation, no tube
limit=10 show number of bars per page
Page=1 Current Page
Ssearch= Beijing Query Parameters
Start=0 This query starting sequence number

There are also the results of the return:

 {"Orgs": [{"id": 9110, "name": "\u5317\u4eac\u5510\u62c9\u96c5\u79c0\u9152\u5e97\u66a8\u5317\u4eac\u71d5\ U4eac\u996d\u5e97\u6709\u9650\u8d23\u4efb\u516c\u53f8 "}, {" id ": 669," name ":" \u5317\u4eac\u79d1\u822a\u6295\u8d44 \u6709\u9650\u516c\u53f8 "}, {" id ": 11464," name ":" \u6d77\u822a\u4e91\u7aef\u4f20\u5a92\uff08\u5317\u4eac\uff09\ U6709\u9650\u516c\u53f8 "}, {" id ":" Name ":" \U5317\U4EAC\U884C\U653F\U4E2D\U5FC3 "}, {" id ": 567," name ":" \u5317\ U4eac\u822a\u7ad9\u63a7\u5236\u4e2d\u5fc3 "}, {" id ": 405," name ":" \u5317\u4eac\u5b89\u5168\u529e\u516c\u5ba4 "}, {" ID ": 358," name ":" \u5317\u4eac\u8425\u4e1a\u90e8 "}, {" id ": 6509," name ":" \u5317\u4eac\u65b0\u534e\u7a7a\u6e2f\u822a \u7a7a\u98df\u54c1\u6709\u9650\u516c\u53f8 "}, {" id ": 587," name ":" \u5317\u4eac\u8425\u8fd0\u57fa\u5730 "}, {" id ": 8912, "name": "\u5317\u4eac\u9996\u90fd\u822a\u7a7a\u6709\u9650\u516c\u53f8"}], "Total": 141} 

The returned Chinese was transcoded, ╮(╯▽╰)╭, anyway just need to look at the file structure on the line, there is the root node ' orgs ' and the total number of data, here the two parameter names need and Model.proxy.reader set the ' root ' and ' totalproperty ' ' Like, if Root is not the same, the data can not be read, if the totalproperty is not the same, the page display will be wrong.

This is the case, in short when using ExtJS, the parameter settings are very important, as long as the parameters are set correctly, ExtJS will complete the work behind, the parameters are slowly transferred to the appropriate format.