解决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 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
node.js实现端口转发
Apr 14 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 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遍历二维数组的代码
2011/04/22 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
详解javascript脚本何时会被执行
2021/02/05 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
Python3读取zip文件信息的方法
2015/05/22 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
在pycharm中实现删除bookmark
2020/02/14 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
会计毕业生自荐信
2013/11/21 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
物业保安员岗位职责
2014/03/14 职场文书
2014年社区工作总结
2014/11/18 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
考试没考好检讨书
2015/05/06 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Golang入门之计时器
2022/05/04 Golang