tabPanel中的GridPanel宽度，高度自适应

//定义在脚本中使用的层id变量
var mainName = "<%=mainName%>";

Ext.onReady(function() {
			var proxy = new Ext.data.HttpProxy({
						url : '../StudentDispatchAction.do?method=queryCourse',
						method : 'GET'
					});

			var reader = new Ext.data.JsonReader({
						root : 'Data',
						totalProperty : 'TotolRecord'
					}, [{
								name : 'term'
							}, {
								name : 'teachId'
							}, {
								name : 'couName'
							}, {
								name : 'couCredit'
							}, {
								name : 'couType'
							}, {
								name : 'scMark'
							}, {
								name : 'scMakeup'
							} 
							]);

			var store = new Ext.data.Store({
						proxy : proxy,
						reader : reader
					});

			// create the Grid
			var grid = new Ext.grid.GridPanel({
						store : store,
						columns : [new Ext.grid.RowNumberer(), {
									id : 'term',
									header : "学年学期",
									width : 30,
									sortable : true,
									dataIndex : 'term'
								}, {
									header : "开课编号",
									width : 75,
									sortable : true,
									dataIndex : 'teachId'
								}, {
									header : "课程名称",
									width : 75,
									sortable : true,
									dataIndex : 'couName'
								}, {
									header : "学分",
									width : 75,
									sortable : true,
									dataIndex : 'couCredit'
								}, {
									header : "课程类型",
									width : 75,
									sortable : true,
									dataIndex : 'couType'
								}, {
									header : "考试成绩",
									width : 75,
									sortable : true,
									dataIndex : 'scMark'
								}, {
									header : "补考成绩",
									width : 75,
									sortable : true,
									dataIndex : 'scMakeup'
								}],
						stripeRows : true,
						autoExpandColumn : 'teachId',
						height : Ext.get("center").getHeight() - 50,
						bodyStyle : 'width:100%',
						autoWidth : true,
						autoScroll : true,
						// title: '我的开课',
						id : 'Course',
						viewConfig : {
							forceFit : true
						},
						bbar : new Ext.PagingToolbar({
									pageSize : 10,// 每页显示的记录值
									store : store,
									displayInfo : true,
									displayMsg : '总记录数 {0} - {1} of {2}',
									emptyMsg : "没有记录"
								})
					});

			grid.render(mainName);
			store.load({
						params : {
							start : 0,
							limit : 10
						}
					});
			grid.getSelectionModel().selectFirstRow();
		});
		
function ComResize(){ 
	 var h = Ext.get("center").getHeight() - 30;	//center为我的tab子面板动态add直去的面板
	// 获取面板
	var centerpanel = Ext.getCmp("Course");	//Course即为我当前页面显示的表格
	if (centerpanel) {
		centerpanel.setHeight(h);
	}
}
//通过window.onresize事件来执行allComResize函数控制tab容器的大小 
var oTime; 
window.onresize = function() {	
 if (oTime) 
    { 
        clearTimeout(oTime); 
    } 
    oTime = setTimeout("ComResize()", 100); //延迟100毫秒执行 


};

 注意：IE在执行的时候会有问题，窗口变化，但获取的高度却先于变化，导致高度没变化。故设置延时执行。

评论

2 楼 longterm 2009-06-18  

我奋斗 写道

height : Ext.get("center").getHeight() - 50,                         这样自动适应，有没有更好的方法啊？这个不怎好啊。

因为找不到获取tab内容的办法，只能大概减去tab的头的高度了，

1 楼 我奋斗 2009-06-17  

height : Ext.get("center").getHeight() - 50,  
                     
这样自动适应，有没有更好的方法啊？这个不怎好啊。