解决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解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 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
php.ini 中文版
2006/10/28 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP curl使用实例
2015/07/02 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
浅析Django中关于session的使用
2019/12/30 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
演讲稿开场白
2014/01/13 职场文书
高中生活自我鉴定
2014/01/18 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技