解决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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JavaScript实现密码强度实时验证
Mar 18 Javascript
输入框跟随文字内容适配宽实现示例
Aug 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新手上路(十一)
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
对python制作自己的数据集实例讲解
2018/12/12 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python 制作简单的音乐播放器
2020/11/25 Python
Europcar比利时:租车
2019/08/26 全球购物
环境工程专业自荐信范文
2014/03/18 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
Win11查看设备管理器
2022/04/19 数码科技