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:'忧郁的灵魂 " + i + "'}";
if(i != pageSize + index -1){
json += ",";
}
}
json += "]}";
PrintWriter outer =response.getWriter();
outer.write(json);
outer.close();//此处若省略close方法，将无法加载数据，=。=不理解
} catch(Exception e){
}
%>
*使用JsonStore将省略一部分代码，但理解基础更重要。
效果图：
1772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
