解决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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
原生js实现日历效果
Mar 02 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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 include和require的区别深入解析
2013/06/17 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
关于this和self的使用说明
2010/08/01 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
javascript求日期差的方法
2016/03/02 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
在python里面运用多继承方法详解
2019/07/01 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
PHP经典面试题
2016/09/03 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
公司领导推荐信
2013/11/12 职场文书
产品质量承诺书范文
2014/03/27 职场文书
公益广告标语
2014/06/19 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
Python中的datetime包与time包包和模块详情
2022/02/28 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers