好用的EditGridPanel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>集添加、删除、修改功能于一身的Ext.data.EditGridPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../modello.js">
</script>
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all.js">
</script>
<script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="../../io.js">
</script>
<script type="text/javascript" src="../../core.js">
</script>
<script type="text/javascript" src="moneyGridPanel.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Page.configRootPath() ;
new MoneyGridPanel() ;
}) ;
</script>
</head>
<body>
</body>
</html>
JavaScript代码
MoneyGridPanel = Ext.extend(Ext.grid.EditorGridPanel , {
typeCmb:null,
inserted:[],
conn:new Ext.data.Connection(),
constructor:function(){
this.typeCmb = new Ext.form.ComboBox({
triggerAction: "all",
mode :"local",
displayField:"type",
value:"全部",
width:70,
listeners:{
select:{
fn:this.onViewTypeSelect,
scope:this
}
},
store:new Ext.data.SimpleStore({
readOnly:true,
data:["收入" , "支出" , "全部"],
expandData:true,
fields:["type"]
})
}) ;
MoneyGridPanel.superclass.constructor.call(this , {
renderTo:Ext.getBody(),
width:300,
height:400,
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
tbar:[{
text:"保存" ,
handler:this.onSaveButtonClick,
scope:this
},"-",{
text:"添加",
handler:this.onInsertButtonClick,
scope:this
},"-",{
text:"删除",
handler:this.onRemoveButtonClick,
scope:this
},"-","查看方式:",this.typeCmb],
store:new Ext.data.SimpleStore({
autoLoad:true,
url:"http://localhost/extjstest/server/app/test/18/list.asp",
fields:["id" , "type" , {name:"money" , type:"int"}]
}),
columns:[{
header:"类型",
dataIndex:"type",
editor: new Ext.form.ComboBox({
triggerAction: "all",
mode :"local",
displayField:"type",
readOnly:true,
store:new Ext.data.SimpleStore({
data:["收入" , "支出"],
expandData:true,
fields:["type"]
})
})
},{
header:"金额",
dataIndex:"money",
editor:new Ext.form.NumberField({
maxValue:10000,
minValue:1
})
}]
}) ;
},
onViewTypeSelect:function(_combo){
var _type = _combo.getValue() ;
if(_type == "全部")
this.getStore().clearFilter() ;
else
this.getStore().filter("type" , _combo.getValue()) ;
},
onSaveButtonClick:function(){
var _m = this.getStore().modified ;
var _temp = [] ;
for(var _i = 0 ; _i < _m.length ; _i ++){
if(_m[_i].get("id") == "")
continue ;
var _data = {} ;
var _j = "" ;
for(_j in _m[_i].modified)
_data[_j] = _m[_i].get(_j) ;
_temp.push(Ext.apply(_data , {id:_m[_i].get("id")})) ;
}
for(var _i = 0 ; _i < this.inserted.length ; _i ++)
_temp.push(this.inserted[_i].data) ;
this.conn.on("requestcomplete" , this.onSaveInsertData , this) ;
this.conn.request({url:"http://localhost/extjstest/server/app/test/18/post.asp" , params:{content:Ext.util.JSON.encode(_temp)}}) ;
this.getStore().commitChanges() ;
this.onViewTypeSelect(this.typeCmb) ;
},
onInsertButtonClick:function(){
var _rs = new Ext.data.Record({
id:"",
type:"",
money:0
}) ;
this.getStore().add(_rs) ;
_rs.set("type" , "收入") ;
_rs.set("money" , 1) ;
this.inserted.push(_rs) ;
this.startEditing(this.getStore().getCount() - 1 , 0) ;
},
onSaveInsertData:function(_conn , _response){
var _xml = _response.responseXML ;
var _root = _xml.documentElement ;
for(var _i = 0 ; _i < _root.childNodes.length ; _i ++){
this.inserted[_i].set("id" , _root.childNodes[_i].text) ;
}
this.inserted = [] ;
},
onRemoveButtonClick:function(){
var _sm = this.getSelectionModel() ;
try{
if(_sm.getCount() == 0)
throw Error("尚未选定一条记录") ;
Ext.Msg.confirm("系统询问" , "你是否确认删除此条记录?" , this.onRemoveQuestion , this) ;
}catch(_err){
Ext.Msg.alert("系统提示" , _err.description) ;
}
},
onRemoveQuestion:function(_btn){
if(_btn == "yes"){
var _rs = this.getSelectionModel().getSelected() ;
this.getStore().remove(_rs) ;
if(_rs.get("id") != ""){
this.conn.un("requestcomplete" , this.onSaveInsertData , this) ;
this.conn.request({url:"http://localhost/extjstest/server/app/test/18/delete.asp" , params:{id:_rs.get("id")}}) ;
}
else{
this.inserted.remove(_rs) ;
this.getStore().modified.remove(_rs) ;
}
}
}
}) ;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>集添加、删除、修改功能于一身的Ext.data.EditGridPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../modello.js">
</script>
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all.js">
</script>
<script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="../../io.js">
</script>
<script type="text/javascript" src="../../core.js">
</script>
<script type="text/javascript" src="moneyGridPanel.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Page.configRootPath() ;
new MoneyGridPanel() ;
}) ;
</script>
</head>
<body>
</body>
</html>
JavaScript代码
MoneyGridPanel = Ext.extend(Ext.grid.EditorGridPanel , {
typeCmb:null,
inserted:[],
conn:new Ext.data.Connection(),
constructor:function(){
this.typeCmb = new Ext.form.ComboBox({
triggerAction: "all",
mode :"local",
displayField:"type",
value:"全部",
width:70,
listeners:{
select:{
fn:this.onViewTypeSelect,
scope:this
}
},
store:new Ext.data.SimpleStore({
readOnly:true,
data:["收入" , "支出" , "全部"],
expandData:true,
fields:["type"]
})
}) ;
MoneyGridPanel.superclass.constructor.call(this , {
renderTo:Ext.getBody(),
width:300,
height:400,
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
tbar:[{
text:"保存" ,
handler:this.onSaveButtonClick,
scope:this
},"-",{
text:"添加",
handler:this.onInsertButtonClick,
scope:this
},"-",{
text:"删除",
handler:this.onRemoveButtonClick,
scope:this
},"-","查看方式:",this.typeCmb],
store:new Ext.data.SimpleStore({
autoLoad:true,
url:"http://localhost/extjstest/server/app/test/18/list.asp",
fields:["id" , "type" , {name:"money" , type:"int"}]
}),
columns:[{
header:"类型",
dataIndex:"type",
editor: new Ext.form.ComboBox({
triggerAction: "all",
mode :"local",
displayField:"type",
readOnly:true,
store:new Ext.data.SimpleStore({
data:["收入" , "支出"],
expandData:true,
fields:["type"]
})
})
},{
header:"金额",
dataIndex:"money",
editor:new Ext.form.NumberField({
maxValue:10000,
minValue:1
})
}]
}) ;
},
onViewTypeSelect:function(_combo){
var _type = _combo.getValue() ;
if(_type == "全部")
this.getStore().clearFilter() ;
else
this.getStore().filter("type" , _combo.getValue()) ;
},
onSaveButtonClick:function(){
var _m = this.getStore().modified ;
var _temp = [] ;
for(var _i = 0 ; _i < _m.length ; _i ++){
if(_m[_i].get("id") == "")
continue ;
var _data = {} ;
var _j = "" ;
for(_j in _m[_i].modified)
_data[_j] = _m[_i].get(_j) ;
_temp.push(Ext.apply(_data , {id:_m[_i].get("id")})) ;
}
for(var _i = 0 ; _i < this.inserted.length ; _i ++)
_temp.push(this.inserted[_i].data) ;
this.conn.on("requestcomplete" , this.onSaveInsertData , this) ;
this.conn.request({url:"http://localhost/extjstest/server/app/test/18/post.asp" , params:{content:Ext.util.JSON.encode(_temp)}}) ;
this.getStore().commitChanges() ;
this.onViewTypeSelect(this.typeCmb) ;
},
onInsertButtonClick:function(){
var _rs = new Ext.data.Record({
id:"",
type:"",
money:0
}) ;
this.getStore().add(_rs) ;
_rs.set("type" , "收入") ;
_rs.set("money" , 1) ;
this.inserted.push(_rs) ;
this.startEditing(this.getStore().getCount() - 1 , 0) ;
},
onSaveInsertData:function(_conn , _response){
var _xml = _response.responseXML ;
var _root = _xml.documentElement ;
for(var _i = 0 ; _i < _root.childNodes.length ; _i ++){
this.inserted[_i].set("id" , _root.childNodes[_i].text) ;
}
this.inserted = [] ;
},
onRemoveButtonClick:function(){
var _sm = this.getSelectionModel() ;
try{
if(_sm.getCount() == 0)
throw Error("尚未选定一条记录") ;
Ext.Msg.confirm("系统询问" , "你是否确认删除此条记录?" , this.onRemoveQuestion , this) ;
}catch(_err){
Ext.Msg.alert("系统提示" , _err.description) ;
}
},
onRemoveQuestion:function(_btn){
if(_btn == "yes"){
var _rs = this.getSelectionModel().getSelected() ;
this.getStore().remove(_rs) ;
if(_rs.get("id") != ""){
this.conn.un("requestcomplete" , this.onSaveInsertData , this) ;
this.conn.request({url:"http://localhost/extjstest/server/app/test/18/delete.asp" , params:{id:_rs.get("id")}}) ;
}
else{
this.inserted.remove(_rs) ;
this.getStore().modified.remove(_rs) ;
}
}
}
}) ;