我的应用程序有一个相当复杂的布局，使用边框、vbox 和 hbox，除了一个烦恼之外，它们似乎都非常适合。南部地区的电网底部不正常。当浏览器高于 minHeight/maximized 时，我希望网格占据面板的高度，但目前它看起来像这样：
当浏览器缩小（但不低于最小尺寸）时，它看起来像这样，我无法到达网格滚动条的底部:(
您可以看到（视口/网格问题上可能的最小高度）的滚动条切割，但不确定如何解决这个问题，有人能发现我需要做什么来解决这两个问题吗？下面的代码：
<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>
语法高亮链接： http: //paste.laravel.com/kPr
谢谢你，内森