extjs4 增删节查grid

Ext.onReady(function(){
	Ext.QuickTips.init();
			Ext.define('Group', {
		       extend: 'Ext.data.Model',
		       fields: [
		           'groupId','name', 'contents'
		       ]
		    });
			var store_grid_group = Ext.create('Ext.data.Store', {
		        pageSize: 4,
		        model: 'Group',
		        remoteSort: true,
		        proxy: {
		            type:'ajax',
		            url:'../limits/listgroupbypage!listGroupByPage',
		            reader:{
						type:'json',
						root:'data',
						totalProperty: 'totalCount'
					},
		           simpleSortMode: true
		        },
		        autoLoad:true
		    });
		    
		    
		    var form = new Ext.FormPanel({
				layout: {
		            type: 'vbox',
		            align: 'stretch'
		        },
		        frame: true,
		        border: false,
		        url: '../limits/saveqx!addGroup',
		        buttonAlign:'center',
		        bodyPadding: 10,
		        defaultType: 'textfield',
		        fieldDefaults: {
		            labelAlign: 'left',
		            labelWidth: 100,
		            labelStyle: 'font-weight:bold'
		        },
		        //默认元素属性设置
		        items: [{
		            name: 'name',
		            fieldLabel: '权限组名称',
		            allowBlank: false
		        },{
		            xtype: 'textareafield',
		            name:'contens',
		            fieldLabel: '权限组描述',
		            margins: '0',
		            allowBlank: false
		       }],
		       buttons:[{
		       		text:'保存',
		       		handler:function(){
		       			if (this.up('form').getForm().isValid()) {
		                    form.submit({
			                    success: function(form, action) {
			                    	form.reset();
			                    	win.hide();
			                    	store_grid_group.load();
			                    },
			                    failure: function(form, action) {
			                        Ext.Msg.alert('Failed');
			                    }
		                	});
		                }
					}
		       },{
					text:'放弃',handler:function(){
						 this.up('form').getForm().reset();
		                 this.up('window').hide();
					}
		       }]
		     })
		     var form_edit = new Ext.FormPanel({
				layout: {
		            type: 'vbox',
		            align: 'stretch'
		        },
		        frame: true,
		        border: false,
		        url: '../limits/editgroup!updateGroup',
		        buttonAlign:'center',
		        bodyPadding: 10,
		        defaultType: 'textfield',
		        fieldDefaults: {
		            labelAlign: 'left',
		            labelWidth: 100,
		            labelStyle: 'font-weight:bold'
		        },
		        //默认元素属性设置
		        items: [{
		            name: 'groupId',
		            fieldLabel: '编号',
		            hidden: true
		        },{
		            name: 'name',
		            fieldLabel: '全选组名称',
		            allowBlank: false
		        },{
		            xtype: 'textareafield',
		            name:'contents',
		            fieldLabel: '权限组描述',
		            margins: '0',
		            allowBlank: false
		       }],
		       buttons:[{
		       		text:'修改',
		       		handler:function(){
		       			if (this.up('form').getForm().isValid()) {
		                    form_edit.submit({
			                    success: function(form, action) {
			                    	form.reset();
			                    	win_edit.hide();
			                    	store_grid_group.load();
			                    },
			                    failure: function(form, action) {
			                        Ext.Msg.alert('Failed');
			                    }
		                	});
		                }
					}
		       },{
					text:'放弃',handler:function(){
						 this.up('form').getForm().reset();
		                 this.up('window').hide();
					}
		       }]
		     })
		    var win = Ext.create('widget.window', {
		    	layout:'fit',
		        title: '添加',
		        closable: false,
		        closeAction: 'hide',
		        width: 400,
		        minWidth: 350,
		        height: 300,
		        modal: true,
		        items: form
		    });
		    var win_edit = Ext.create('widget.window', {
		    	layout:'fit',
		        title: '修改',
		        closable: false,
		        closeAction: 'hide',
		        width: 400,
		        minWidth: 350,
		        height: 300,
		        modal: true,
		        items: form_edit
		    });
		    //添加功能
		    var add=function(data){
				win.show();
			}
			//删除功能
			var del=function(o){
				var grid=o.ownerCt.ownerCt;
				var data=grid.getSelectionModel().getSelection();
				if(data.length==0){
					Ext.Msg.alert('提示','至少选一条');
				}else{
					Ext.MessageBox.confirm('确认', '确定要删除吗？',function(btn){
						if(btn=='yes'){
							var st=grid.getStore();
							var ids=[];
							Ext.Array.each(data,function(record){
								ids.push(record.get('groupId'));
							});
							//传给后台
							Ext.Ajax.request({
								url:'../limits/delgroup!delGroup',
								params:{ids:ids.join(',')},
								method:'post',
								timeout:2000,
								success:function(){
									st.remove(data);//删除选中的行
								},
								failure:function(){
									Ext.MessageBox.alert("失败");
								}
							});
						}
					});	
				}
			}
			//修改功能
			var edit=function(o){
				var grid=o.ownerCt.ownerCt;
				var data=grid.getSelectionModel().getSelection();
				if(data.length!=1){
					Ext.Msg.alert('提示','请选择一条记录');
				}else{
					var st=grid.getStore();
					var ids=[];
					Ext.Array.each(data,function(record){
						ids.push(record.get('groupId'));
					});
					//form ajax加载数据
					form_edit.getForm().load({
						url:'../limits/getupdategroup!getUpdateGroup',
						params:{ids:ids.join(',')},
						method:'GET',
						timeout:2000,
						success:function(data){
							win_edit.show();
						},
						failure:function(){
							Ext.MessageBox.alert("失败");
						}
					})
				}
			}
		
			var query=function(o){
				var grid=o.ownerCt.ownerCt;
				
			}	
			var columns=[
					{header:'权限组名称',dataIndex:'name'},
					{text:'权限组描述',dataIndex:'contents',width:100},
					
					{
			            xtype:'actioncolumn',
			            items: [{
			            	text:'权限',
			                icon:'../commons/img/btn_qx.png',
			                tooltip: '权限',
			                handler: function(grid, rowIndex, colIndex) {
			                    var rec = grid.getStore().getAt(rowIndex);
			                    alert("Edit " + rec.get('groupId'));
			                }
			            }]
			        }

					
				];
			// create the Grid
		    var grid_group = Ext.create('Ext.grid.Panel',{
				width:'100%',		
				region:"center",
				forceFit:true,//true自动填充空白处，即宽度占满column的width会失效，默认false
				columns:columns,
				tbar:[
					{xtype:'button',text:'添加',iconCls:'btn_new',handler:add},
					{xtype:'button',text:'编辑',id:'btn_edit',iconCls:'btn_edit',handler:edit},
					{xtype:'button',text:'删除',id:'btn_delete',iconCls:'btn_del',handler:del}
				],
				dockedItems:[{
					xtype:'pagingtoolbar',
					store:store_grid_group,//用于分页栏显示总条数，页数等信息
					dock:'bottom',
					displayInfo:true
				}],
				selType:'checkboxmodel',//添加复选框
				multiSelect:true,//多选，默认单选
				store:store_grid_group
		    });
		    var queryForm = new Ext.FormPanel({
		    	border:false,
		    	layout:'hbox',
				height:10,    	
		    	flex:1,//如果所在容器时vbox占满高，如果是hbox占满宽
		    	height:35,
		    	frame:true,
		    	border:false,
		    	items:[{
		    		xtype:'textfield'
		    	},{
		    		text:'查询',handler:function(){alert('查询')},
		    		xtype:'button'
		    	}]
		    });
		    var vpanel=Ext.create('Ext.Panel', {
		    	region:'north',	
		    	height:60,
			    layout: {
			        type: 'vbox',
			        align: 'left'
			    },
			    items: [{html:'当前位置',border:false,id:'path',height:28},queryForm]
			});
			var vp=new Ext.Viewport({
				layout:"border",
				items:[vpanel,grid_group]
			});
		})