javascript – 如何为extjs hbox布局设置自动高度？

我有这个布局,一旦设置一些数据动态布局不调整大小,最终的结果就是这样

这是代码im使用

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',fieldLabel: 'Address',name: 'address',id: 'address',width: 300
                                }]                        
                      },{
                          xtype: 'fieldset',margins:'0 0 5 0',items: [{
                                    xtype: 'textfield',labelWidth: 120,fieldLabel: 'invoice',anchor: '98%',name: 'invoice_number',id: 'invoice_number',allowBlank: false,readOnly: true
                                },{
                                    xtype: 'textfield',fieldLabel: 'Payment Amount',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');
});

任何想法如何解决这个问题？

问候

解决方法

首先,这是一个快速的黑客攻击,这将使您的字段集在左侧自动扩展内容的长度：

在设置显示字段集的内容之后,请执行以下操作：

win.query('fieldset')[0].setHeight('auto');

没有太多的修改,这是例子：jsfiddle

(query是继承Ext.Component的所有组件的全局可用方法,用于查询下面的项目,如css选择器)

额外的注意事项

需要注意的几件事情

>要使用align：’stretch’,您不能将其作为组件的直接配置提供,您将需要执行此操作：

Ext.create('Ext.panel.Panel',{
    layout: {
        type: 'hBox',align: 'stretch'
    },items: [...]
});

您将需要check out this testing demo.第一个窗口将按预期工作,而第二个和第三个窗口无法拉伸面板.
>其次,自从ExtJS 4以来,AutoHeight已经被删除了,所以在你的配置中被忽略.您可能需要使用setHeight(‘auto’)手动进行autoHeight操作.

编辑

似乎使用列布局可以实现相同的效果,而不使用setHeight(‘auto’). Check out the fiddle here.

干杯!

原文地址：https://www.jb51.cc/js/155042.html