4. Grid
Grid所需要的json字符串
{totalProperty:100,root:
[{id:1,name:'二月DD1',descn:'descn1'},{id:2,name:'二月DD2',descn:'descn2'},
{id:3,name:'二月DD3',descn:'descn3'},{id:4,name:'二月DD4',descn:'descn4'},
{id:5,name:'二月DD5',descn:'descn5'},{id:6,name:'二月DD6',descn:'descn6'},
{id:7,name:'二月DD7',descn:'descn7'},{id:8,name:'二月DD8',descn:'descn8'},
{id:9,name:'二月DD9',descn:'descn9'},{id:10,name:'二月
DD10',descn:'descn10'}]}
Grid.jsp 根据起始值和限制数量决定返回json字符串
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//response.setCharacterEncoding("UTF-8");
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try ...{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
//String json = "{totalProperty:100,root:[";
String json = "{totalProperty:100,root:[";
for (int i = index; i < pageSize + index; i++) ...{
json += "{id:" + i + ",name:'二月DD" + i + "',descn:'descn" + i + "'}";
if (i != pageSize + index - 1) ...{
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
//out.print(json);
} catch(Exception ex) ...{
}
%>
获取数据时，如此访问grid.jsp文件
grid.jsp?start=1&limit=10
Grid使用
Grid中字段定制
var cm = new Ext.grid.ColumnModel([
...{header:'描述',dataIndex:'id'},
...{header:'姓名',width:100, sortable:true,dataIndex:'name'},
...{header:'描述',dataIndex:'descn'}
]);
Header 显示名称
dataIndex 从ds查找字段
width 字段宽度
sortable 是否允许排序
Grid中使用数据源的定义，从grid.jsp中获取数据
var ds = new Ext.data.Store(...{
proxy: new Ext.data.HttpProxy(...{url:'grid.jsp'}),
reader: new Ext.data.JsonReader(...{
totalProperty: 'totalProperty',
root: 'root'
}, [
...{name: 'id'},
...{name: 'name'},
...{name: 'descn'}
])
});
定义GridPanel创建Grid
var grid = new Ext.grid.GridPanel(...{
el: 'grid',
width:600,
ds: ds,
cm: cm,
bbar: new Ext.PagingToolbar(...{
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "你好"
})
});
grid.render();
el为grid.html中id为grid的div块
ds 数据源
cm grid显示列定义
bbar bottom toolbal下面的工具栏
这里使用分页控件
最后ds导入时候，使用参数进行过滤
ds.load({params:{start:0,limit:10}});
扩展一下，将上面的Form放入到grid中来
在Grid上添加一个工具栏，通过单击工具栏中Add Something按钮，弹出上面的Form信息
修改如下：
var grid = new Ext.grid.GridPanel(...{
el: 'grid',
width:600,
ds: ds,
cm: cm,
tbar:[...{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler : onItemClick
}, '-', ...{
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',...{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}],
bbar: new Ext.PagingToolbar(...{
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "你好"
})
});
在GridPanel添加在Grid上的Toolbar，Toolbar上添加三个按钮，并为Add Something添加单击事件onItemClick。
单击事件
var win;
function onItemClick(item) ...{
//alert(item.text);
if (!win) ...{
var ds = new Ext.data.Store(...{
proxy: new Ext.data.HttpProxy(...{url:'combo.jsp'}),
