解决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 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
uni-app如何实现增量更新功能
Jan 03 Javascript
vue实现移动端拖动排序
Aug 21 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实现给一张图片加上水印效果
2016/01/02 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
django 实现简单的插入视频
2020/04/07 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
八一慰问活动方案
2014/02/07 职场文书
企业安全生产承诺书
2014/05/22 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
干部培训简讯
2015/07/20 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
python中的3种定义类方法
2021/11/27 Python