解决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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
JavaScript实现动态生成表格
Aug 02 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判断变量是否为0的方法
2014/02/08 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
学生党员思想汇报
2013/12/28 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2014年终个人工作总结
2014/11/07 职场文书
先进班组材料范文
2014/12/25 职场文书
岁月神偷观后感
2015/06/11 职场文书
2015年征兵工作总结
2015/07/23 职场文书
交通安全教育主题班会
2015/08/12 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电