我有这个布局,一旦设置一些数据动态布局不调整大小,最终的结果就是这样
这是代码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');
(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.
干杯!
