PDA

View Full Version : Group the element



sandy52
4 Feb 2014, 9:06 PM
Hi,

How can i group the element on a form like :47814

Thanks & Regards,
Sandeep K Tathe

palakurthivishal
4 Feb 2014, 9:42 PM
Hello sandy52,
Try this snippet.

{ xtype: 'form',
layout: 'column',
items: [{
columnWidth: 0.3,
xtype: 'container'
layout: 'fit',
items: [{
xtype: 'label',
text: 'Address'
}, {
xtype: 'container',
layout: 'vbox',
items: [{
xtype: 'textfield',
emptyText: 'Street Address'
}, {
xtype: 'textfield',
emptyText: 'Apt, Suite Number'
}, {
xtype: 'container',
layout: 'column',
defaults: {
columnWidth: 0.33
},
items: [{
xtype: 'textfield',
emptyText: 'X'
},{
xtype: 'textfield',
emptyText: 'Y'
},{
xtype: 'textfield',
emptyText: 'Z'
}]
}]
}]
}]
}

sandy52
4 Feb 2014, 10:21 PM
Hi,

i want to use fieldcontainer like:


{
xtype: 'fieldcontainer', fieldLabel: 'Name', layout: 'hbox', combineErrors: true,
fieldDefaults: {
msgTarget:'under'
},
defaultType: 'textfield',
defaults: {
hideLabel: 'true',
minHeight: 30,
// margin:5
},
items: [
{ name: 'FirstName', flex: 2, emptyText: 'First Name', allowBlank: true },
{ name: 'MiddleName', flex: 2, emptyText: 'Middle Name' },
{ name: 'LastName', flex: 2, emptyText: 'Last Name' },


]
}

palakurthivishal
4 Feb 2014, 10:44 PM
Hello Sandy,
You can use any container to achieve it. One thing to point is, I don't think hidelabel property leaves that label space empty.

sandy52
4 Feb 2014, 10:47 PM
Hi palakurthivishal (http://www.sencha.com/forum/member.php?606961-palakurthivishal) ,
yeah right. but when try your code it show textbox below a label not like the image showing, how can i do that

palakurthivishal
5 Feb 2014, 12:55 AM
Hello Sandy,
Sorry I missed out the proper layout in a hurry. Try this,

Ext.create('Ext.Panel', { width: 500,
height: 400,
title: "VBoxLayout Panel",
layout: {
type: 'column'
},
renderTo: document.body,
items: [{
columnWidth: 0.3,
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'label',
text: 'Address'
}]
}, {
columnWidth: 0.7,
xtype: 'container',
layout: 'vbox',
items: [{
xtype: 'textfield',
emptyText: 'Street Address'
}, {
xtype: 'textfield',
emptyText: 'Apt, Suite Number'
}, {
xtype: 'container',
layout: 'column',
defaults: {
columnWidth: 0.33
},
items: [{
xtype: 'textfield',
emptyText: 'X'
}, {
xtype: 'textfield',
emptyText: 'Y'
}, {
xtype: 'textfield',
emptyText: 'Z'
}]
}]
}]
});

sandy52
5 Feb 2014, 12:59 AM
Thanks dude.........../:) \:D/

now i want to give bottom border to each field.... How can i do that:-?

palakurthivishal
5 Feb 2014, 5:37 AM
Hello Sandy,
Try this,

{ xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
fieldStyle : {
borderBottom : '1px solid #000'
},
vtype: 'email' // requires value to be a valid email address format
}