ExtJs GridPanel 完整实例

页面效果如下

  

view plaincopy to clipboardprint?
<mce:script type="text/javascript"><!--  
  Ext.onReady(function(){  
       //初始化Extjs  
       Ext.QuickTips.init();  
       Ext.BLANK_IMAGE_URL ='./resources/images/default/s.gif';  
       //首先读取数据，Json格式  
       var store = new Ext.data.Store  
       ({        
           //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)  
           reader:new Ext.data.JsonReader  
           ({  
           root:"Table",  
           //从数据库中读取的总记录数  
           totalProperty: 'totalCount',  
           //要读取出来的字段  
           fields:  
           [  
               'ID','RoleName','Remark' 
           ]  
           }),     
           //获取数据源(该方法返回一个json格式的数据源)  
           proxy: new Ext.data.HttpProxy  
           ({  
               url: 'http://www.cnblogs.com/BackGround/RoleManage/Role.ashx?AutoLoad=true'        
           })  
       });  
       //定义GridPanel的列名称  
      var cms=new Ext.grid.ColumnModel  
      (  
      [  
       new Ext.grid.RowNumberer({header:"编号",30,align:"center"}),//添加一个编号  
       new Ext.grid.CheckboxSelectionModel(),//增加 CheckBox多选框列  
       //header列名称，dateIndex对应数据库字段名称,sortable支持排序  
       {header:"角色名称",dataIndex:"RoleName",sortable:true},  
       {header:"角色备注",dataIndex:"Remark",sortable:true}  
          
      ]  
      );  
     //编辑panel，用于添加，修改  
     var Edit_Panel=new Ext.FormPanel({      
       labelWidth: 75,   
       labelAlign:'right',  
       frame:true,        
       bodyStyle:'padding:5px 5px 0',  
       380,  
       defaults: { 150},  
       defaultType: 'textfield',  
       items:   
       [  
           {  
               fieldLabel: '角色编号',  
               name: 'ID',  
               xtype:'hidden' 
           },  
           {  
               //label名称  
               fieldLabel: '角色名称',  
               //textfield名称  
               name: 'RoleName',  
               //textfield正则  
               allowBlank:false,//是否允许为空！false不允许  
               blankText:"不允许为空",//提示信息  
               minLength :2 ,   
               minLengthText : "姓名最少2个字符",   
               maxLength : 4 ,   
               maxLengthText :"姓名至多4个字符",  
               regex:/[\u4e00-\u9fa5]/,//正则表达式  
               regexText:"只能为中文" 
           },  
           {  
              fieldLabel: '角色编码',  
              name: 'RoleCode',  
              allowBlank:false,  
              blankText:"不允许为空",  
               xtype:'hidden' 
           },  
           {  
            fieldLabel: '说明',  
               name: 'Remark' 
             
           }  
       ]  
     
   });  
    //弹出层  
  var Edit_Window = new Ext.Window({  
       collapsible: true,  
       maximizable: true,  
       minWidth: 300,  
       height :180 ,  
       minHeight: 200,  
       378,  
       modal:true,  
       closeAction:"hide",  
       //所谓布局就是指容器组件中子元素的分布，排列组合方式  
       layout: 'form',//layout布局方式为form  
       plain: true,  
       title:'编辑对话框',  
       bodyStyle: 'padding:5px;',  
       buttonAlign: 'center',  
       items: Edit_Panel,  
       buttons: [{  
           text: '保存',  
           //点击保存按钮后触发事件  
           handler:function(){  
           //得到编辑模板中id为ID的控件名称的值  
           var ID=Edit_Panel.getForm().findField('ID').getValue();  
             //得到编辑模板中id为RoleName的控件名称的值  
           var RoleName=Edit_Panel.getForm().findField('RoleName').getValue();  
           //var RoleCode=Edit_Panel.getForm().findField('RoleCode').getValue();  
           var Remark=Edit_Panel.getForm().findField('Remark').getValue();  
           var jsonData='';  
           if(ID=='')  
           //如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色名称(RoleName),角色编码(RoleCode),说明(Remark),操作类型(添加操作:AddUser,更新操作:UpdateUser)写成json的形式作为参数传到后台  
          jsonData= {operatype:'AddRole',ID:ID,RoleName:RoleName,Remark:Remark};  
           else 
          jsonData= {operatype:'UpdateRole',ID:ID,RoleName:RoleName,Remark:Remark};  
           Edit_Window.hide();  
           CodeOperaMethod('http://www.cnblogs.com/WebUI/RoleManage/RoleManege.aspx',jsonData);  
           //重新加载store信息  
           store.reload();  
           grid.store.reload();  
           }  
       },{  
           text: '重置',  handler:function(){Edit_Panel.getForm().reset();}  
       }]  
   });  
          //后台数据交互方法  
      var CodeOperaMethod=function(u,p){  
      var conn=new Ext.data.Connection();  
      conn.request({  
      //请求的 Url  
      http://www.cnblogs.com/hannover/admin/u,  
      // 传递的参数  
      params:p,  
      method:'post',  
      scope:this,  
      //回调函数，根据执行结果作不同的操作，如果成功提示操作成功的信息，如果失败提示失败的信息  
      callback:function(options,success,response){  
      if(success){ Ext.MessageBox.alert("提示","操作成功！");  
      store.reload();  
      grid.store.reload();  
      }  
      else{ Ext.MessageBox.alert("提示","所提交的操作失败！");}  
        
      }});};  
        
        //删除方法  
   function delRecord(btn,pressed)  
   {  
    //获取ID为MenuGridPanel的控件名称得到当前选中项  
    rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
           if(rows.length==0)  
           {  
           Ext.Msg.alert("","请至少选择一行你要删除的数据！");  
           return;  
           }  
    Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);}  
       function showResult(btn)  
       {  
        //确定要删除你选定项的信息  
       if(btn=='yes')  
       {  
           var row=Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
           var jsonData="";  
           for(var i=0,len=row.length;i<len;i++)  
           {  
           //得到当前选中项的ID集合  
           var ss =row[i].get("ID");  
            if(i==0)  
            jsonData = jsonData + ss;   
            else 
            jsonData = jsonData + ","+ ss;   
        }  
        //将要删除的信息传递到后台处理,然后重新加载grid  
        var conn = new Ext.data.Connection();  
        conn.request({  
        http://www.cnblogs.com/hannover/admin/WebUI/RoleManage/RoleManege.aspx?DelRecode=",   
        params:{strProjects:jsonData},  
        method: 'post',  
        scope: this,  
        callback:function(options,success, response){   
        if(success){   
        Ext.MessageBox.alert("提示","所选记录成功删除！");  
        store.reload();  
        grid.store.reload();  
        }   
        else   
        { Ext.MessageBox.alert("提示","所选记录删除失败！");}   
        }   
        })  
          
        }  
        };   
      //定义一个智能感应的ComboBox  
      var cmbox=new Ext.form.ComboBox  
      (  
      {  
        id:'cmbox',  
        title:'角色名称',  
        //加载数据源  
        store:store,  
        //从本地加载数据（智能感应效果）  
        mode:"local",  
        //显示字段类似DropDownlist中的DataTextField   
        displayField:'RoleName',  
        //类似DropDownlist中的DataValueField    
        valueField:'ID',  
        160,  
        //不允许为空  
        allowBlank:false,  
        //默认值  
    emptyText:'请输入角色名称进行搜索...',  
    //当为空的时候提示  
    blankText:'请输入角色名称...' 
      }  
      );  
      //构建GridPanel  
       var grid = new Ext.grid.GridPanel  
       ({  
           id:'MenuGridPanel',  
           renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域  
           title: '角色管理',//网格标题  
           '100%',  
           height: 500,  
           store: store,//grid数据源  
           loadMask: {msg:'加载数据中,请等待......'},//显示等待数据加载（loading）图标  
           cm:cms,//列名称  
           sm: new Ext.grid.CheckboxSelectionModel(),//要显示多选框列必加此项  
           //定义一个toolbar  
           tbar:  
           [              
       {  
       text:"编辑",  
          cls: 'x-btn-text-icon details',  
          icon:"../ext-3.1.0/blue16_042.png",  
          handler:function()  
          {  
           //重置编辑模板  
          Edit_Panel.getForm().reset();  
          rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();  
       if(rows.length!=1)  
       {  
       Ext.Msg.alert("","请你选择一行数据进行操作！");  
       return;  
       }  
       //打开窗体  
        Edit_Window.show();  
        //将选中项的信息绑定到TextField中  
        Edit_Panel.getForm().findField('ID').setValue(rows[0].get('ID'));  
           //Edit_Panel.getForm().findField('RoleCode').setValue(rows[0].get('RoleCode'));  
           Edit_Panel.getForm().findField('RoleName').setValue(rows[0].get('RoleName'));  
           Edit_Panel.getForm().findField('Remark').setValue(rows[0].get('Remark'));  
             
       }  
       },   
       {  
       text:"添加",  
        cls: 'x-btn-text-icon details',  
        icon:"../ext-3.1.0/add_16.png",  
        handler:function()  
          {  
          Edit_Panel.getForm().reset();  
          Edit_Window.show();  
          }  
          },   
       {  
       text:"删除",  
           cls: 'x-btn-text-icon details',  
            icon:"../ext-3.1.0/blue16_016.png",  
           handler:delRecord  
           },'-',  
             
           //定义一个搜索框  
           cmbox,  
             '-',  
           {  
             
       xtype:'button',  
        cls: 'x-btn-text-icon details',  
          icon:"../ext-3.1.0/blue16_068.png",  
       text:"查找",  
       handler:function()  
       {  
        //Ext.getCmp("searchfield").getValue()得到Textfield的值  
        //过滤条件为角色名称(RoleName)来搜索匹配的信息,  
        //filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,  
        //第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写  
        store.filter('RoleName',Ext.getCmp("cmbox").getValue(),false,false);  
       }  
       }  
        
          ],  
           bbar: new Ext.PagingToolbar  
           ({//自带分页工具条  
               pageSize: 10,  
               store: store,  
               displayInfo: true,  
               displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',  
               emptyMsg: "没有数据" 
           })  
       });  
       //从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10  
       store.load({params:{start:0, limit:10}});  
   });  
 
     
/ --></mce:script>