ExtJs中一个完整GridPanel实例(转)

博客地址http://blog.csdn.net/ws_hgo/archive/2010/08/26/5839449.aspx

最后效果如图：

<script type="text/javascript">
   Ext.onReady(function(){
        //初始化Extjs
        Ext.QuickTips.init();
        //从本地加载图片,如果不定义默认从Exj官方网站加载
        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: '../../BackGround/RoleManage/Role.ashx?AutoLoad=true'      
            })
        });
        //定义GridPanel的列名称
       var cms=new Ext.grid.ColumnModel
       (
       [
        new Ext.grid.RowNumberer({header:"编号",width: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',
        width: 380,
        defaults: {width: 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,
        width: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('../../WebUI/RoleManage/RoleManege.aspx',jsonData);
            //重新加载store信息
            store.reload();
            grid.store.reload();
            }
        },{
            text: '重置',  handler:function(){Edit_Panel.getForm().reset();}
        }]
    });
  

    </script>

  //后台数据交互方法

       var CodeOperaMethod=function(u,p){
       var conn=new Ext.data.Connection();
       conn.request({
       //请求的 Url
       url: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({
         url:"../../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',
         width:160,
         //不允许为空
         allowBlank:false,
         //默认值
        emptyText:'请输入角色名称进行搜索...',
        //当为空的时候提示
        blankText:'请输入角色名称...'
       }
       );
       //构建GridPanel
        var grid = new Ext.grid.GridPanel
        ({
            id:'MenuGridPanel',
            renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域
            title: '角色管理',//网格标题
            width:'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}});
    });