日期:2014-05-16 浏览次数:20416 次
接着是用户管理.不过,这里的Ext代码还没有用到面向对象的思想,
因为看论坛里有朋友说不喜欢看完整一大堆代码,所以我这里只贴一部分,如果有朋友需要完整的请下载附件,
我自己也还在学习阶段,如果朋友有好的建议请留留言,谢谢!!
?
前台部分代码:
?
一个grid是必要的
var grid = new Ext.grid.GridPanel({ loadMask:{msg:'正在加载数据,请稍后'},//加载时显示的信息 store:store,//加载名为store的数据集 columns:[//要显示的列 new Ext.grid.RowNumberer,//获得行号 {header:'ID',dataIndex:'userid',sortable:true}, {header:'用户名',dataIndex:'username'}//dataIndex对应store的fields中的字段 ], bbar:new Ext.PagingToolbar({//定义分页工具栏 store:store,//同样要指定对哪个store进行分页 pageSize:5,//每页数据数 displayInfo:true,//true时显示displayMsg,emptyMsg等提示信息 displayMsg:'第{0}条到{1}条,一共{2}条', emptyMsg:'没有记录' }), tbar:[{ text:"新增用户", handler:addUser },"-",{//"-"到页面显示成"|"分隔符状 }] });
?这个grid加载的store我在外面定义,在grid中定义也行的
var store = new Ext.data.JsonStore({ reader:new Ext.data.JsonReader(),//用于将一个json对象转换为元数据对象 autoLoad:{params:{start:0,limit:5}},//如果有值传入,那么store的load会自动调用,加载时会将params中的属性发送到后台 root:'result',//指定包含所有行对象的数组名 totalProperty:'totalProperty',//总记录数 proxy:new Ext.data.HttpProxy({ //用访问数据对象,用于访问某个url的 url:'admin!queryAllUser.action' }), fields:["userid","username","password","sex","age"]//从后台接受的字段 });?
新增用户和更新用户代码差不多,我就说更新用户的,但是radiogroup加载不到,我在网上暂时找不到合适的解决方法,如果有朋友知道麻烦留言指点一下
?
?
function updateUser(){ var record = grid.getSelectionModel().getSelected();//获得当前选中的行的全部数据 if(!record){//说明没选中任何一行 Ext.Msg.alert("提示","请选择一条记录"); } if(!win){//如果win存在,就不用创建,配合closeAction使用 var win = new Ext.Window({ closeAction:"hide",//表示关闭窗口时将窗口隐藏,因为新建一个窗口将消耗不小的资源,速度也慢 items:[{ xtype:"form",//定义window中有一个form组件,用于提交数据 method:"post", items:[{ xtype:"panel", layout:"column", labelWidth:50, border:false, items:[{ xtype:"panel", layout:"form", border:false, items:[{ xtype:"hidden",//不允许 name:"userid" },{ xtype:"textfield", fieldLabel:"用户名", name:"username" }] },{ xtype:"panel", layout:"form", border:false, items:[{ xtype:"textfield", fieldLabel:"密码", name:"password", inputType:"password" }] }] },{ xtype:"panel", border:false, layout:"form", items:[{ xtype:"radiogroup", fieldLabel : "类型", columns:1, //三个空心圆排成一竖列 items : [{ name : "sex", inputValue : "男", //选中后sex的值是"男" boxLabel : "男" },{ name : "sex", inputValue : "女", boxLabel : "女" },{ name : "sex", inputValue : "未知", boxLabel : "未知" },] },{ xtype:"panel", layout:"form", border:false, items:[{ xtype:"numberfield", fieldLabel:"年龄", name:"age" }] }] }] }] , buttons:[{ text:"保存", handler:function(){ win.getComponent(0).getForm().submit({//getComponent(0)表示获得win的第一个组件,即form,再调用getForm()方法获得basicform对象,操作表单数据都要通过这个对象 url:"admin!updateUser.action", success:function(){ Ext.Msg.alert("提示","更新用户成功"); win.close(); store.reload(); } }); } },{ text:"重置", handler:function(){ win.getComponent(0).getForm().reset(); } },{ text:"取消", handler:function(){ win.close(); } }] }); win.getComponent(0).getForm().loadRecord(record);//加载这一行的数据,但是radiogroup加载不到,我在网上暂时找不到合适的解决方法,如果有朋友知道麻烦留言指点一下 win.show(); } }
?最后还有删除用户:
?部分代码如下
function deleteUser(){ var record = //同上 ? Ext.Msg.confirm("提示","是否确定删除?",function(b){//参数是响应的值 if(b == "yes"){ var userId = record.get("userid");//record获得方法同上,get方法