如何在extjs4中让一个gridpanel填充满它的父panel 30
我使用的extjs版本是extjs4.1.0，我定义了一个viewport，定义如下：Ext.create('Ext.Viewport',{title:'Ext.View...
我使用的extjs版本是extjs 4.1.0，我定义了一个viewport，定义如下：
Ext.create('Ext.Viewport', {
title : 'Ext.Viewport示例',
layout:'border',//表格布局
items: [{
title : '云排产系统',
collapsible: true,
html : '<center><img src="pic/logo.jpg" width=100% height=100% alt="--欢迎您使用云排产系统--" >',
region: 'north',//指定子面板所在区域为north
height: 200
},{
title : '功能菜单',
items : menu,
split:true,
collapsible: true,
region:'west',//指定子面板所在区域为west
width: 200
},{
title: '系统说明',
contentEl : 'aboutDiv',
collapsible: true,
id : 'mainContent',
region:'center',//指定子面板所在区域为center
loader : {}
}]
});
var mainPanel = Ext.getCmp('mainContent');
viewport的north区域是一颗树，当点击树的某个节点时，会触发如下操作：
mainPanel.getLoader().load({
url:re.data.url,
callback : function(){
mainPanel.setTitle(re.data.text);
},
scripts: true
});
也就是将viewport center区域填充一个jsp，
我在一个Jsp页面中定义了如下的gridpanel：
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-div',
iconCls: 'icon-grid',
frame: true,
store: ds,
title: '加工中心设定',
resizable: false,
stripeRows : true,
autoScroll : true,
tbar : Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: [
{text : '精确查找',iconCls:'option',handler:find},
{text : '修改日历',iconCls:'option',handler:modifyCalender},
{text : '查看工作中心负荷',iconCls:'option',handler:viewEndure}
]
}),
selModel: sm,
columns: [
Ext.create('Ext.grid.RowNumberer'),
{header: "代码", flex: 1, sortable: true, dataIndex: 'code'},
{header: "描述", flex: 1, sortable: true, dataIndex: 'description'},
{header: "所属单位", sortable: true, dataIndex: 'belong'},
{header: "日历类型", sortable: true, dataIndex: 'calender'}
]
});
这个jsp的body内容为：
<body>
<div id='grid-div' style="width:100%; height:100%;"/>
</body>
现在的问题就是，比如我加载的数据比较多的时候，viewport center中无法显示这个gridpanel的下边框，也就是说，没有滚动条，感觉就像定住了一样，除非给这个gridpanel设置一个height属性，才能看见滚动条，这个gridpanel没有填满viewport的center区域，我怀疑是renderTo的问题，但我又不知道怎么改，求懂的人可以帮帮我，实在是很急了现在。 展开
Ext.create('Ext.Viewport', {
title : 'Ext.Viewport示例',
layout:'border',//表格布局
items: [{
title : '云排产系统',
collapsible: true,
html : '<center><img src="pic/logo.jpg" width=100% height=100% alt="--欢迎您使用云排产系统--" >',
region: 'north',//指定子面板所在区域为north
height: 200
},{
title : '功能菜单',
items : menu,
split:true,
collapsible: true,
region:'west',//指定子面板所在区域为west
width: 200
},{
title: '系统说明',
contentEl : 'aboutDiv',
collapsible: true,
id : 'mainContent',
region:'center',//指定子面板所在区域为center
loader : {}
}]
});
var mainPanel = Ext.getCmp('mainContent');
viewport的north区域是一颗树，当点击树的某个节点时，会触发如下操作：
mainPanel.getLoader().load({
url:re.data.url,
callback : function(){
mainPanel.setTitle(re.data.text);
},
scripts: true
});
也就是将viewport center区域填充一个jsp，
我在一个Jsp页面中定义了如下的gridpanel：
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-div',
iconCls: 'icon-grid',
frame: true,
store: ds,
title: '加工中心设定',
resizable: false,
stripeRows : true,
autoScroll : true,
tbar : Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: [
{text : '精确查找',iconCls:'option',handler:find},
{text : '修改日历',iconCls:'option',handler:modifyCalender},
{text : '查看工作中心负荷',iconCls:'option',handler:viewEndure}
]
}),
selModel: sm,
columns: [
Ext.create('Ext.grid.RowNumberer'),
{header: "代码", flex: 1, sortable: true, dataIndex: 'code'},
{header: "描述", flex: 1, sortable: true, dataIndex: 'description'},
{header: "所属单位", sortable: true, dataIndex: 'belong'},
{header: "日历类型", sortable: true, dataIndex: 'calender'}
]
});
这个jsp的body内容为：
<body>
<div id='grid-div' style="width:100%; height:100%;"/>
</body>
现在的问题就是，比如我加载的数据比较多的时候，viewport center中无法显示这个gridpanel的下边框，也就是说，没有滚动条，感觉就像定住了一样，除非给这个gridpanel设置一个height属性，才能看见滚动条，这个gridpanel没有填满viewport的center区域，我怀疑是renderTo的问题，但我又不知道怎么改，求懂的人可以帮帮我，实在是很急了现在。 展开
1个回答
展开全部
加入fit布局就可以了layout : 'fit',
},{
title: '系统说明',
layout : 'fit',
contentEl : 'aboutDiv',
collapsible: true,
id : 'mainContent',
region:'center',//指定子面板所在区域为center
loader : {}
}]
},{
title: '系统说明',
layout : 'fit',
contentEl : 'aboutDiv',
collapsible: true,
id : 'mainContent',
region:'center',//指定子面板所在区域为center
loader : {}
}]
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
