Extjs4 ExtJs网格高度和滚动条eurgh
对于我的应用程序，我有一个相当复杂的布局，使用borders、vbox和hbox，它们似乎都非常适合，只是有一个缺点。南部地区的网格底部不起作用。当浏览器高于minHeight/maximized时，我希望网格占据面板的高度，但此时它看起来是这样的： 当浏览器缩小（但不低于最小大小）时，它看起来是这样的，我无法到达网格滚动条的底部：( 您可以看到滚动条的切割（视口/网格问题上的可能最小高度），但不确定如何解决此问题。有人能发现我需要做什么来解决这两个问题吗？代码如下：Extjs4 ExtJs网格高度和滚动条eurgh,extjs4,height,scrollbar,viewport,Extjs4,Height,Scrollbar,Viewport,对于我的应用程序，我有一个相当复杂的布局，使用borders、vbox和hbox，它们似乎都非常适合，只是有一个缺点。南部地区的网格底部不起作用。当浏览器高于minHeight/maximized时，我希望网格占据面板的高度，但此时它看起来是这样的： 当浏览器缩小（但不低于最小大小）时，它看起来是这样的，我无法到达网格滚动条的底部：( 您可以看到滚动条的切割（视口/网格问题上的可能最小高度），但不确定如何解决此问题。有人能发现我需要做什么来解决这两个问题吗？代码如下： <script
<script type="text/javascript" src="../app.js"></script>
<!-- script to warn users when leaving page -->
<?php
$db = Zend_Registry::get('db');
$result = $db->query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")->FetchAll();
?>
<script type="text/javascript">
var container = Ext.create('Ext.container.Viewport',{
id: 'mainWindow',
minWidth: 800,
minHeight: 640,
layout:'fit',
listeners: {
afterrender: function() {
this.setSize(this.getWidth(), this.getHeight());
},
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
},
defaults: {
//collapsible: true, //Add this to true later maybe impliment a lock sam
//when viewport scrolled up, background shows a login.
split: true,
rezisable: false
},
items:[{
layout: 'border',
//height: 640,
//minHeight: 640,
items: [
{
//This panel holds the file menu strip and the show combo
border: false,
region: 'north',
height: 92,
bodyStyle:'background: #DFE8F6;',
/******Toolbar*******/
tbar: [
/****File Button****/
{
xtype: 'button',
text: window.samlanguage.file,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.refreshlist,
action: 'refreshGrid',
icon: '../assets/images/refresh.png',
handler: function(btn){
}
},{
text: window.samlanguage.settings,
icon: '../assets/images/settings.png',
action: 'spawnSettings',
handler: function(Btn){
}
},{
text: window.samlanguage.compose,
icon: '../assets/images/mail--plus.png',
action: 'spawnEmail',
handler: function(Btn){
Ext.create('APP.view.core.forms.Emailform').show();
}
},{
text: window.samlanguage.logout,
action: 'logout',
icon: '../assets/images/exit.png',
handler: function(){
}
}
]
},
/****Help Button****/
{
xtype: 'button',
text: window.samlanguage.help,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.contents,
icon: '../assets/images/contents.png',
action: 'spawnContents',
handler: function(btn){
}
},{
text: window.samlanguage.license,
icon: '../assets/images/licence.png',
handler: function(btn){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"<b>Retrieving</b> licensing information..."});
myMask.show();
Ext.Ajax.request({
url: '../License/read',
method: 'post',
//params: values,
success: function(response){
myMask.hide();
var numusers = Ext.decode(response.responseText);
Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
}
});
}
},{
text: window.samlanguage.about,
icon: '../assets/images/about.png',
//action: 'spawnAbout',
handler: function(btn){
Ext.Msg.show({
title:'About us',
buttons: Ext.Msg.OK,
icon: 'perceptiveLogo'
});
}
}
]
}
],
items: [{
//Comboform with userlist
xtype: 'Comboform',
bodyStyle:'background: #DFE8F6;',
border: false
}]
}//End north region (header) region
,{
region:'center',
type: 'vbox',
align : 'stretch',
items: [
{
//Add the userlist grid
title: 'Currently showing all users',
//id: 'usergridList',
height: 290,
minHeight: 290,
border: false,
xtype: 'Allusers'
},
{
//Add the allprograms grid
title: 'Program Access Permissions',
border: false,
height: 380,
minHeight: 380,
//height: 'auto',
xtype: 'Allprograms'
}
]
} //End center (body) region
,{
region:'east',
type: 'vbox',
align : 'stretch',
split: true,
//collapsible: true,
width: 240,
minWidth: 240,
maxWidth: 240,
//title: 'User Actions',
listeners: {
/*collapse: function() {
this.setTitle("User management");
},
expand: function() {
this.setTitle("User Actions");
},
click: function() {
return false;
},*/
afterrender: function(){
this.splitter.disable();
}
},
//height: 300
items :[
{
title: 'User Actions',
border: false,
height: 168,
xtype: 'Useractionsform'
},
{
title: 'View Audit',
border: false,
height: 122,
xtype: 'Auditform'
},
{
title: 'Program Access',
border: false,
height: 380,
minHeight: 340,
xtype: 'Programactionsform'
}
]
} //End of east region
,{
region: 'south',
height: 20,
bodyStyle:'background: #DFE8F6;',
border: false
}
]
}]
}).show();
});
</script>
我指的是你发布的语法突出显示链接的第87-97行
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
resize:function（）{
var programGrid=Ext.getCmp（'programList'）；
if（this.getHeight（）
这是视口的调整大小处理程序，因此每次调整浏览器的大小时，此函数都会显式设置网格高度。不确定此代码的用途，但它看起来可能是个问题。通常情况下，您不需要这样的代码-如果布局设置正确，所有内容都应该组合在一起，然后如果需要，可以对网格使用minHeight/maxHeight。如果只删除此代码会发生什么情况？我认为您需要完全删除调整大小事件处理程序。看起来您正试图在中心面板上创建“vbox”布局，但使用的是“type:vbox”。请尝试使用以下方法：
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
这是从ExtJS示例（）中获取的。然后，您可以只向子容器中添加一个“flex”而不是minheight。可以使用设置JSFIDLE示例吗？我会尝试，但不确定它的效果如何：）我首先移除网格，用一个简单的面板替换它，这样你就可以确定是网格本身把事情搞砸了，还是只是你把布局配置搞砸了。另外，我也不太清楚第87-97行（视口的调整大小处理程序）的用途。@zeke好的，我试试看，然后再回复您，第87-97行？我想那是工具栏上的“帮助”按钮？@zeke面板也占据了该区域的全部高度：/谢谢，你们都是对的，添加布局配置似乎可以解决问题。看来我没有正确调用vbox。