Ext.onReady(function(){
var form = getSerchFrom();
var grid = getGrid();
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'border',
items: [form,grid]
});
form.render('form');
});
function getSerchFrom(){ //构造头部分的查询条件
var form = new Ext.form.FormPanel({
region: 'north',
title:'查询条件',
labelAlign:'right',
labelWidth:50,
height:100,
width:300,
frame:true,
items:[{
layout:'column',
items:[{
columnWidth:.25,
layout:'form',
items:[{
xtype:'combo',
fieldLabel:'下拉框1',
name:'combo',
store: new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2']
]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
readOnly:true//只读属性
},{
xtype:'textfield',
fieldLabel:'文本',
name:'text',
maxLength:20, //判断最大可以输入的数值
maxLengthText:'输入过多,最大为20' //输入超过时,显示的提示信息
}]
},{
columnWidth:.25,
layout:'form',
items:[{
xtype:'combo',
fieldLabel:'下拉框2',
name:'combo',
store: new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2']
]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
readOnly:true//只读属性
},{
xtype:'datefield',
fieldLabel:'日期',
name:'date',
readOnly:true
}]
},{
columnWidth:.25,
layout:'form',
items:[{
xtype:'combo',
fieldLabel:'下拉框3',
name:'combo',
store: new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2']
]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
readOnly:true//只读属性
},{
xtype:'datefield',
fieldLabel:'日期',
name:'date',
readOnly:true
}]
},{
columnWidth:.25,
layout:'form',
items:[{
xtype:'combo',
fieldLabel:'下拉框3',
name:'combo',
store: new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2']
]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
readOnly:true//只读属性
},{
xtype:'button',
text:'查询',
handler :function(){
Ext.Msg.alert("提示","查询成功");
}
}]
}]
}]
});
return form;
}
function getGrid(){ //构造下面的grid
var multiCheckBox = new Ext.grid.CheckboxSelectionModel(); // 生成 checkBox 控件
var fields = [{name:'id'},{name:'name'},{name:'sex'},{name:'age'},{name:'like'},{name:'tel'}];
var ds = new Ext.data.Store({ // 配置分组数据集
reader : new Ext.data.JsonReader({
totalProperty : "results", // 记录总数
root: "rows",
fields : fields
}),
url : "TestDataServlet"
});
ds.load();
//定义表头
var cm = new Ext.grid.ColumnModel([
multiCheckBox,
new Ext.grid.RowNumberer({header : '', width : 20}), // 表格行号组件
{ header:'行号', dataIndex:'id'},
{header:'姓名', dataIndex:'name'},
{header:'性别', dataIndex:'sex'},
{header:'年龄',dataIndex:'age'},
{header:'爱好',dataIndex:'like'},
{header:'电话',dataIndex:'tel'}
]);
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
title:'查询结果',
id: '',
region:'center',
store: ds,
// tbar : toolbar,
cm: cm,
stripeRows : true, // 显示斑马线
autoScroll : false, // 当数据超出表格高度时,自动显示滚动条
sm: multiCheckBox, //生成checkbox
bbar: new Ext.PagingToolbar({
pageSize: 10, // 是每页显示几条数据
store: ds,
displayInfo: true, // 跟下面的配置有关,如果是false就不会显示提示信息
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', // 只有在displayInfo:true的时候才有效,
//用来显示有数据的时候的提示信息,中国人应该看得懂汉语,
//到时候{0},{1},{2}会自动变成对应的数据
emptyMsg: "没有记录"
})
});
//给grid添加click事件
grid.on("rowClick",function(grid, row,e){
alert(row+1);
});
return grid;
}
下面的事servlet里面
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out =response.getWriter();
//构造假数据
StringBuffer json =new StringBuffer("{results:10,rows:[");
for(int i=0;i<10;i++){
json.append("{id:'编号"+i+"',name:'姓名"+i+"',sex:'"+(i%3==0?'男':'女')+"',age:"+i+",like:'"
+(i%3==0?"足球":"篮球")+"',tel:'123456789'},");
}
String tojson =json.substring(0,json.lastIndexOf(","));
tojson= tojson+"]}";
out.write(tojson);
out.flush();
其实这里面注意的只有一下几点,
1、servlet处理中文的 //response.setContentType("text/html;charset=UTF-8");这段
2、json的格式和 构造store 里面的 reader : new Ext.data.JsonReader({
totalProperty : "results", // 记录总数
root: "rows",
fields : fields
})
3、js里面有一些细节,需要注意。