解决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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
详解React 条件渲染
Jul 08 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python黑魔法之参数传递
2016/02/12 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
生日宴会答谢词
2014/01/09 职场文书
车间机修工岗位职责
2014/02/28 职场文书
锦旗标语大全
2014/06/23 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
合同范本之电脑出租
2019/08/13 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
vue引入Excel表格插件的方法
2021/04/28 Vue.js
你知道Java Spring的两种事务吗
2022/03/16 Java/Android