PDA

View Full Version : Beginner's Question



shivkant84
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.

Thanks
Shivkant

slemmon
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.

gnube
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.

chramer
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)

shivkant84
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
.............Textfield4
.............Textfield5

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?

Thanks,
Shivknat

chramer
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
}]
});

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