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


Posted in Javascript onJanuary 26, 2014

最近遇到的问题,在使用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>
Javascript 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 #Javascript
购物车选中得到价格实现示例
Jan 26 #Javascript
动态添加option及createElement使用示例
Jan 26 #Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 #Javascript
js中创建对象的几种方式示例介绍
Jan 26 #Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
php error_log 函数的使用
2009/04/13 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python引用DLL文件的方法
2015/05/11 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
结构工程研究生求职信
2013/10/13 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
优秀班组长事迹
2014/05/31 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2015年党总支工作总结
2015/05/25 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python