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<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}}); });? 1 楼 youngxu 2011-03-28 博主很强啊。是.NET和JAVA双栖。 2 楼 Baby果冻 2011-03-28 youngxu 写道博主很强啊。是.NET和JAVA双栖。