PDA

View Full Version : Elements on Same Line



DirtDog
21 Apr 2009, 10:57 AM
I want to put TextFields, CheckBoxes, and plain text on the same line in a FormPanel.

I searched the forums for an answer. The search results show that several users have asked a similar question. However, when I click on most of the search result links I get a "Page Load Error".

For the links that do work the suggestions are to use a table.

I want the fields to abut one another with a little spacing in between.

Example:

"Please enter your name [TextField], your age [TextField] and select your gender (0) Male or (0) Female"

I reviewed all the config options for TextField and Label fields but I don't see anything which helps me control putting elements in the same line.

DirtDog

21 Apr 2009, 11:11 AM
you need to use a combination of things. The following example from my book explains how to do it (look at the state and zip code fields).
http://tdg-i.com/extjsinaction/chapter05/5.7_building%20two%20fieldsets.html

TopKatz
21 Apr 2009, 11:12 AM
Help would be a better location for this.

I have personally used column layout in the past to do this sort of thing.

Animal
21 Apr 2009, 11:33 AM
The thing about Column layout is that the natural tab index will proceed down each column in turn, not from item to item in the row.

This will become an issue when the new FocusManager is implemented which IIRC, uses the Component's natural order as the order of focus.

DirtDog
21 Apr 2009, 12:01 PM
What would be nice is if one could control whether an element goes on a line or breaks to the next line at the form level or per element (TextField, Label).

In ASP.NET I can put elements on the same line:

<asp:TextBox ...</asp:TextBox>some text<asp:TextBox ...</asp:TextBox>

Or, easily break them onto new lines:

<asp:TextBox ...</asp:TextBox>
<br>some text
<br><asp:TextBox ...</asp:TextBox>

I'm wondering if it makes sense to have a parameter at the Form level like:

freeFlowing: <false | true>

If false then elements are positioned on new lines.
If true then elements are positioned abutting to the last element.

stever
21 Apr 2009, 3:43 PM
This will become an issue when the new FocusManager is implemented which IIRC, uses the Component's natural order as the order of focus.

Is this part of the ARIA stuff that was supposed to hit with 3.0?

Animal
21 Apr 2009, 11:43 PM
Yes, but I think it's going to be 3.1

It's very nice. Total keyboard navigability by walking the Container->Component tree.

TopKatz
22 Apr 2009, 4:47 AM
...spam deleted...

