PDA

View Full Version : Field label and radio group issue



golly97
31 Jul 2010, 10:08 AM
Hi Guys,

I have a problem of placing my label on the right side of my radio group

What I am looking for:

Yes() No(*) My Label on the right
Yes(*) No() My Label on the right

I though this was a simple thing, but I tried all different things and search all I can and no go so far.

What I have is a Ext.Panel and where i add my radio group on the fly, Everything works fine except the arrangement of my components.


1)
I tried this: this only aligns my field to the right....NO good



new Ext.Panel({
id:'qPanel',
renderTo: 'item1',
width:500,
frame:true,
style:"margin: 10px auto 10px auto;" ,
layout:'form',
hidden: true,
layoutConfig:
{
labelSeparator: ''
}
,labelAlign: 'right'


});


Ext.getCmp('qPanel').add(

new Ext.form.RadioGroup
({
fieldLabel: masterList.descrBundle,
labelStyle: 'width:360px',
width:400,
vertical: false,

id:'questionGroup'+masterList.listId,
items: [

{ xtype:'radio', boxLabel: 'Yes', id:'questionMapYes'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'Y', checked: true, disabled:disabled},
{ xtype:'radio', id:'questionMapNo'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'N', checked: true,disabled:disabled }

]
})

);
2)
I also tired this, but I can't change the width of my radios or my label, but the label is on the rightj.
i try to set my label width to 200 but it's overridden equal values for each item width.



Ext.getCmp('qPanel').add(

new Ext.form.RadioGroup
({
width:400,
vertical: false,

id:'questionGroup'+masterList.listId,
items: [

{ xtype:'radio', boxLabel: 'Yes', id:'questionMapYes'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'Y', checked: true, disabled:disabled},
{ xtype:'radio', id:'questionMapNo'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'N', checked: true,disabled:disabled }
{
xtype:'label',
text: masterList.descrBundle,
width:200,
style:'width:200px'

}
]
})

);
Thank you

Rob

golly97
1 Aug 2010, 8:01 PM
Sweet i got it working.....I hope there is a better solution, but I couldn't wait

here it is

1) I hide the default label (fieldLabel) by using hideLabel:true
2) I add a label in the radio group using xtype:'label'
3) <this was the key> I set the columns attribute on the group component...this set my columns width

at the end, I have my label on the right.
I also had to add some extra logic to vertically align my label...but all is good now

End result

Yes (o) No (o) My label on the right
Yes (o) No (o) My label on the right
Yes (o) No (o) My label on the right
Yes (o) No (o) My label on the right



unction createRadio(masterList, disabled)
{
Ext.getCmp('qPanel').add(

new Ext.form.RadioGroup
({
hideLabel:true,
width:480,
vertical: false,
columns:[.10, .10,.78],
id:'questionGroup'+masterList.listId,
items: [

{ xtype:'radio', boxLabel: 'Yes', id:'questionMapYes'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'Y', checked: true, disabled:disabled},
{ xtype:'radio', boxLabel: 'No', id:'questionMapNo'+masterList.displayOrder, name: 'questionMap['+masterList.listId+']', inputValue: 'N', checked: true,disabled:disabled }
,{
xtype:'label',
text: masterList.descrBundle
,id:'label'+masterList.listId
}

]
})

);
}

Condor
1 Aug 2010, 9:48 PM
You could also have used the fieldLabel for Yes and No and the boxLabel of the No radio for the label.

golly97
1 Aug 2010, 11:15 PM
I don't think I would get the correct layout.
As the box label comes before the radio. So the No Label would not work.
Unless I can control where the box label is gone be (right or left side)?

Robert

Condor
1 Aug 2010, 11:50 PM
I meant:

new Ext.form.RadioGroup({
autoHeight: true,
items: [{
labelWidth: 20,
labelSeparator: '',
items: [{
name: 'question1',
inputValue: 'Y',
fieldLabel: 'Yes',
hideLabel: false,
checked: true
},{
name: 'question2',
inputValue: 'Y',
fieldLabel: 'Yes',
hideLabel: false,
checked: true
}]
},{
labelWidth: 15,
labelSeparator: '',
items: [{
name: 'question1',
inputValue: 'N',
fieldLabel: 'No',
hideLabel: false,
boxLabel: 'Question 1'
},{
name: 'question2',
inputValue: 'N',
fieldLabel: 'No',
hideLabel: false,
boxLabel: 'Question 2'
}]
}]
});

golly97
2 Aug 2010, 9:03 AM
ahh I see. Nice. But I like my better heheh

I didn't know that the nested items would stock up as columns!!!(How would I know that??) I like that. Based on that I can also do this which works well too.



new Ext.form.RadioGroup({
autoHeight: true,
items: [
{ items: [{ xtype:'radio', boxLabel: 'Yes', name: 'qeustion1', inputValue: 'Y', checked: true}],},
{items: [{ xtype:'radio', boxLabel: 'No', name: 'qeustion1', inputValue: 'N', checked: false}]},
{ items: [{xtype:'label', text: 'my lebel' }]}
});