解决extjs grid 不随窗口大小自适应的改变问题

 在使用grid的时候窗口改变了但是grid却不能自适应,下面有个不粗的解决方法,大家可以参考下

最近遇到的问题,在使用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> 
 

时间: 2024-10-03 00:51:18

解决extjs grid 不随窗口大小自适应的改变问题的相关文章

解决extjs grid 不随窗口大小自适应的改变问题_extjs

最近遇到的问题,在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 问题就解决了,效果图 拖大后的效果 添加的语句: 复制代码 代码如下: Ext.EventManager.onWindowResize(function(){ grid1.getView().refresh() }) 参看完整代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

Extjs grid panel自带滚动条失效的解决方法_extjs

之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效. 取个实例,EXTJS gridPanel自带的滚动条,是有一个固定的列宽来放置这个scrollbar的,如上图所示.所以当这个scrollbar失效的时候,无论你怎么拖动这个滚动条,grid中的数据永远都不会随scrollbar的移动而展示相应区域的数据(换句话说就是你永远看到的数据都是截图中的这几条record). 至于

extjs grid从后台重新载入数据后,复选框不能选

问题描述 extjs grid从后台重新载入数据后,复选框不能选 20C EXTjs 3.2环境页面默认数据都正常,一但从后台搜索出数据后,可以展示到grid窗口,复选框变不可选了,怎么解决呢 解决方案 使用ds. 在配置GridPanel时,某些现有的配置可能会变成无效的. 例如,配置的 autoExpandColumn 可能在新的ColumnModel中不再存在. 并且,现有的 PagingToolbar 将仍然被绑定在旧的Store上,并且需要重新绑定. 所有plugins 也需要使用新数

ExtJs Grid分页时序号自增的实现

ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯.这里实现了序 号的自动增加. 先看效果图: 实现步骤如下: 1.定义全局变量. var record_start = 0; 2.Grid的columns部分的定义. columns : [new Ext.grid.RowNumberer({ header : "序号", width : 40, renderer:function(value,metadata,record,rowIndex){ re

图片-extjs grid按条件修改列的背景色

问题描述 extjs grid按条件修改列的背景色 从后台传递一个参数source到前台,其中source的值可以为1,2,3.当source值为2时,将WY_USERLABEL_CM,ZZ_USERLABEL_CM标记背景色为黄色,当source为3时,将ZZ_USERLABEL_CM,WY_USERLABEL_CM标为黄色.

渲染-extjs grid嵌套问题 内部grid不能显示到外部grid的指定位置

问题描述 extjs grid嵌套问题 内部grid不能显示到外部grid的指定位置 我已近在csdn看到已完成的例子,但是只能在不使用mvc模式下实现,但我把其放到使用mvc的项目中,却渲染不到表格内部,若改为渲染到body才可以 解决方案 看下最终产生的html,有没有嵌套正确.产生的html和css是什么 解决方案二: ext的mvc还是asp.net的那种mvc项目? 注意ext grid表格数据加载时异步的,你要渲染到指定的数据表格里面,要在grid的store的load事件中执行渲染

图片-Extjs grid输入参数搜索功能

问题描述 Extjs grid输入参数搜索功能 需求: 打开页面查询所有功能已经实现,现在grid上方有个tbar,tbar里面有关键字搜索类型的输入,以及一个button按钮,点击按钮搜索输入的参数取得数据显示在grid上,并覆盖掉原先的查询所有的数据,显示条件查询的数据,. 如果能给我相关例子链接,或者思路,十分感谢, 解决方案 extjs grid 传递多个参数

extjs grid如动态同步表单元格

问题描述 extjs grid如动态同步表单元格 我在grid里面设置了rowedting,里面有一列A是combobox,当用户选择了列A的值以后会向后台请求一个与列A级联的列B的值 grid的model里面有A和B combobox里面有displayName和Value 我为列A设置了renderer function(value,metadata,record){ var selectStore=Ext.data.StoreMgr.lookup('SelectStore'); var i

extjs grid设置某列背景颜色和字体颜色的方法_extjs

css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :