您的位置
主页 > 网站技术 > 语言编程 > » 正文

解决extjs grid 不随窗口大小自适应的改变问题

来源: 站长圈 点击:

点评:在使用grid的时候窗口改变了但是grid却不能自适应,下面有个不粗的解决方法,有需要的可以参考一下!

最近遇到的问题,在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 

问题就解决了,效果图 

拖大后的效果 

添加的语句: 

复制代码 代码如下:

Ext.EventManager.onWindowResize(function(){ 

grid1.getView().refresh() 

}) 

复制代码 代码如下:

<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:'名称',dataIndex:'name'}, 

{header:'发送人',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:'发送', 

// 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) { 

//获取当前选中行, 输向 

// 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> 

<p id="grid1" style="width: 100%; height: 100%;"> 

</p> 

</body> 

</html> 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明