ExtJs网格高度和滚动条eurgh
我的应用程序布局相当复杂，使用了border，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
谢天谢地 森
2 个答案:
答案 0 :(得分：1)
我指的是您发布的语法高亮显示链接的第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;
}
}
这是视口的调整大小处理程序，因此每次调整浏览器大小时，此函数都将显式设置网格高度。不确定此代码的目的是什么，但看起来可能是问题。通常你不需要像这样的代码 - 如果你正确设置了布局，一切都应该放在一起，然后你可以根据需要使用minHeight / maxHeight作为网格。如果你只是把这个代码拿出来会发生什么？
答案 1 :(得分：0)
我认为您需要完全删除resize事件处理程序。看起来您正试图在中心面板上创建“vbox”布局，但您使用的是“type：vbox”。试试这个：
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
这取自ExtJS示例（http://docs.sencha.com/ext-js/4-2/extjs-build/examples/layout-browser/layout-browser.html）。然后你可以在你的子容器中添加一个'flex'而不是minheight。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？