View Full Version : Beginner's Question

28 Apr 2012, 1:04 PM
Hi All,

Thanks for providing this support. I am new to this technology and already have started reading documentation, writing examples. Examples and documentation are terrific but still I am facing some issues.

Q1: How could I increase the space between label and textfield? Should I use padding?
Q2: Taking from design view while creating a form should I use container then is all the elements to it? Or as per need I should have multiple containers?

Pardon me if this question has already been asked as I am a newbie.

Please provide some solution.


28 Apr 2012, 8:35 PM
1) See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-labelWidth
2) Don't understand the question.

28 Apr 2012, 8:50 PM
2) as a general rule have an outer container, place your elements into this. If you have more complicated forms you can put containers inside your containers to create logical/display groups for related elements.

29 Apr 2012, 12:30 AM
multiple containers will slow down the page rendering!
read about layouts (http://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containers)

29 Apr 2012, 8:32 AM
Hi Slemmon and others, Thanks for posting the reply my requirement is like this :

Label1 : Textfield1
Label2 : Textfield2
Label3 : Textfield3

So what is happening currently Textfield4 & 5 are starting from just below the Lable3 making Textfield3 shifeted towards left. I have to keep Textfield4 & 5 intact as given above(Have put dots to keep it right otherwise it is coming left, so dots are spaces in screen).

So suggest me what should I do?


29 Apr 2012, 10:28 AM
Use this (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-hideEmptyLabel) property!

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Textfield1'
}, {
fieldLabel: 'Textfield2',
xtype: 'textfield'
}, {
fieldLabel: 'Textfield3',
xtype: 'textfield'
}, {
xtype: 'textfield',
hideEmptyLabel : false
}, {
xtype: 'textfield',
hideEmptyLabel : false

29 Apr 2012, 10:46 AM
Thank You Chramer. This helps.