解决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 相关文章推荐
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
解读Vue组件注册方式
May 15 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高级应用技巧果断收藏
2015/09/25 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python中学习K-Means和图片压缩
2017/11/20 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python调用自定义函数的实例操作
2019/06/26 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python如何实现远程方法调用
2020/08/07 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
三年级科学教学反思
2014/01/29 职场文书
财政局个人总结
2015/03/04 职场文书
职称评定个人总结
2015/03/05 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书