[Solved]Ext.form.RadioButtons / cls-config --> the style does not change

[Charlyva]

Hi. I've created a RadioGroup and added a style-rule by the cls-config. Don't know why, but the style do not adapt on my radiobuttons. :( Forumsearch brought no further information for me. sad to say.

I guess, thats a simple thing. I would be truly grateful, if you look at my code and give me a hint whats going wrong.

Ext.onReady(function(){...

//---------WESTBOX - Im Norden steht die Filiale und der Modus, im Süden die Actions---

//erstellen einer Radiogroup, in der festgelegt ist, welche Aktion auf die Grid ausgeübt werden soll.
var rdienst = new Ext.form.Radio({
id:'dienst-planen',
inputValue:'d',
xtype:'radio',
checked:true,
boxLabel:'Dienst',
name:'menugroup',
cls:'radiobox'
});

var rkrank = new Ext.form.Radio({
id:'krankenstand',
inputValue:'k',
cls:'radiobox',
xtype:'radio',
boxLabel:'Krankenstand',
name:'menugroup'
});

var rurlaub = new Ext.form.Radio({
id:'urlaub',
inputValue:'u',
cls:'radiobox',
xtype:'radio',
boxLabel:'Urlaub',
name:'menugroup'
});

var rseminar = new Ext.form.Radio({
id:'seminar',
inputValue:'s',
cls:'radiobox',
xtype:'radio',
boxLabel:'Seminar',
name:'menugroup'
});

var rfeiert = new Ext.form.Radio({
id:'feiertag',
inputValue:'f',
cls:'radiobox',
xtype:'radio',
boxLabel:'Feiertag',
name:'menugroup'
});

var rtagneu = new Ext.form.Radio({
id:'tag-neu',
inputValue:'t',
cls:'radiobox',
xtype:'radio',
boxLabel:'Tag neu',
name:'menugroup'
});

var rloesch = new Ext.form.Radio({
id:'loeschen',
inputValue:'l',
cls:'radiobox',
xtype:'radio',
boxLabel:'Löschen',
name:'menugroup'
});

//Der Button im Westen, der die ausgewählte Aktion in den Radiobuttons auf den markierten Teil der Grid anwendet.
var buttonplan = new Ext.Button({
minWidth: 100,
cls:'westbutton',
handler: function(){Ext.Msg.alert('Click','Sie haben auf "Planen" gedrückt.');},
text:'Planen...'
});

//Der Container für den Actionbereich (Radiogroup + Button) im Westen
var actions = new Ext.Panel({
region:'center',
title:'Actions',
border:false,
items:[rdienst,rkrank,rurlaub,rseminar,rfeiert,rtagneu,rl oesch,buttonplan]
});

}

CSS:

.radiobox {
margin:8;
padding:0;
font-size:10pt;
vertical-align: middle;
}


.westbutton {
margin:10;
font-size:10pt;
padding:0;
}


Look at this. No margins defined...
http://pep.rockt.it

Greets,
Mike


PS: I've just recognised, that the checkbox with the "checked:true" config is not checked, but the last one is instead. Highlighted it blue.

[Condor]

The radiobox class is applied to the <INPUT type="radio">. But, looking at the styling, you rather want it applied to the surrounding <DIV>.

You could do that by adding a class to the panel (e.g. cls:radiobox) and define the style rule as:

.radiobox .x-form-check-wrap {
margin:8;
padding:0;
font-size:10pt;
vertical-align: middle;
}

[Charlyva]

thx for the quick reply. done like you recommended, but no succes yet.
do you mean i have to add the cls to the panel, holding the radiobuttons? Like that?


//erstellen einer Radiogroup, in der festgelegt ist, welche Aktion auf die Grid ausgeübt werden soll.
var rdienst = new Ext.form.Radio({
id:'dienst-planen',
inputValue:'d',
xtype:'radio',
checked:true,
boxLabel:'Dienst',
name:'menugroup'
//cls:'radiobox'
});

var rkrank = new Ext.form.Radio({
id:'krankenstand',
inputValue:'k',
//cls:'radiobox',
xtype:'radio',
boxLabel:'Krankenstand',
name:'menugroup'
});

var rurlaub = new Ext.form.Radio({
id:'urlaub',
inputValue:'u',
//cls:'radiobox',
xtype:'radio',
boxLabel:'Urlaub',
name:'menugroup'
});

var rseminar = new Ext.form.Radio({
id:'seminar',
inputValue:'s',
//cls:'radiobox',
xtype:'radio',
boxLabel:'Seminar',
name:'menugroup'
});

var rfeiert = new Ext.form.Radio({
id:'feiertag',
inputValue:'f',
//cls:'radiobox',
xtype:'radio',
boxLabel:'Feiertag',
name:'menugroup'
});

var rtagneu = new Ext.form.Radio({
id:'tag-neu',
inputValue:'t',
//cls:'radiobox',
xtype:'radio',
boxLabel:'Tag neu',
name:'menugroup'
});

var rloesch = new Ext.form.Radio({
id:'loeschen',
inputValue:'l',
//cls:'radiobox',
xtype:'radio',
boxLabel:'L&ouml;schen',
name:'menugroup'
});

//Der Button im Westen, der die ausgewählte Aktion in den Radiobuttons auf den markierten Teil der Grid anwendet.
var buttonplan = new Ext.Button({
minWidth: 100,
//cls:'westbutton',
handler: function(){Ext.Msg.alert('Click','Sie haben auf "Planen" gedrückt.');},
text:'Planen...'
});

//Der Container für den Actionbereich (Radiogroupt + Button) im Westen
var actions = new Ext.Panel({
region:'center',
title:'Actions',
cls:'radiobox',
border:false,
items:[rdienst,rkrank,rurlaub,rseminar,rfeiert,rtagneu,rl oesch,buttonplan]
});



.radiobox .x-form-check-wrap{
margin:8;
padding:0;
font-size:10pt;
vertical-align: middle;
}


By the way: Where can I find things like "x-form-check-wrap" or ".x-grid3-hd-my-id"?
never seen in the api or anything...

:D great day!

[Condor]

Correct (try changing the font-size to check if it works).

You can use Firefox with Firebug to look at the rendered HTML dom structure and see which classes are applied. Firebug also allows you to temporarily alter the styles to do a 'what if'.

[Charlyva]

Condor, you saved my javascriptet live for 2 times the last 2 days :D thank you for that.

Font-Size-changing does effect the radioboxes.
x-form-check-wrap is the css class of the <div> elements, where the radio-<input> tags are inside. so far so good. i'm starting to understand. ;)
but my intension is, to increase the space between the single checkboxes. But setting margins does not take any effect. maybe i'm overlooking a detail?

simplified:

<div id:"aaa" class:"radiobox">
<div id:"1" class:"x-form-check-wrap">
<input id:"a" class:"x-form-radio">
</div>
<div id:"2" class:"x-form-check-wrap">
<input id:"b" class:"x-form-radio">
</div>
<div id:"3" class:"x-form-check-wrap">
<input id:"c" class:"x-form-radio">
</div>
</div>



.radiobox .x-form-check-wrap{
margin:8;
padding:0;
font-size:10pt;
vertical-align: middle;
}

[Condor]

Setting margin to 8 isn't valid. You also have to specify the unit (e.g. 8px).

[Charlyva]

oh no! THAT WAS THE PROBLEM! FROM THE BEGINNING!!!!!
quite cool --> starting the new year feeling very silly!!
thank you.
fg