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

ExtJs中一个完整GridPanel实例(转)
博客地址http://blog.csdn.net/ws_hgo/archive/2010/08/26/5839449.aspx
最后效果如图：
       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&lt;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}]&lt;/span&gt;条至第[{1}]条数据，共[{2}]条数据',                emptyMsg: "没有数据"            })        });        //从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10        store.load({params:{start:0, limit:10}});    });
? 1 楼 youngxu 2011-03-28 博主很强啊。是.NET和JAVA双栖。 2 楼 Baby果冻 2011-03-28 youngxu 写道博主很强啊。是.NET和JAVA双栖。
何以见得呀？.net不是特别懂，但语言的很多地方是通的，我也是借鉴过来解决我的问题，嘻嘻~~还要请大家多帮帮我这个新手！
ExtJs中一个完整GridPanel范例(转)

热点推荐
