提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

问题 解决 改变 大小 窗口 适应 ExtJsgrid
2023-06-13 09:15:16 时间

最近遇到的问题，在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句
问题就解决了，效果图

拖大后的效果

添加的语句：

复制代码代码如下:

Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})

参看完整代码；
复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>grid</title>
<linkhref="../ext/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
<scriptsrc="../ext/adapter/ext/ext-base.js"type="text/javascript"></script>
<scriptsrc="../ext/ext-all.js"type="text/javascript"></script>
<scripttype="text/javascript">
Ext.onReady(function(){
functionrenderAdmin()
{
return"<spanstyle="cursor:pointer;"onclick="alert();"><imgsrc="../IMAGES/icons/email.jpg"/></a></span>";
}
varsm=newExt.grid.CheckboxSelectionModel();
//varsm1=newExt.grid.RowSelectionModel({singleSelect:true}),
varcm=newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),
sm,
//sm1,
{header:"<spanstyle="cursor:pointer;"><imgsrc="../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"}
]);
vardata=[
["","001","收件单一","张三","李四"],
["","002","收件单二","张四","李五"],
["","003","收件单三","张六","李七"]
];
varstore=newExt.data.Store({
proxy:newExt.data.MemoryProxy(data),
reader:newExt.data.ArrayReader({},[
{name:"admin"},
{name:"id"},
{name:"name"},
{name:"from"},
{name:"to"}
])
});
store.load();
vargrid1=newExt.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;
variid=grid.getSelectionModel().getSelected().data.id;
window.location.href="SubFrame.html?id="+iid;
}
}
});
Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})
});
</script>
</head>
<body>
<divid="grid1"style="width:100%;height:100%;">
</div>
</body>
</html>

相关文章