【发布时间】：2015-07-29 12:02:24
【问题描述】：
我想在 ExtJs 中创建一个带有标签和复选框的类似表格的结构。通常，我会使用布局为“vbox”的面板来堆叠一系列布局为“hbox”的面板。这样我就得到了这样的结构：
vbox
|
\|/
John Doe [] [] [] [] <- hbox
Jane Doe [] [] [] [] <- hbox
记录是从数据源动态加载的。这意味着我不能使用无论如何都已弃用的“表格”布局。
然而，'vbox' 不能很好地处理溢出。它只是剪辑它，虽然我想要滚动条。所以我选择了布局“适合”，它目前扩展了“适合”面板，因此它可以容纳所有记录。这和滚动条一样好，如果我指定了高度，我可能会得到滚动条。
我想在元素周围填充，但当我添加它时，它会出错。第一个记录的大小大大扩展。
页面大小来自以下元素：
div class="x-panel-body x-panel-body-noheader x-box-layout-ct" id="ext-gen82" style="width: 1621px; height: 2680px;"
我有 10 像素的填充和 135 条记录，所以看起来高度是两个方向的填充的 134 倍。
我尝试保留“vbox”面板并将其包裹在“适合”面板中，但这仍然会产生空白空间并破坏布局。
我在应用程序的其他地方也遇到了类似的问题，我已经为此工作了很多天。非常感谢任何帮助！
下面要求的代码
var pnlRelations = new Ext.Panel({
autoScroll: true,
frame: true,
id: 'pnlRelations',
title: 'Servers',
renderTo: 'pnlServers',
layout: 'fit',
items: [
],
buttons: [
{ text: 'Opslaan', handler: submit }
]
});
var storeServerMaintenance = new Ext.data.Store({
id: 'storeServerMaintenance',
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: '<%= Url.Action("ListMaintenanceServer", "Maintenance") %>' }),
reader: new Ext.data.JsonReader({
// totalProperty: 'records',
idProperty: 'Id',
root: 'rows'
},
<%= ServerMaintenanceListItem.ToColumnModel() %>
),
/*remoteSort: true*/
listeners: {
load: function (store, records, ops) {
nrOfRecords = records.length;
for (var i = 0; i < records.length; i++) {
var rec = records[i];
var serverId = rec.get('Id') == null ? null : rec.get('Id');
var relationId = rec.get('RelationId') == null ? null : rec.get('RelationId');
var q1 = rec.get('Q1') != null && rec.get('Q1');
var q2 = rec.get('Q2') != null && rec.get('Q2');
var q3 = rec.get('Q3') != null && rec.get('Q3');
var q4 = rec.get('Q4') != null && rec.get('Q4');
pnlRelations.add(new Ext.Panel({
layout: 'hbox',
// defaults: { margins: 10 },
style:{padding:'10px'},
items: [
new Ext.form.Label({ html: rec.get('RelationName'), width: labelWidth }),
new Ext.form.Label({ html: rec.get('Name'), width: labelWidth }),
new Ext.form.Label({ id: 'idx_' + i, html: '' + rec.get('Index'), width: boxWidth }),
new Ext.form.Checkbox({ id: 'cbQ1_' + i, width: boxWidth, checked: q1 }),
new Ext.form.Checkbox({ id: 'cbQ2_' + i, width: boxWidth, checked: q2 }),
new Ext.form.Checkbox({ id: 'cbQ3_' + i, width: boxWidth, checked: q3 }),
new Ext.form.Checkbox({ id: 'cbQ4_' + i, width: boxWidth, checked: q4 }),
new Ext.form.Hidden({ id: 'hfServer_' + i, value: serverId }),
new Ext.form.Hidden({ id: 'hfRelation_' + i, value: relationId })
]
}));
}
// debugger;
pnlRelations.doLayout();
}
}
});
【问题讨论】：
-
如果你能提供任何代码会很棒吗？
-
顺便说一句。您是否尝试过使用属性：
columns？例如：layout: hbox, columns: 5 -
@PawełGłowacz 我已经添加了代码。我没有在 hbox 布局的文档中看到列的提及。我刚试了一下，效果完全一样：与第一条记录相比仍有很大差距。
标签： javascript extjs extjs3