W...T...F :((

Can we get a mod to nuke this joker from orbit?

mjlecomte
22 Apr 2009, 4:52 AM
FYI, in the future don't quote the spam, I had to edit your post to delete the spam also.

DirtDog
22 Apr 2009, 8:35 AM
I punted and created the layout as seen in the attached screenshot.

Instead of trying to make a contiguous sentence with embedded TextFields, Checkboxes I used the normal layout of fields within the form and put in phrases in the place of the usual type of text used for a label.


DirtDog

DirtDog
29 Apr 2009, 10:31 AM
I have a question concerning spacing between items placed on the same line.

First:

I had another area of my application where I wanted to put several items on the same line.

I followed jgarcia's (http://extjs.com/forum/member.php?u=172) example and managed to get this to work.

Here's my code snippet:

var LineHeight = 35;
var SpaceObj = new Ext.form.Label({ text: ' ', width: 10 });
var SetSpaceObj = new Ext.form.FieldSet({ border: false, height: LineHeight, id: 'SetSpace', items: [SpaceObj], labelWidth: 40, width: 10 });

var LeadIdObj = new Ext.form.TextField({ fieldLabel: 'LeadId', id: 'LeadId', name: 'LeadId', readOnly: true, width: 50 });

var ScoreObj = new Ext.form.TextField({ fieldLabel: 'Score', id: 'Score', name: 'Score', readOnly: true, width: 30 });

var AdDateObj = new Ext.form.TextField({ fieldLabel: 'Ad Date', id: 'AdDate', name: 'AdDate', readOnly: true, width: 200 });

var StatusObj = new Ext.form.TextField({ fieldLabel: 'Status', id: 'LeadStatus', name: 'LeadStatus', readOnly: true, width: 100 });

var SetLeadIdObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetLeadId', items: [LeadIdObj], labelWidth: 40 });
var SetScoreObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetScore', items: [ScoreObj], labelWidth: 40 });
var SetAdDateObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetAdDate', items: [AdDateObj], labelWidth: 55 });
var SetStatusObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetStatus', items: [StatusObj], labelWidth: 40 });
var LineObj = new Ext.Panel({ border: false, height: 30, id: 'LeadFormLine', items: [SetLeadIdObj, SetSpaceObj, SetScoreObj, SetAdDateObj, SetStatusObj], layout: 'column' });

FormObj.add(LineObj);


If you look at the screenshot you'll notice there is no spacing between the FieldSets. I thought I'd add a label with a space wrapped by a fieldset to adding some spacing. But that didn't work. I tried adding or increasing the width on the space label and the space fieldset but no joy.

Any ideas?

Ed

29 Apr 2009, 10:37 AM
Using a fieldset that many times is very wasteful. The example from my book was just to learn about fieldsets. you should be using containers. I'm examining your code and will get back to you.

29 Apr 2009, 10:49 AM
try:


new Ext.Window({
height : 150,
width : 550,
layout : 'column',
defaults : {
width : 100,
labelWidth : 40,
defaultType : 'field',
defaults : { //yeah you can do this too!
width : 75
}
},
items : [
{
xtype : 'container',
layout : 'form',
items : {
fieldLabel : 'LeadId',
width : 50
}
},
{
xtype : 'container',
layout : 'form',
items : {
fieldLabel : 'Score',
width : 50
}
},
{
xtype : 'container',
layout : 'form',
width : 175,
labelWidth : 50,
items : {
fieldLabel : 'Ad Date',
width : 110
}
},
{
xtype : 'container',
layout : 'form',
width : 160,
items : {
fieldLabel : 'Status',
width : 75
}
}
]
}).show()

Btw, most english teachers would say runon sentences are a no-no for the written language. The same goes for code.

DirtDog
29 Apr 2009, 10:57 AM
Garcia,

I tried using containers based on your original example. I ran into exceptions deep inside the ExtJs code. In fact I tried 3-4 different variations and I kept running into exceptions. I didn't have the desire to spend several hours debugging the ExtJs code.

Once I got the code working with FieldSets I was relieved.

I appreciate your new example, but I'm reluctant to change the code because (I don't want to seem like a complainer but) it takes me several hours to figure out a solution to what I think I should be able to do in a short time frame.


Ed

29 Apr 2009, 10:58 AM
fieldsets extend panel, which is heavy. To achieve that layout in a better-performing way i would say the container is the best examle.

This stuff will get easier for you once you get layouts and stuff down pat.

have you see my container and layout screencasts?

DirtDog
29 Apr 2009, 11:46 AM
Garcia,

I changed my code to use containers per your suggestion. I run into an exception.

Update code to use Containers:

var LineHeight = 35;
var SpaceObj = new Ext.form.Label({ text: ' ', width: 10 });
var SetSpaceObj = new Ext.Container({ border: false, height: LineHeight, id: 'SetSpace', items: [SpaceObj], width: 10 });

var LeadIdObj = new Ext.form.TextField({ fieldLabel: 'LeadId', id: 'LeadId', name: 'LeadId', readOnly: true, width: 50 });

var ScoreObj = new Ext.form.TextField({ fieldLabel: 'Score', id: 'Score', name: 'Score', readOnly: true, width: 50 });

var AdDateObj = new Ext.form.TextField({ fieldLabel: 'Ad Date', id: 'AdDate', name: 'AdDate', readOnly: true, width: 110 });

var StatusObj = new Ext.form.TextField({ fieldLabel: 'Status', id: 'LeadStatus', name: 'LeadStatus', readOnly: true, width: 175 });

var SetLeadIdObj = new Ext.Container({height: LineHeight, id: 'SetLeadId', items: [LeadIdObj], layout: 'form' });
var SetScoreObj = new Ext.Container({ height: LineHeight, id: 'SetScore', items: [ScoreObj], layout: 'form' });
var SetAdDateObj = new Ext.Container({ height: LineHeight, id: 'SetAdDate', items: [AdDateObj], layout: 'form', width: 175 });
var SetStatusObj = new Ext.Container({ height: LineHeight, id: 'SetStatus', items: [StatusObj], layout: 'form', width: 160 });
var LineObj = new Ext.Panel({
defaults: {
width: 100,
labelWidth: 40,
defaultType: 'field',
defaults: { width: 75}
},
height: 150,
id: 'LeadFormLine',
items: [SetLeadIdObj,
SetScoreObj,
SetAdDateObj,
SetStatusObj],
layout: 'column',
width: 550
});


I get an exception on this line:
rz.setSize(aw, ah);

"Microsoft JScript runtime error: 'undefined' is null or not an object"

In the following ExtJs code:

setSize : function(w, h){
if(typeof w == 'object'){
h = w.height;
w = w.width;
}
if(!this.boxReady){
this.width = w;
this.height = h;
return this;
}

if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
return this;
}
this.lastSize = {width: w, height: h};
var adj = this.adjustSize(w, h);
var aw = adj.width, ah = adj.height;
if(aw !== undefined || ah !== undefined){ var rz = this.getResizeEl();
if(!this.deferHeight && aw !== undefined && ah !== undefined){
rz.setSize(aw, ah);
}else if(!this.deferHeight && ah !== undefined){
rz.setHeight(ah);
}else if(aw !== undefined){
rz.setWidth(aw);
}
this.onResize(aw, ah, w, h);
this.fireEvent('resize', this, aw, ah, w, h);
}
return this;
},

