Extjs4中grid的增删改操作

原创 2013年12月03日 13:34:22
Ext.define('JCY.app.controller.UserController',{
	extend:'Ext.app.Controller',
	alias:'widget.userController',
	init:function(){
		this.control({
			'gridView':{beforerender:this.beforerender}
		});
	},
	beforerender:function(comment,obj){
		var store = comment.getStore();//得到grid的store
		var selModel = comment.getSelectionModel();//得到选择的model
		/**
		 * 添加
		 */
		comment.down('button[id=add]').on('click',function(){
			var addUser=Ext.create('JCY.app.view.AddUserForm').show();
			var form=addUser.down('form');//获取表单
			var model=store.model;//获取model
			form.down('button').on('click',function(){
				form.submit({
					url:'/Extjs4/gridAction!saveUser.action',
					method:'post',
					success:function(form,action)
					{
						var num=form.findField('num').getValue();//获取表单里面的值
						var name=form.findField('name').getValue();
						var email=form.findField('email').getValue();
//						var data=action.response.responseText;
//						var json=eval("("+data+")");
						addUser.close();
						var m=new model(
								{num:num,name:name,email:email});
						store.add(m);//默认加在后面
					}
				});
			});
				
		});
		/**
		 * 修改
		 * 要先获取model, 再新建带数据的这个model
		 * 
		 */
		comment.down('button[id=edit]').on('click',function(){
			var record=selModel.getSelection();//得到选择的数据
			if(record.length==1)
			{
				var editUser=Ext.create('JCY.app.view.AddUserForm');
				editUser.setTitle('修改用户信息');
				editUser.setIconCls('table_edit');
				editUser.down('form').loadRecord(record[0]);//装载信息
				var text=editUser.down('form').down('textfield');
				text.readOnly=true;
				editUser.show();
				var form=editUser.down('form');
				editUser.down('button').on('click',function(){
					form.submit({
						url:'/Extjs4/gridAction!editUser.action',
						method:'post',
						success:function(form,action){
							var num=form.findField('num').getValue();//获取表单里面的值
							var name=form.findField('name').getValue();
							var email=form.findField('email').getValue();
							editUser.close();
							var model=store.model;//获取model
							var m=new model(
									{num:num,name:name,email:email});
							store.add(m);//默认加在后面
//							store.insert(0,m);//第一个是插入的位置
						}
					});
				});
			}
			else
			{
				Ext.Msg.alert("提示", "请选择一条数据!").setIcon("ext-mb-info");
			}
		});
		/**
		 * 删除
		 */
		comment.down('button[id=del]').on('click',function(){
			if(selModel.hasSelection())
			{
				var selected=selModel.getSelection();
				var ids=[];
				Ext.each(selected,function(item){
					ids.push(item.data['num']);
//					alert(item.get('num'));
				});
				Ext.Msg.confirm('提示','你确定要删除吗',function(b){
					if(b='yes')
					{
						Ext.Ajax.request({
							url:'/Extjs4/gridAction!delUser.action',
							params:{ids:ids},
							method:'post',
							success:function(response){
								Ext.Array.each(selected,function(record){
									store.remove(record);//删除grid中的数据
								});
							}
						});
					}
					
				});
			}
			else {
			Ext.Msg.alert("提示", "你还没有选择要修改的数据!").setIcon(
					"ext-mb-info").setWidth(200);
			}
		});
	},
	models:['JCY.app.model.GridModel'],
	stores:['JCY.app.store.GridStore'],
	views:['JCY.app.view.GridView','JCY.app.view.GridView2','JCY.app.view.AddUserForm']
});

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Extjs4的grid列中加上操作的按钮,点击没有选择该行的处理方法

在grid设置中,如果按照以下代码来编写:

ExtJS4+Struts2.1的Grid 增删改查

  • 2014年05月29日 00:02
  • 17.25MB
  • 下载

extjs 之Ext.data.Store[Grid]操作 【增删修改】

Ext.data.Store是extjs的数据结构。 主要用于extjs的grid和combobox等控件的数据加载和操作。实际上对grid的增删改可以通过对store的操作来控制. 1、增加提交...

extjs 之Ext.data.Store[Grid]操作(增删)

Ext.data.Store是extjs的数据结构。主要用于extjs的grid和combobox等控件的数据加载和操作。实际上对grid的增删改可以通过对store的操作来控制.例子:对grid的增...
  • linkyou
  • linkyou
  • 2011年07月05日 18:57
  • 4300

extjs_04_grid(弹出框&行编辑器 增删改数据)

extjs_03_grid(弹出框&行编辑器 增删改数据) 增加,删除表格记录(弹窗口,适用于表字段比较多); 增加,删除表格记录(行编辑器,适合修改字段少)...
  • adam_zs
  • adam_zs
  • 2014年06月24日 00:10
  • 2241

Extjs 4.2 Grid增删改及后台交互(Java)

代码Example如下: 定义Model Ext.define('Person', {     extend: 'Ext.data.Model',     fields: [{name...
  • zgyhh
  • zgyhh
  • 2013年09月10日 17:02
  • 1191

Extjs Grid 操作大全

  • 2011年04月11日 23:59
  • 16KB
  • 下载

Extjs4 Grid Row 事件

  • 2012年11月12日 12:13
  • 34KB
  • 下载

ExtJS4学习笔记(八)---Grid多选/全选

ExtJS4学习笔记(八)---Grid多选/全选 标签: extjsurlfunctionquery测试json 2011-08-02 16:45 2057人阅读 评论(0) 收藏 举报...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs4中grid的增删改操作
举报原因:
原因补充:

(最多只允许输入30个字)