ExtJs GridPanel 完整实例

页面效果如下

 

 

view plaincopy to clipboardprint?
  1. <mce:script type="text/javascript"><!--  
  2.   Ext.onReady(function(){  
  3.        //初始化Extjs   
  4.        Ext.QuickTips.init();  
  5.        Ext.BLANK_IMAGE_URL ='./resources/images/default/s.gif';  
  6.        //首先读取数据，Json格式   
  7.        var store = new Ext.data.Store  
  8.        ({        
  9.            //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)   
  10.            reader:new Ext.data.JsonReader  
  11.            ({  
  12.            root:"Table",  
  13.            //从数据库中读取的总记录数   
  14.            totalProperty: 'totalCount',  
  15.            //要读取出来的字段   
  16.            fields:  
  17.            [  
  18.                'ID','RoleName','Remark'  
  19.            ]  
  20.            }),     
  21.            //获取数据源(该方法返回一个json格式的数据源)   
  22.            proxy: new Ext.data.HttpProxy  
  23.            ({  
  24.                url: 'http://www.cnblogs.com/BackGround/RoleManage/Role.ashx?AutoLoad=true'        
  25.            })  
  26.        });  
  27.        //定义GridPanel的列名称   
  28.       var cms=new Ext.grid.ColumnModel  
  29.       (  
  30.       [  
  31.        new Ext.grid.RowNumberer({header:"编号",width:30,align:"center"}),//添加一个编号   
  32.        new Ext.grid.CheckboxSelectionModel(),//增加 CheckBox多选框列   
  33.        //header列名称，dateIndex对应数据库字段名称,sortable支持排序   
  34.        {header:"角色名称",dataIndex:"RoleName",sortable:true},  
  35.        {header:"角色备注",dataIndex:"Remark",sortable:true}  
  36.           
  37.       ]  
  38.       );  
  39.      //编辑panel，用于添加，修改   
  40.      var Edit_Panel=new Ext.FormPanel({      
  41.        labelWidth: 75,   
  42.        labelAlign:'right',  
  43.        frame:true,        
  44.        bodyStyle:'padding:5px 5px 0',  
  45.        width: 380,  
  46.        defaults: {width: 150},  
  47.        defaultType: 'textfield',  
  48.        items:   
  49.        [  
  50.            {  
  51.                fieldLabel: '角色编号',  
  52.                name: 'ID',  
  53.                xtype:'hidden'  
  54.            },  
  55.            {  
  56.                //label名称   
  57.                fieldLabel: '角色名称',  
  58.                //textfield名称   
  59.                name: 'RoleName',  
  60.                //textfield正则   
  61.                allowBlank:false,//是否允许为空！false不允许   
  62.                blankText:"不允许为空",//提示信息   
  63.                minLength :2 ,   
  64.                minLengthText : "姓名最少2个字符",   
  65.                maxLength : 4 ,   
  66.                maxLengthText :"姓名至多4个字符",  
  67.                regex:/[/u4e00-/u9fa5]/,//正则表达式   
  68.                regexText:"只能为中文"  
  69.            },  
  70.            {  
  71.               fieldLabel: '角色编码',  
  72.               name: 'RoleCode',  
  73.               allowBlank:false,  
  74.               blankText:"不允许为空",  
  75.                xtype:'hidden'  
  76.            },  
  77.            {  
  78.             fieldLabel: '说明',  
  79.                name: 'Remark'  
  80.              
  81.            }  
  82.        ]  
  83.      
  84.    });  
  85.     //弹出层   
  86.   var Edit_Window = new Ext.Window({  
  87.        collapsible: true,  
  88.        maximizable: true,  
  89.        minWidth: 300,  
  90.        height :180 ,  
  91.        minHeight: 200,  
  92.        width:378,  
  93.        modal:true,  
  94.        closeAction:"hide",  
  95.        //所谓布局就是指容器组件中子元素的分布，排列组合方式   
  96.        layout: 'form',//layout布局方式为form   
  97.        plain: true,  
  98.        title:'编辑对话框',  
  99.        bodyStyle: 'padding:5px;',  
  100.        buttonAlign: 'center',  
  101.        items: Edit_Panel,  
  102.        buttons: [{  
  103.            text: '保存',  
  104.            //点击保存按钮后触发事件   
  105.            handler:function(){  
  106.            //得到编辑模板中id为ID的控件名称的值   
  107.            var ID=Edit_Panel.getForm().findField('ID').getValue();  
  108.              //得到编辑模板中id为RoleName的控件名称的值   
  109.            var RoleName=Edit_Panel.getForm().findField('RoleName').getValue();  
  110.            //var RoleCode=Edit_Panel.getForm().findField('RoleCode').getValue();   
  111.            var Remark=Edit_Panel.getForm().findField('Remark').getValue();  
  112.            var jsonData='';  
  113.            if(ID=='')  
  114.            //如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色名称(RoleName),角色编码(RoleCode),说明(Remark),操作类型(添加操作:AddUser,更新操作:UpdateUser)写成json的形式作为参数传到后台   
  115.           jsonData= {operatype:'AddRole',ID:ID,RoleName:RoleName,Remark:Remark};  
  116.            else  
  117.           jsonData= {operatype:'UpdateRole',ID:ID,RoleName:RoleName,Remark:Remark};  
  118.            Edit_Window.hide();  
  119.            CodeOperaMethod('http://www.cnblogs.com/WebUI/RoleManage/RoleManege.aspx',jsonData);  
  120.            //重新加载store信息   
  121.            store.reload();  
  122.            grid.store.reload();  
  123.            }  
  124.        },{  
  125.            text: '重置',  handler:function(){Edit_Panel.getForm().reset();}  
  126.        }]  
  127.    });  
  128.           //后台数据交互方法   
  129.       var CodeOperaMethod=function(u,p){  
  130.       var conn=new Ext.data.Connection();  
  131.       conn.request({  
  132.       //请求的 Url   
  133.       url:u,  
  134.       // 传递的参数   
  135.       params:p,  
  136.       method:'post',  
  137.       scope:this,  
  138.       //回调函数，根据执行结果作不同的操作，如果成功提示操作成功的信息，如果失败提示失败的信息   
  139.       callback:function(options,success,response){  
  140.       if(success){ Ext.MessageBox.alert("提示","操作成功！");  
  141.       store.reload();  
  142.       grid.store.reload();  
  143.       }  
  144.       else{ Ext.MessageBox.alert("提示","所提交的操作失败！");}  
  145.         
  146.       }});};  
  147.         
  148.         //删除方法   
  149.    function delRecord(btn,pressed)  
  150.    {  
  151.     //获取ID为MenuGridPanel的控件名称得到当前选中项   
  152.     rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
  153.            if(rows.length==0)  
  154.            {  
  155.            Ext.Msg.alert("","请至少选择一行你要删除的数据！");  
  156.            return;  
  157.            }  
  158.     Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);}  
  159.        function showResult(btn)  
  160.        {  
  161.         //确定要删除你选定项的信息   
  162.        if(btn=='yes')  
  163.        {  
  164.            var row=Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
  165.            var jsonData="";  
  166.            for(var i=0,len=row.length;i<len;i++)  
  167.            {  
  168.            //得到当前选中项的ID集合   
  169.            var ss =row[i].get("ID");  
  170.             if(i==0)  
  171.             jsonData = jsonData + ss;   
  172.             else  
  173.             jsonData = jsonData + ","+ ss;   
  174.         }  
  175.         //将要删除的信息传递到后台处理,然后重新加载grid   
  176.         var conn = new Ext.data.Connection();  
  177.         conn.request({  
  178.         url:"http://www.cnblogs.com/WebUI/RoleManage/RoleManege.aspx?DelRecode=",   
  179.         params:{strProjects:jsonData},  
  180.         method: 'post',  
  181.         scope: this,  
  182.         callback:function(options,success, response){   
  183.         if(success){   
  184.         Ext.MessageBox.alert("提示","所选记录成功删除！");  
  185.         store.reload();  
  186.         grid.store.reload();  
  187.         }   
  188.         else   
  189.         { Ext.MessageBox.alert("提示","所选记录删除失败！");}   
  190.         }   
  191.         })  
  192.           
  193.         }  
  194.         };   
  195.       //定义一个智能感应的ComboBox   
  196.       var cmbox=new Ext.form.ComboBox  
  197.       (  
  198.       {  
  199.         id:'cmbox',  
  200.         title:'角色名称',  
  201.         //加载数据源   
  202.         store:store,  
  203.         //从本地加载数据（智能感应效果）   
  204.         mode:"local",  
  205.         //显示字段类似DropDownlist中的DataTextField    
  206.         displayField:'RoleName',  
  207.         //类似DropDownlist中的DataValueField     
  208.         valueField:'ID',  
  209.         width:160,  
  210.         //不允许为空   
  211.         allowBlank:false,  
  212.         //默认值   
  213.     emptyText:'请输入角色名称进行搜索...',  
  214.     //当为空的时候提示   
  215.     blankText:'请输入角色名称...'  
  216.       }  
  217.       );  
  218.       //构建GridPanel   
  219.        var grid = new Ext.grid.GridPanel  
  220.        ({  
  221.            id:'MenuGridPanel',  
  222.            renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域   
  223.            title: '角色管理',//网格标题   
  224.            width:'100%',  
  225.            height: 500,  
  226.            store: store,//grid数据源   
  227.            loadMask: {msg:'加载数据中,请等待......'},//显示等待数据加载（loading）图标   
  228.            cm:cms,//列名称   
  229.            sm: new Ext.grid.CheckboxSelectionModel(),//要显示多选框列必加此项   
  230.            //定义一个toolbar   
  231.            tbar:  
  232.            [              
  233.        {  
  234.        text:"编辑",  
  235.           cls: 'x-btn-text-icon details',  
  236.           icon:"../ext-3.1.0/blue16_042.png",  
  237.           handler:function()  
  238.           {  
  239.            //重置编辑模板   
  240.           Edit_Panel.getForm().reset();  
  241.           rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
  242.        if(rows.length!=1)  
  243.        {  
  244.        Ext.Msg.alert("","请你选择一行数据进行操作！");  
  245.        return;  
  246.        }  
  247.        //打开窗体   
  248.         Edit_Window.show();  
  249.         //将选中项的信息绑定到TextField中   
  250.         Edit_Panel.getForm().findField('ID').setValue(rows[0].get('ID'));  
  251.            //Edit_Panel.getForm().findField('RoleCode').setValue(rows[0].get('RoleCode'));   
  252.            Edit_Panel.getForm().findField('RoleName').setValue(rows[0].get('RoleName'));  
  253.            Edit_Panel.getForm().findField('Remark').setValue(rows[0].get('Remark'));  
  254.              
  255.        }  
  256.        },   
  257.        {  
  258.        text:"添加",  
  259.         cls: 'x-btn-text-icon details',  
  260.         icon:"../ext-3.1.0/add_16.png",  
  261.         handler:function()  
  262.           {  
  263.           Edit_Panel.getForm().reset();  
  264.           Edit_Window.show();  
  265.           }  
  266.           },   
  267.        {  
  268.        text:"删除",  
  269.            cls: 'x-btn-text-icon details',  
  270.             icon:"../ext-3.1.0/blue16_016.png",  
  271.            handler:delRecord  
  272.            },'-',  
  273.              
  274.            //定义一个搜索框   
  275.            cmbox,  
  276.              '-',  
  277.            {  
  278.              
  279.        xtype:'button',  
  280.         cls: 'x-btn-text-icon details',  
  281.           icon:"../ext-3.1.0/blue16_068.png",  
  282.        text:"查找",  
  283.        handler:function()  
  284.        {  
  285.         //Ext.getCmp("searchfield").getValue()得到Textfield的值   
  286.         //过滤条件为角色名称(RoleName)来搜索匹配的信息,   
  287.         //filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,   
  288.         //第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写   
  289.         store.filter('RoleName',Ext.getCmp("cmbox").getValue(),false,false);  
  290.        }  
  291.        }  
  292.         
  293.           ],  
  294.            bbar: new Ext.PagingToolbar  
  295.            ({//自带分页工具条   
  296.                pageSize: 10,  
  297.                store: store,  
  298.                displayInfo: true,  
  299.                displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',  
  300.                emptyMsg: "没有数据"  
  301.            })  
  302.        });  
  303.        //从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10   
  304.        store.load({params:{start:0, limit:10}});  
  305.    });  
  306.   
  307.      
  308. / --></mce:script> 
posted @ 2012-01-05 17:52  子萧  阅读(391)  评论(0)    收藏  举报