`
shuhaolan
  • 浏览: 5868 次
  • 性别: 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例子下载

    《EditGridPanel实例详解与应用探索》 在IT领域，我们常常需要处理各种数据展示和编辑的需求，EditGridPanel就是这样一款强大的工具，它允许用户在界面上方便地进行数据的查看和编辑。在这个主题中，我们将深入探讨...

    Ext 连接数据库的相关操作

    在这个例子中，我们将探讨如何使用EXT连接SQL Server数据库，实现Editgridpanel的数据展示、分页、查询和删除功能。 首先，EXT中的Editgridpanel是一个可编辑的表格组件，用于显示和编辑数据。它集成了数据绑定和行...

    轻松搞定Extjs

    - **EditGridPanel**: 介绍了EditGridPanel的基本特性和使用方法。 - **编辑订单数据**: 通过一个具体的例子展示了如何使用EditGridPanel编辑表格数据。 - **保存修改的数据至服务器**: 讲解了如何将用户编辑后的...

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

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

    Ext常用功能开发总结

    EditGridPanel是具有编辑功能的表格，通常包含`Ext.grid.Panel`和`CellEditing`插件。编辑完成后，通过`store.sync()`提交数据，服务器端需处理JSON数据并响应。 ### Ajax代码参考 使用`Ext.Ajax.request`发送异步...

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

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

    ExtJS下拉列表树控件

    而如果在EditGridPanel中实现了增删改查操作，那么在保存数据时，需要确保获取到的是当前编辑的值，例如`e.field.getValue()`。 对于ExtJS EditorGridPanel中ComboBox列的显示问题，可能是因为数据没有正确绑定或...

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