好用的EditGridPanel

最新推荐文章于 2020-09-26 21:14:51 发布

hilterlan

最新推荐文章于 2020-09-26 21:14:51 发布

阅读量118

点赞数

分类专栏： extjs 文章标签： EditGridPanel

本文链接：https://blog.csdn.net/hilterlan/article/details/84243565

版权

extjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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) ;

}

}
}
}) ;