4. Grid
![](https://p-blog.csdn.net/images/p_blog_csdn_net/linux2linux/20080124image004.jpg)
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
"
);
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
try
...
{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//String json = "{totalProperty:100,root:[";
String json = "{totalProperty:100,root:[";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for (int i = index; i < pageSize + index; i++) ...{
json += "{id:" + i + ",name:'二月DD" + i + "',descn:'descn" + i + "'}";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (i != pageSize + index - 1) ...{
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
//out.print(json);
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
}
catch
(Exception ex)
...
{
}
%>
获取数据时,如此访问grid.jsp文件
grid.jsp?start=1&limit=10
Grid使用
Grid中字段定制
var
cm
=
new
Ext.grid.ColumnModel([
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'描述',dataIndex:'id'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'姓名',width:100, sortable:true,dataIndex:'name'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'描述',dataIndex:'descn'}
]);
Header 显示名称
dataIndex 从ds查找字段
width 字段宽度
sortable 是否允许排序
Grid中使用数据源的定义,从grid.jsp中获取数据
var
ds
=
new
Ext.data.Store(
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
proxy: new Ext.data.HttpProxy(...{url:'grid.jsp'}),
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
reader: new Ext.data.JsonReader(...{
totalProperty: 'totalProperty',
root: 'root'
}, [
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'id'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'name'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'descn'}
])
}
);
定义GridPanel创建Grid
var
grid
=
new
Ext.grid.GridPanel(
...
{
el: 'grid',
width:600,
ds: ds,
cm: cm,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
bbar: new Ext.PagingToolbar(...{
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "你好"
})
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
);
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信息
![](https://p-blog.csdn.net/images/p_blog_csdn_net/linux2linux/20080124image005.jpg)
修改如下:
var
grid
=
new
Ext.grid.GridPanel(
...
{
el: 'grid',
width:600,
ds: ds,
cm: cm,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tbar:[...{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler : onItemClick
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}, '-', ...{
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},'-',...{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}],
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
bbar: new Ext.PagingToolbar(...{
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "你好"
})
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
);
在GridPanel添加在Grid上的Toolbar,Toolbar上添加三个按钮,并为Add Something添加单击事件onItemClick。
单击事件
var
win;
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
onItemClick(item)
...
{
//alert(item.text);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (!win) ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var ds = new Ext.data.Store(...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
proxy: new Ext.data.HttpProxy(...{url:'combo.jsp'}),
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
reader: new Ext.data.JsonReader(...{
totalProperty: 'totalProperty',
root: 'root'
}, [
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'retrunValue', type: 'int'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'displayText'}
])
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var simpleForm = new Ext.FormPanel( ...{
el : 'hello-tabs',
labelAlign : 'left',
title : '你好',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
width : 600,
frame : true,
labelWidth : 80,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
xtype : "textfield",
fieldLabel : "Text",
name : "textvalue"
}],
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
layout : 'column',
border : false,
labelSeparator : ':',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [ ...{
columnWidth : .5,
layout : 'form',
border : false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'name',
anchor : '90%'
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}, ...{
columnWidth : .5,
layout : 'form',
border : false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
xtype : 'textfield',
fieldLabel : '年龄',
name : 'age',
anchor : '90%'
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}, ...{
columnWidth : .5,
layout : 'form',
border : false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
xtype : 'combo',
store : ds,
valueField : "retrunValue",
displayField : "displayText",
mode : 'local',
forceSelection : true,
blankText : '请选择学历',
emptyText : '选择学历',
hiddenName : 'education',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '学历',
name : 'education',
anchor : '90%'
}]
},
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
columnWidth : .25,
layout : 'form',
border : false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
style : 'margin-top:5px',
xtype : 'radio',
fieldLabel : '性别',
boxLabel : '男',
name : 'sex',
checked : true,
inputValue : 'M',
anchor : '95%'
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}, ...{
columnWidth : .25,
layout : 'form',
labelWidth : 0,
labelSeparator : '',
hideLabels : true,
border : false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items : [...{
style : 'margin-top:5px',
xtype : 'radio',
fieldLabel : '',
boxLabel : '女',
name : 'sex',
inputValue : 'F',
anchor : '95%'
}]
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
]
}]
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
win = new Ext.Window( ...{
el : 'hello-win',
layout : 'fit',
width : 500,
height : 300,
closeAction : 'hide',
plain : true,
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
items :
simpleForm,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
buttons : [ ...{
text : '保存',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
handler : function() ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (simpleForm.form.isValid()) ...{
this.disabled = true;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
simpleForm.form.doAction('submit', ...{
url : 'test.jsp',
method : 'post',
params : '',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
success : function(form, action) ...{
Ext.Msg.alert('成功', action.result.data);
this.disabled = false;
//document.location.href = 'hello.html';
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
failure : function() ...{
Ext.Msg.alert('失败', '抱歉');
this.disabled = false;
}
});
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}, ...{
text : '取消',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
handler : function() ...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
simpleForm.form.load( ...{
url : 'formget.jsp',
method : 'get',
params : ''
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}]
});
ds.load();
}
win.show(this);
}
唯一需要注意的是保存和取消按钮需要加入Ext.Window做控制,并且要注意FormPanel和Ext.Windows所要渲染的div块,并且这些块必须在grid.html中进行定义
<
div id
=
"
hello-win
"
class
=
"
x-hidden
"
>
<
div class
=
"
x-window-header
"
>
Hello Dialog
</
div
>
<
div id
=
"
hello-tabs
"
>
<!--
Auto create tab
1
-->
<
div class
=
"
x-tab
"
title
=
"
Hello World 1
"
>
<
p
>
Hello...
</
p
>
</
div
>
<!--
Auto create tab
2
-->
<
div class
=
"
x-tab
"
title
=
"
Hello World 2
"
>
<
p
>
... World
!</
p
>
</
div
>
</
div
>
</
div
>