我想在ExtJs中创建一个带有标签和复选框的表格式结构。通常情况下，我会使用带有布局的面板＆＃39; vbox＆＃39;堆叠一系列面板与布局＆＃39; hbox＆＃39;。这样我得到了一个结构：
vbox
|
\|/
John Doe [] [] [] [] <- hbox
Jane Doe [] [] [] [] <- hbox
记录是从数据源动态加载的。这意味着我无法使用＆＃39;表格＆＃39;无论如何都要弃用的布局。
＆＃39; vbox＆＃39;但是不能很好地处理溢出。它只是剪辑它，虽然我想要滚动条。因此，我选择了布局＆＃39; fit＆＃39;，目前正在扩大适应性。面板，以便它适应所有记录。这将和滚动条一样，如果我指定高度，我可能会得到它。
我想在元素周围填充，当我添加它时，它会出错。第一条记录的规模扩大了很多。
大小来自以下元素的页面：
div class="x-panel-body x-panel-body-noheader x-box-layout-ct" id="ext-gen82" style="width: 1621px; height: 2680px;"
我有一个10px和135个记录的填充，所以看起来高度是两个方向上填充的134倍。
我试图保留＆＃39; vbox＆＃39;面板并将其包裹在一个“适合”的面板中。面板，但仍然创建了空白空间并破坏了布局。
我在应用程序的其他地方遇到了类似的问题，而且我已经开展了很多天的工作。我非常感谢任何帮助！
以下要求的代码
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();
}
}
});
答案 0 :(得分：0)
试
layout: {
type: 'hbox',
align: 'stretch'
}
并添加
flex: 1
进入每个“项目”
答案 1 :(得分：0)
我设法解决了！具有讽刺意味的是，当我将页面尽可能多地带回基础时，就发生了这种情况。我删除了布局：＆＃39; fit＆＃39;根本没有布局。然后我在hbox面板上添加了一个填充。
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", "Relatie") %>' }),
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 serverMaintenanceId = rec.get('Id') == null ? null : rec.get('Id');
var relationServerId = rec.get('RelationServerId');
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: { type: 'hbox' },
padding: 4,
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({ 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: 'idx_' + i, value: rec.get('Index') }),
new Ext.form.Hidden({ id: 'hfRelationServer_' + i, value: relationServerId }),
new Ext.form.Hidden({ id: 'hfServerMaintenanceId_' + i, value: serverMaintenanceId }),
new Ext.form.Hidden({ id: 'hfRelation_' + i, value: relationId })
]
}));
}
// debugger;
pnlRelations.doLayout();
}
}