解决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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Javascript之String对象详解
Jun 08 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php常用hash加密函数
2014/11/22 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
详解参数传递四种形式
2015/07/21 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
python对象与json相互转换的方法
2019/05/07 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python ini文件常用操作方法解析
2020/04/26 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
乡镇干部先进事迹材料
2014/02/03 职场文书
绩效工资实施方案
2014/03/15 职场文书
高中生家长寄语大全
2014/04/03 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
实施意见格式范本
2015/06/05 职场文书
招商银行工作证明
2015/06/17 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书