GridPanel增删改查

项目中最常用的就是GridPanel,现有一个简单样例，但是有个bug在左边树菜单收缩

时gridpanel不能自己的伸缩。代码如下

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'qtip';
	Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';//本地加载图片

////////////////////////////////////////////////////////////////////////
	/**树种选择相关数据-begin*/
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	    //顶端工具栏
		/**树种选择store*/
		var jixian_linmu_swfc_store = new Ext.data.JsonStore({
					url : '',/**请求用户数据库*/
					totalProperty : 'totalProperty',
					root : 'jxlm_csfc',
					fields : [/**用到的json域*/
							{
								name:'carbon_level_id'
							},
							{
								name:'lfpjmjxjl'
							},{
								name:'swl_cs_a'
							},{
								name:'swl_cs_b'
							},{
								name:'swl_cs_c'
							},{
								name:'ds_dx_rate'
							},{
								name:'carbon_i_area'
							},{
								name:'year_after_pro'
							}]
		});
		/**工具栏*/
		var topBar = new Ext.Toolbar([
			{
			text : '添加碳层参数',
			tooltip : '添加树种参数',
			iconCls : 'addnews',
			scope : this,
			handler : function() {
				
			var add_top = new Ext.FormPanel({
							url : '',	/**增加树种参数提交数据URL*/
							labelAlign : 'right',
							frame : true,
							title : '添加碳层参数',
							bodyStyle : 'padding:5px 5px 0',
							items : [
									{
										xtype : 'textfield',
										fieldLabel : '林分平均单位面积蓄积量',
										allowBlank : false,
										name : 'lfpjmjxjl',
										width:250
									},
									{
										xtype : 'textfield',
										fieldLabel : '生物量参数a',
										allowBlank : false,
										name : 'swl_cs_a',
										width:180
									},{
										xtype:'textfield',
										fieldLabel : '生物量参数b',
										allowBlank : false,
										name:'swl_cs_b',
										width:180
									},{
										xtype:'textfield',
										fieldLabel : '生物量参数c',
										allowBlank : false,
										width:180,
										namne:'swl_cs_c'
									},{
										xtype:'textfield',
										fieldLabel:'树种林木地下/地上生物量比',
										allowBlank : false,
										width:180,
										namne:'ds_dx_rate'
									},{
										xtype:'textfield',
										fieldLabel:'基线碳层面积',
										allowBlank : false,
										width:250,
										namne:'carbon_i_area'
									},{
										xtype:'textfield',
										fieldLabel:'项目开始后的年数',
										allowBlank : false,
										width:250,
										namne:'year_after_pro'
									}
									],
							buttons : [{
								text : '提交',
								formBind : true,
								handler : function() {
									add_top.getForm().submit({
										method : 'POST',
										waitTitle : '连接',
										waitMsg : '消息发送中...',
										success : function() {
											Ext.Msg.alert('状态', '提交成功!',
													function(btn, text) {
														if (btn == 'ok') {
															jixian_linmu_swfc_store.removeAll();
															jixian_linmu_swfc_store.reload();
															treewind.destroy();
														}
													});
										},
										failure : function(form, action) {
											Ext.Msg.alert('状态', '添加碳层参数添加失败!');
											add_top.getForm().reset();
										}
									});
								}//end_handler
							}, {
								text : '取消',
								handler : function() {
									tree_papameter_wind.destroy();
								}
							}]
						});
			/**弹出窗口*/
			var tree_papameter_wind = new Ext.Window({
							id : 'treewind',
							height: 450,
							width: 450,
							closable : true,
							resizable : false,
							plain : true,
							border : false,
							monitorValid : true,
							modal : true,
							autoScroll:'true',
							items : [add_top]
						});
				tree_papameter_wind.show();
			}
		}//
		, '-', {
			text : '修改碳层参数',
			tooltip : '修改碳层参数',
			iconCls : 'deletenews',
			scope : this,
			handler : function() {
				var selectlog = grid.getSelectionModel().getSelected();
				if (null == selectlog) {
					Ext.MessageBox.alert('状态', '你没有选择要修改的碳层!');
				} else {
					var id = selectlog.get('carbon_level_id');	 /**获取选择的树种id*/
					var name = selectlog.get('carbon_level_id');/**获取选择的名称*/
					var top = new Ext.FormPanel({
								url : 'exam_editPaperName.action?id=' + id,
								labelAlign : 'right',
								frame : true,
								title : '修改碳层参数',
								bodyStyle : 'padding:5px 5px 0',
								autoWidth:true,
								items : [
									{
										xtype : 'textfield',
										fieldLabel : '林分平均单位面积蓄积量',
										allowBlank : false,
										name : 'lfpjmjxjl',
										width:250
									},
									{
										xtype : 'textfield',
										fieldLabel : '生物量参数a',
										allowBlank : false,
										name : 'swl_cs_a',
										width:180
									},{
										xtype:'textfield',
										fieldLabel : '生物量参数b',
										allowBlank : false,
										name:'swl_cs_b',
										width:180
									},{
										xtype:'textfield',
										fieldLabel : '生物量参数c',
										allowBlank : false,
										width:180,
										namne:'swl_cs_c'
									},{
										xtype:'textfield',
										fieldLabel:'树种林木地下/地上生物量比',
										allowBlank : false,
										width:180,
										namne:'ds_dx_rate'
									},{
										xtype:'textfield',
										fieldLabel:'基线碳层面积',
										allowBlank : false,
										width:250,
										namne:'carbon_i_area'
									},{
										xtype:'textfield',
										fieldLabel:'项目开始后的年数',
										allowBlank : false,
										width:250,
										namne:'year_after_pro'
									}
									],
								    buttons : [{
									text : '提交',
									formBind : true,
									handler : function() {
										top.getForm().submit({
											method : 'POST',
											waitTitle : '连接',
											waitMsg : '消息发送中...',
											success : function() {
											Ext.Msg.alert('状态', '修改名称成功!',
														function(btn, text) {
															if (btn == 'ok') {
																jixian_linmu_swfc_store.removeAll();
																jixian_linmu_swfc_store.reload();
																treewind.destroy();
															}
														});
											},
											failure : function(form, action) {
												Ext.Msg.alert('状态','修改树种失败!');
												top.getForm().reset();
											}
										});
									}//end_handler
								}, {
									text : '取消',
									handler : function() {
										treewind.destroy();
									}
								}]
							});
					var treewind = new Ext.Window({
								id : 'treewind',
								closable : true,
								resizable : false,
								plain : true,
								border : false,
								monitorValid : true,
								modal : true,
								items : [top]
							});
					treewind.show();
				}
			}

		}, '-', {
			text : '删除树种参数',
			tooltip : '删除选中的树种参数',
			iconCls : 'delete',
			scope : this,
			handler : function() {
				var selectlog = grid.getSelectionModel().getSelected();
				if (null == selectlog) {
					Ext.MessageBox.alert('状态', '你没有选择要删除的树种参数!');
				} else {
					var id = selectlog.get('carbon_level_id');

					Ext.MessageBox.confirm('确认删除',
							'是否确认执行删除 ', function(btn) {
								if (btn == 'yes') {
									Ext.Ajax.request({
												url : 'exam_deletePaper.action?id='/**删除用户对应数据库中的树种*/
														+ id,
												method : 'POST',
												success : function() {
													jixian_linmu_swfc_store.removeAll();
													jixian_linmu_swfc_store.reload();
													Ext.Msg.alert('状态',
																	'删除成功!');
												},
												failure : function(result, action) {
													Ext.Msg.alert('状态','删除失败!');
												}
											});
								}
							});
				}
			}
		}, '-']);
		
		var rowNum = new Ext.grid.RowNumberer(
				{
					header : "序号",
					width : 50,
					sortable:true
				});
		var colmodel = new Ext.grid.ColumnModel([
				rowNum,{
				   header:"carbon_level_id",
				   dataIndex:'carbon_level_id',
				   hideable:false, 
				   hidden:true
				},{
				   header:"林分平均单位面积蓄积量",
				   dataIndex:'lfpjmjxjl',
				   sortable:true,
				   width:150
				},{
				   header:"生物量参数a",
				   dataIndex:'swl_cs_a',
				   sortable:true,
				   width:80
				},
				{
				   header:"生物量参数b",
				   dataIndex:'swl_cs_b',
				   sortable:true,
				   width:80
				},{
				   header:"生物量参数c",
				   dataIndex:'swl_cs_c',
				   sortable:true,
				   width:80
				},{
				   header:"树种林木地下/地上生物量比",
				   dataIndex:'ds_dx_rate',
				   sortable:true,
				   width:180
				},{
				   header:"基线碳层面积",
				   dataIndex:'carbon_i_area',
				   sortable:true,
				   width:80
				},{
				   header:"项目开始后的年数",
				   dataIndex:'year_after_pro',
				   sortable:true,
				   width:80
				}]);

		var pagingBar = new Ext.PagingToolbar({
					pageSize : 20,
					store : jixian_linmu_swfc_store,
					displayInfo : true,
					displayMsg : '显示 {0} - {1} of {2}',
					emptyMsg : "当前没添加有树种"
				});
		jixian_linmu_swfc_store.setDefaultSort('carbon_level_id', 'DESC');/**设置默认的排序方式*/
		//gridpanel
		var jixian_linmu_grid = new Ext.grid.GridPanel({
					id : 'tree_type_grid',
					store : jixian_linmu_swfc_store,
					renderTo:'jixian_caiji',
					colModel : colmodel,
					selModel : new Ext.grid.RowSelectionModel(),
					stripeRows : true,
					height : 490,
					tbar : topBar,
					bbar : pagingBar
				});
		jixian_linmu_swfc_store.load({
					params : {
						start : 0,
						limit : 20
					}
		});
});

 效果如下