/*
* - LGPL
*
- * Radio
- *
- *
- * not inline
- *<div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
- Option one is this and that—be sure to include why it's great
- </label>
-</div>
- *
- *
- *inline
- *<span>
- *<label class="radio-inline">fieldLabel</label>
- *<label class="radio-inline">
- <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
-</label>
-<span>
- *
+ * RadioItem
*
*/
/**
* @class Roo.bootstrap.Radio
- * @extends Roo.bootstrap.CheckBox
+ * @extends Roo.bootstrap.Component
* Bootstrap Radio class
-
+ * @cfg {String} boxLabel - the label associated
+ * @cfg {String} value - the value of radio
+ *
* @constructor
* Create a new Radio
* @param {Object} config The config object
*/
-
Roo.bootstrap.Radio = function(config){
Roo.bootstrap.Radio.superclass.constructor.call(this, config);
-
+
};
-Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox, {
+Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
+
+ boxLabel : '',
- inputType: 'radio',
- inputValue: '',
- valueOff: '',
+ value : '',
getAutoCreate : function()
{
- var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
- align = align || 'left'; // default...
-
-
-
- var id = Roo.id();
-
var cfg = {
- tag : this.inline ? 'span' : 'div',
- cn : []
+ tag : 'div',
+ cls : 'form-group radio',
+ cn : [
+ {
+ tag : 'label',
+ cls : 'box-label',
+ html : this.boxLabel
+ }
+ ]
};
- var inline = this.inline ? 'radio-inline' : '';
-
- var lbl = {
- tag: 'label' ,
- // does not need for, as we wrap the input with it..
- cls : 'control-label ' + inline,
- html : boxLabel,
- cn : []
- };
-
- var fieldLabel = {
- tag: 'label' ,
- cls : 'control-label' + inline,
- html : this.fieldLabel
- }
-
-
-
-
- var input = {
- tag: 'input',
- id : id,
- type : this.inputType,
- //value : (!this.checked) ? this.valueOff : this.inputValue,
- value : this.inputValue,
- cls : 'roo-radio',
- placeholder : this.placeholder || '' // ?? needed????
-
- };
- if (this.weight) { // Validity check?
- input.cls += " radio-" + this.weight;
- }
- if (this.disabled) {
- input.disabled=true;
- }
-
- if(this.checked){
- input.checked = this.checked;
- }
-
- if (this.name) {
- input.name = this.name;
- }
-
- if (this.size) {
- input.cls += ' input-' + this.size;
- }
-
- //?? can span's inline have a width??
-
- var settings=this;
- ['xs','sm','md','lg'].map(function(size){
- if (settings[size]) {
- cfg.cls += ' col-' + size + '-' + settings[size];
- }
- });
-
- var inputblock = input;
-
- if (this.before || this.after) {
-
- inputblock = {
- cls : 'input-group',
- tag : 'span',
- cn : []
- };
- if (this.before) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.before
- });
- }
- inputblock.cn.push(input);
- if (this.after) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.after
- });
- }
-
- };
-
-
- if (this.fieldLabel && this.fieldLabel.length) {
- cfg.cn.push(fieldLabel);
- }
-
-
- if (align ==='left' && this.fieldLabel.length) {
- Roo.log("left and has label");
-
-
-
- cfg.cn = [
-
- lbl,
- {
- tag: 'span',
- cls : 'radio-inline',
- cn: [
- inputblock
- ]
- }
-
- ];
- } else if ( this.fieldLabel.length) {
- Roo.log(" label");
- lbl.cls = '';
-
- cfg.cn = [ lbl, inputblock ];
-
- } else {
-
- Roo.log(" no label && no align");
- cfg.cn = [
-
- inputblock
-
- ];
-
-
- };
-
- if(this.boxLabel){
- cfg.cn.push({
- tag: 'label',
- 'for': id,
- cls: 'box-label',
- html: this.boxLabel
- })
- }
-
return cfg;
-
- },
- inputEl: function ()
- {
- return this.el.select('input.roo-radio',true).first();
- },
- onClick : function()
- {
- Roo.log("click");
- Roo.log("click");
- this.setChecked(true);
},
- setChecked : function(state,suppressEvent)
+ initEvents : function()
{
- if(state){
- Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
- v.dom.checked = false;
- });
- }
+ this.parent().register(this);
- this.checked = state;
- this.inputEl().dom.checked = state;
+ this.el.on('click', this.onClick, this);
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ },
+
+ onClick : function(e)
+ {
+ if(this.parent().fireEvent('click', this.parent(), this, e) !== false){
+ this.setChecked(true);
}
-
- //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
-
},
- getGroupValue : function()
+ setChecked : function(state, suppressEvent)
{
- var value = ''
- Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
- if(v.dom.checked == true){
- value = v.dom.value;
- }
- });
+ this.parent().setValue(this.value, suppressEvent);
- return value;
},
- /**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
- */
- getValue : function(){
- return this.getGroupValue();
+ setBoxLabel : function(v)
+ {
+ this.boxLabel = v;
+
+ if(this.rendered){
+ this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
+ }
}
});
-
+
+
\ No newline at end of file