PDA

View Full Version : [4.1.1] How to align textfield with combobox/datefield?



Ex_Soft
17 Nov 2012, 4:40 AM
Textfield isn't aligned with combobox/datefield:


Ext.onReady(function() {
Ext.QuickTips.init();

Ext.create("Ext.window.Window", {
title: "Test Ext.layout.container.Anchor",
autoShow: true,
layout: "fit",
border: 0,
items:[{
xtype: "form",
frame: true,
bodyStyle: "padding: 5px 0 0 0",
items: [{
xtype: "textfield",
fieldLabel: "textfield",
anchor: "100%"
}, {
xtype: "combobox",
fieldLabel: "combobox",
anchor: "100%"
}, {
xtype: "datefield",
fieldLabel: "datefield",
anchor: "100%"
}]
}]
});
});

http://jsfiddle.net/ZgcAS/1/

P.S. BTW, textfield is aligned if window will be resized.

sword-it
17 Nov 2012, 4:52 AM
Hi Ext_soft,

Give width config to the window container.

vietits
17 Nov 2012, 4:56 AM
Try this:


Ext.onReady(function(){
Ext.create("Ext.window.Window", {
title: "Test Ext.layout.container.Anchor",
autoShow: true,
layout: "fit",
border: 0,
items:[{
xtype: "form",
frame: true,
bodyStyle: "padding: 5px 0 0 0",
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: "textfield",
fieldLabel: "textfield",
//anchor: "100%"
}, {
xtype: "combobox",
fieldLabel: "combobox",
//anchor: "100%"
}, {
xtype: "datefield",
fieldLabel: "datefield",
//anchor: "100%"
}]
}]
});
});

Ex_Soft
17 Nov 2012, 6:03 AM
Try this:


...
layout: {
type: 'vbox',
align: 'stretch'
},
...

This is simple example. I've been trying to use this layout. But in real application, where form is more complex, it doesn't work.