`
shuhaolan
  • 浏览: 5711 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

好用的EditGridPanel

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) ;  
                      
                }  
                  
            }  
        }  
    }) ;  
分享到：
| EditGridPanel
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EditGridPanel例子下载

    NULL 博文链接：https://shuhaolan.iteye.com/blog/1576153

    Ext 连接数据库的相关操作

    该例子 是对Editgridpanel连接sqlserver数据库 并且进行分页 查询 删除 的操作

    Ext常用功能开发总结

    关于表格的使用说明 2 画表格 2 表格数据的构造 2 表格数据的列定义 4 表格的样式 4 表格复选框的实现 5 表格复选框默认选中的实现 6 ...EditGridPanel的构成、数据提交及后台接收 18 Ajax代码参考 21 Button的使用 21

    Ext修改GridPanel数据和字体颜色、css属性等

    Ext修改GridPanel数据和字体颜色等，不是单指EditGridPanel 首先获取选中的行（当然也可以获取单元格）： 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置： 代码如下: selectedRow....

    extjs实现选择多表自定义查询功能 前台部分(ext源码)

    主要使用的技术： 1、extjs2.0，整体框架 2、RemoteCheckboxGroup.js ，用于动态生成表字段（供查询结果使用） 3、Ext.ux.grid.RowActions.js，用于...EditGridPanel主要代码如下： 代码如下: {header:’括号’,dataInd

    轻松搞定Extjs_原创

    第二十三章：可编辑的GridPanel——EditGridPanel 172 一、EditGridPanel 172 二、编辑订单数据 173 三、保存修改的数据至服务器 178 四、处理请求 179 五、完整源代码 181 六、验证 186 七、替换选择模型 187 八、...

Magicbox
Global site tag (gtag.js) - Google Analytics