The fields I want on one line are placed into a FormPanel.

The FormPanel goes into a Center of a BorderLayout.
The BorderLayout is in a CardLayout.
The CardLayout is in a BorderLayout.
The BorderLayout is in a Window.

Ed

29 Apr 2009, 11:48 AM
What's a "LayoutPanel"?

DirtDog
29 Apr 2009, 11:57 AM
I meant to type BorderLayout.

29 Apr 2009, 12:00 PM
some thoughts:
- Please consider using standard javascript formatting.
- Defaults is meant to be used when using xtypes
- With this implementation, any width being applied to an instance of a class is being overridden by the defaults object, whereas if you used xtypes the width would be honored (as demonstrated in my example);
- It seems you're trying to do way too much at one time. You need to further abstract your problem to help narrow it down. it's hard for me to assist any further as I can get this layout to work.
- Consider using XTypes as your could would look much cleaner
- Consider using standard JavaScript variable capitalization
- Consider dropping the noun "Obj" from your references. SetScoreObj is more meaningful if it was scoreContainer.

DirtDog
29 Apr 2009, 12:50 PM
Garcia,

I appreciate your help. I understand your suggestions concerning the JavaScript formatting. However, I felt they were cosmetic in nature and didn't get at the real problem.

I played around with this some more and discovered if I added some margins like this:

style: 'margin: 0px 15px 0px 0px'

to the fieldsets then I got the spacing I wanted between the elements in the same line.

I understand you said the Container approach was quicker then the FieldSet approach.
Yes the code may be quicker but I'm expending huge amounts of my time trying to get that to actually work. What's quicker (in terms of my time) right now is for me to use the FieldSets approach.

Thanks for your help,

DirtDog

29 Apr 2009, 12:58 PM
DirtDog,

The suggestings regarding formatting are not merely cosmetic, they help others read your code.

Good luck :)

sj137
22 May 2009, 6:45 AM
edit:sorry wrong forum... i'm using this in ext2.2

horrible dirty (but simple to understand) hack which worked well enough for my own use, so sharing in case it's useful to anyone else




var newField = new Ext.form.TextField({value:value,grow:true,hideLabel:true,checked:false});
newField.on('render', function(cmp) {
var checkbox = cmp.container.insertFirst({tag:'input',type:'checkbox'});
checkbox.on('click', function() {
newField.checked = !newField.checked;
});
});