[英]How to set auto height for extjs hbox layout?
我有这个布局,一旦我设置一些数据动态布局不调整大小,最终结果是这样的
这是我正在使用的代码
win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
width: 750,
height: 500,
layout: 'fit',
animCollapse: true,
bodyPadding: 5,
items: [{
xtype: 'container',
layout: 'hbox',
align: 'stretch',
items: [{
xtype: 'fieldset',
flex:1,
title: 'Details',
margins:'0 5 0 0',
layout: 'anchor',
autoHeight: true,
items: [{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'customer_name',
id: 'customer_name',
width: 300
},{
xtype: 'displayfield',
fieldLabel: 'ID Card',
id: 'customer_id',
name: 'customer_id',
width: 300
},{
xtype: 'displayfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
width: 300
}]
},{
xtype: 'fieldset',
title: 'Details',
margins:'0 0 5 0',
flex:1,
layout: 'anchor',
autoHeight: true,
items: [{
xtype: 'textfield',
labelWidth: 120,
fieldLabel: 'invoice',
anchor: '98%',
name: 'invoice_number',
id: 'invoice_number',
allowBlank: false,
readOnly: true
},{
xtype: 'textfield',
labelWidth: 120,
fieldLabel: 'Payment Amount',
anchor: '98%',
name: 'payment_amount',
id: 'payment_amount',
allowBlank: false
},{
xtype: 'button',
id: 'test'
}]
}]
}]
}).show();
这个,我只是用来设置数据来显示字段作为测试
Ext.getCmp('test').on('click', function(){
Ext.getCmp('customer_name').setValue('customer name customer_name customer_name customer_name');
Ext.getCmp('customer_id').setValue('855');
Ext.getCmp('address').setValue('some text, some text, some text, some text');
});
任何想法如何解决这个问题?
问候
首先,这是一个快速入侵,它将使您的字段集在左侧自动扩展内容的长度:
在设置显示字段集的内容后,执行以下操作:
win.query('fieldset')[0].setHeight('auto');
没有太多修改,这是一个例子: jsfiddle
( query
是继承Ext.Component
所有组件的全局可用方法,用于查询下面的项目,如css选择器)
额外注意
有几点需要注意:
要使用align:'stretch'
,您不能将其作为组件的直接配置提供,您需要这样做:
Ext.create('Ext.panel.Panel', { layout: { type: 'hbox', align: 'stretch' }, items: [...] });
您需要查看此测试演示 。 第一个窗口将按预期工作,而第二个和第三个窗口无法拉伸面板。
其次, autoHeight
自ExtJS 4以来已被删除,因此在您的配置中被忽略。 您可能需要使用setHeight('auto')
手动使其成为autoHeight。
编辑
似乎使用column
布局可以在不使用setHeight('auto')
情况下实现相同的效果。 看看这里的小提琴 。
干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.