解决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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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 array_search() 函数使用
2010/04/13 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue中如何使用ztree
2018/02/06 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python集合删除多种方法详解
2020/02/10 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
金讯Java笔试题目
2013/06/18 面试题
小学生打架检讨书
2014/01/26 职场文书
公司请假条范文
2014/04/11 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
骨干教师个人总结
2015/02/11 职场文书
健康证明
2015/06/19 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python