解决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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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设置图片文件上传大小的具体实现方法
2013/10/11 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python读取oracle函数返回值
2016/07/18 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
环保倡议书300字
2014/05/15 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
学生上课说话检讨书
2014/10/25 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server