ExtJS远程加载数据学习笔记.docVIP

ExtJS远程数据加载——学习笔记 环境：Eclipse + Jboss4.0+ IE8 + ExtJS2.0 JS文件 Ext.onReady(function(){ //数据源（表示数据从grid.jsp中来） var proxy = new Ext.data.HttpProxy({url:grid.jsp}); //数据结构（数据是以什么样的内容组织的） var record = new Ext.data.Record.create([ {name:id}, {name:name}, {name:desc} ]); //数据读取器（根据数据节点与组织结构来读取数据） var reader = new Ext.data.JsonReader( { root:rows, totalProperty: results }, record ); //数据集(从proxy取，根据reader读，放到ds中) var ds = new Ext.data.Store({ proxy: proxy, reader: reader }); //加载数据并传参(里面其实是json类型的参数) ds.load({params:{start:0,limit:10}}); //测试用Button(点击查看数据加载个数是否正确) var btn = new Ext.Button({ renderTo:btn, text:点我, handler: function(){ alert(ds.getCount()); } }); //测试用下拉框(将数据加载至下拉框查看) var combobox = new Ext.form.ComboBox({ store:ds, emptyText:请选择陕西的城市, mode:local,//使用local,remote不起作用,有人说这是这个组件在IE的BUG tiggerAction:all, displayField:name, valueField:id, renderTo:city }); //列选择框(列多选框) var sm = new Ext.grid.CheckboxSelectionModel(); //列模型(定义表格的框架) var cm = new Ext.grid.ColumnModel([ sm, {header:编号,dataIndex:id,width:20,sortable:true}, {header:名称,dataIndex:name,width:80}, {header:描述,dataIndex:desc,width:200} ]); //表格（定义表格） var grid = new Ext.grid.GridPanel({ height:200, renderTo: grid, ds: ds, cm: cm, sm: sm, bbar: new Ext.PagingToolbar({//分页 pageSize:10, store:ds, displayInfo:true, displayMsg:显示第{0}条到第{1}条，一共{2}条, emptyMsg:没有记录 }), //根据宽度比例自适应，若不设宽度，则等宽 viewConfig: { forceFit:true } }); }); HTML文件 body script type=text/javascript src=11-2.js/script div id=grid/div div id=city/div div id=btn/div /body grid.jsp页面 % String start = request.getParameter(start); String limit = request.getParameter(limit); try{ int index = Integer.parseInt(start); int pageSize = Integer.parseInt(limit); String json = {results:100,rows:[; for(int i = index; i pageSize + index; i++){ json += {id: + i + ,name: john + i + ,desc