When I try to dynamically set data in this layout, the layout doesn't resize properly and the final result looks like this.
This is the code I'm currently using:
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();
I've used the above code snippet to set data for display fields as a test.
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');
});
Any suggestions on how to resolve this issue would be greatly appreciated.
Warm Regards