解決extjs grid 不隨窗口大小自適應(yīng)的改變問(wèn)題

更新時(shí)間：2014年01月26日 16:44:19 作者：

在使用grid的時(shí)候窗口改變了但是grid卻不能自適應(yīng)，下面有個(gè)不粗的解決方法，大家可以參考下

最近遇到的問(wèn)題，在使用grid的時(shí)候窗口改變了但是grid卻不能自適應(yīng)的改變于是加了一條這行語(yǔ)句
問(wèn)題就解決了，效果圖

拖大后的效果

添加的語(yǔ)句：

 
Ext.EventManager.onWindowResize(function(){ 
grid1.getView().refresh() 
}) 

參看完整代碼；

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>grid</title> 
<link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="../ext/ext-all.js" type="text/javascript"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
function renderAdmin() 
{ 
return " <span style='cursor:pointer;' onclick='alert();'><img src='../IMAGES/icons/email.jpg'/> </a></span>"; 
} 
var sm= new Ext.grid.CheckboxSelectionModel(); 
// var sm1= new Ext.grid.RowSelectionModel({singleSelect:true}), 
var cm=new Ext.grid.ColumnModel([ 
new Ext.grid.RowNumberer(), 
sm, 
// sm1, 
{header:'<span style="cursor:pointer;"><img src="../IMAGES/icons/email.jpg"/> </a></span>',dataIndex:'admin',width:30,renderer:renderAdmin,sortable:false}, 
{header:'ID',dataIndex:'id'}, 
{id:'name',header:'名稱(chēng)',dataIndex:'name'}, 
{header:'發(fā)送人',dataIndex:'from'}, 
{header:'收件人',dataIndex:'to'} 
]); 
var data=[ 
['','001','收件單一','張三','李四'], 
['','002','收件單二','張四','李五'], 
['','003','收件單三','張六','李七'] 
]; 
var store= new Ext.data.Store({ 
proxy:new Ext.data.MemoryProxy(data), 
reader:new Ext.data.ArrayReader({},[ 
{name:'admin'}, 
{name:'id'}, 
{name:'name'} , 
{name:'from'}, 
{name:'to'} 
]) 
}); 
store.load(); 
var grid1= new Ext.grid.GridPanel({ 
renderTo:'grid1', 
name:'grid1', 
layout:'fit' , 
title:'收件單', 
autoHeight:true, 
autoWidth:true, 
bodyStyle:'width:100%', 
loadMask :true, 
//autoExpandColumn:'name', 
autoWidth:true, 
// tbar:[{text:'發(fā)送', 
// icon: '../Images/icons/application_edit.jpg', 
// cls: 'x-btn-text-icon'}, 
// {text:'刪除', 
// icon: '../Images/icons/application_edit.jpg', 
// cls: 'x-btn-text-icon'}], 
store:store, 
frame:true, 
cm:cm, 
sm:sm, 
viewConfig:{ 
forceFit:true}, 
listeners : { 
rowdblclick : function(n) { 
//獲取當(dāng)前選中行， 輸向 
// debugger; 
var iid= grid.getSelectionModel().getSelected().data.id ; 
window.location.href="SubFrame.html?id="+iid; 
} 
} 
}); 
Ext.EventManager.onWindowResize(function(){ 
grid1.getView().refresh() 
}) 
}); 
</script> 
</head> 
<body> 
<div id="grid1" style="width: 100%; height: 100%;"> 
</div> 
</body> 
</html> 