管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

解决extjs 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>

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

　　</div>

　　</body>

　　</html>

教程首页 更多教程