TabPanel中GridPanel布局问题

[ym2007]

源代码：

var grid = new Ext.grid.GridPanel({
				id : 'firstPanel',
				title : '数据管理',
				trackMouseOver : false,
				disableSelection : true,
				closable : true,
				loadMask : true,// 载入遮罩动画
				store : store,
				sm : csm, //new Ext.grid.RowSelectionModel({singleSelect:false}),//多选框
				cm : cm,//
				viewConfig : {
					forceFit : true,
					enableRowBody : true,
					sortAscText : '升序',
					sortDescText : '降序',
					columnsText : '显示列',
					//showPreview : true,
					getRowClass : function(record, rowIndex, p, store) {
						if (this.showPreview) {
							p.body = '<p>' + record.data.excerpt + '</p>';
							return 'x-grid3-row-expanded';
						}
						return 'x-grid3-row-collapsed';
					}
				},
                           .......................
                         });

var tabPanel = new Ext.TabPanel({
				 id : 'firstTab',
				 region : 'center', // a center region is ALWAYS required for border layout
				 deferredRender: false,
				 enableTabScroll : true,//当标签页会超出TabPanel的整体宽度时，是否溢出的标签页
				 activeTab: 0,     // first tab initially active
				 items: grid
				 });

  var viewport = new Ext.Viewport({
		layout : 'border',
		items : [
				new Ext.BoxComponent({
					region : 'north',
					height : 80, // give north and south regions a height
					autoEl : {
						tag : 'div',
						html : '<p>north - generally for menus, toolbars and/or advertisements</p>'
					}
				}), {
					// lazily created panel (xtype:'panel' is default)
					region : 'south',
					contentEl : 'south',
					split : true,
					height : 100,
					minSize : 100,
					maxSize : 200,
					collapsible : true,
					title : 'South',
					margins : '0 0 0 0'
				}, {
					region : 'east',
					title : 'East Side',
					collapsible : true,
					split : true,
					width : 225, // give east and west regions a width
					minSize : 175,
					maxSize : 400,
					margins : '0 5 0 0',
					layout : 'fit', // specify layout manager for items
					items : // this TabPanel is wrapped by another Panel so the title will be applied
					new Ext.TabPanel({
						border : false, // already wrapped so don't add another border
						activeTab : 1, // second tab initially active
						tabPosition : 'bottom',
						items : [{
							html : '<p>A TabPanel component can be a region.</p>',
							title : 'A Tab',
							autoScroll : true
						}, new Ext.grid.PropertyGrid({
									title : 'Property Grid',
									closable : true,
									source : {
										"(name)" : "Properties Grid",
										"grouping" : false,
										"autoFitColumns" : true,
										"productionQuality" : false,
										"created" : new Date(Date
												.parse('10/15/2006')),
										"tested" : false,
										"version" : 0.01,
										"borderWidth" : 1
									}
								})]
					})
				}, {
					region : 'west',
					id : 'west-panel', // see Ext.getCmp() below
					title : 'West',
					split : true,
					width : 200,
					minSize : 175,
					maxSize : 400,
					collapsible : true,
					margins : '0 0 0 5',
					layout : {
						type : 'accordion',
						animate : true
					},
					items : [tree,

					{
								contentEl : 'west',
								title : 'Navigation',
								border : false,
								iconCls : 'nav' // see the HEAD section for style used
							}, {
								contentEl : 'west',
								title : 'Settings',
								html : '<p>Some settings in here.</p>',
								border : false,
								iconCls : 'settings'
							}]
				},
				tabPanel
				]
	});


function treeMenu(node){//加载index_document.jsp'
		var n;
		n = tabPanel.getComponent(node.id);
		if(n){
			tabPanel.setActiveTab(n);
			return false;
		}
               
		n = tabPanel.add({
			id : node.id,
			title : node.text,
			closable : true,
			autoLoad : {
				url : 'index_document.jsp',
				nocache: true,
				text: 'Loading...',
				scripts: true
			}
		});
		
		tabPanel.setActiveTab(n);
	}

index_document.jsp代码

<div id="moduleDiv"></div>

var grid2 = new Ext.grid.GridPanel({
				region : 'center',
				frame : false,
				border : false,//取除边框
				height : 385,//这是固定的高度。当加载进index_document.jsp页面时，使其高度能填冲满整中center部分
				autoWidth : true,
				renderTo : 'moduleDiv',
				trackMouseOver : false,
				disableSelection : true,
				closable : true,
				loadMask : true,// 载入遮罩动画
				store : store,
				sm : csm, //new Ext.grid.RowSelectionModel({singleSelect:false}),//多选框
				cm : cm,//
				viewConfig : {
					forceFit : true,//当行大小变化时始终填充满
					sortAscText : '升序',
					sortDescText : '降序',
					columnsText : '显示列',
					//showPreview : true,
					getRowClass : function(record, rowIndex, p, store) {
						if (this.showPreview) {
							p.body = '<p>' + record.data.excerpt + '</p>';
							return 'x-grid3-row-expanded';
						}
						return 'x-grid3-row-collapsed';
					}
				},
                      ......................................
                   });
 

当加载进index_document.jsp页面时，grid2的高度无法填冲满整个center部分，如何设置可以使其能填冲满整个center部分，及TabPanel?

谢谢！

[hoojo]

grid2的的父容器采用fit布局即可

[ym2007]

index_document.jsp代码

<script type="text/javascript" src="grid2.js"></script>
<div id="moduleDiv"></div>

var grid2 = new Ext.grid.GridPanel({
                region : 'center',
                frame : false,
                border : false,//取除边框
                height : 385,//这是固定的高度。当加载进index_document.jsp页面时，使其高度能填冲满整中center部分
                autoWidth : true,
                renderTo : 'moduleDiv',
                trackMouseOver : false,
                disableSelection : true,
                closable : true,
                loadMask : true,// 载入遮罩动画
                store : store,
                sm : csm, //new Ext.grid.RowSelectionModel({singleSelect:false}),//多选框
                cm : cm,//
                viewConfig : {
                    forceFit : true,//当行大小变化时始终填充满
                    sortAscText : '升序',
                    sortDescText : '降序',
                    columnsText : '显示列',
                    //showPreview : true,
                    getRowClass : function(record, rowIndex, p, store) {
                        if (this.showPreview) {
                            p.body = '<p>' + record.data.excerpt + '</p>';
                            return 'x-grid3-row-expanded';
                        }
                        return 'x-grid3-row-collapsed';
                    }
                },
                      ......................................
                   });

[zoujp_xyz]

[Quote=引用 3 楼 ibm_hoojo 的回复:]

CSS code
grid2的的父容器采用fit布局即可
[/Quote]
同意。。。

[aj3423]

你的grid2 是 renderTo : 'moduleDiv' 的， 试下把 renderTo 去掉

[aj3423]

你的viewport 的center区域放的是 tabpanel, tabpanel里面只有一个 grid， 你想把这个grid2放哪？
放tabpanel里还是替换掉整个tabpanel？