4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 * @class Roo.form.Checkbox
13 * @extends Roo.form.Field
14 * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
16 * Creates a new Checkbox
17 * @param {Object} config Configuration options
19 Roo.form.Checkbox = function(config){
20 Roo.form.Checkbox.superclass.constructor.call(this, config);
24 * Fires when the checkbox is checked or unchecked.
25 * @param {Roo.form.Checkbox} this This checkbox
26 * @param {Boolean} checked The new checked value
32 Roo.extend(Roo.form.Checkbox, Roo.form.Field, {
34 * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
36 focusClass : undefined,
38 * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
40 fieldClass: "x-form-field",
42 * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
46 * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
47 * {tag: "input", type: "checkbox", autocomplete: "off"})
49 defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
51 * @cfg {String} boxLabel The text that appears beside the checkbox
55 * @cfg {String} inputValue The value that should go into the generated input element's value attribute
59 * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
61 valueOff: '0', // value when not checked..
63 actionMode : 'viewEl',
66 itemCls : 'x-menu-check-item x-form-item',
67 groupClass : 'x-menu-group-item',
71 inSetChecked: false, // check that we are not calling self...
73 inputElement: false, // real input element?
74 basedOn: false, // ????
76 isFormField: true, // not sure where this is needed!!!!
78 onResize : function(){
79 Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
81 this.el.alignTo(this.wrap, 'c-c');
85 initEvents : function(){
86 Roo.form.Checkbox.superclass.initEvents.call(this);
87 this.el.on("click", this.onClick, this);
88 this.el.on("change", this.onClick, this);
92 getResizeEl : function(){
96 getPositionEl : function(){
101 onRender : function(ct, position){
102 Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
104 if(this.inputValue !== undefined){
105 this.el.dom.value = this.inputValue;
108 //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
109 this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
110 var viewEl = this.wrap.createChild({
111 tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
112 this.viewEl = viewEl;
113 this.wrap.on('click', this.onClick, this);
115 this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
116 this.el.on('propertychange', this.setFromHidden, this); //ie
121 this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
122 // viewEl.on('click', this.onClick, this);
125 this.setChecked(this.checked);
127 //this.checked = this.el.dom;
133 initValue : Roo.emptyFn,
136 * Returns the checked state of the checkbox.
137 * @return {Boolean} True if checked, else false
139 getValue : function(){
141 return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
143 return this.valueOff;
148 onClick : function(){
152 this.setChecked(!this.checked);
154 //if(this.el.dom.checked != this.checked){
155 // this.setValue(this.el.dom.checked);
160 * Sets the checked state of the checkbox.
161 * On is always based on a string comparison between inputValue and the param.
162 * @param {Boolean/String} value - the value to set
163 * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
165 setValue : function(v,suppressEvent){
168 //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
169 //if(this.el && this.el.dom){
170 // this.el.dom.checked = this.checked;
171 // this.el.dom.defaultChecked = this.checked;
173 this.setChecked(String(v) === String(this.inputValue), suppressEvent);
174 //this.fireEvent("check", this, this.checked);
177 setChecked : function(state,suppressEvent)
179 if (this.inSetChecked) {
180 this.checked = state;
186 this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
188 this.checked = state;
189 if(suppressEvent !== true){
190 this.fireEvent('check', this, state);
192 this.inSetChecked = true;
193 this.el.dom.value = state ? this.inputValue : this.valueOff;
194 this.inSetChecked = false;
197 // handle setting of hidden value by some other method!!?!?
198 setFromHidden: function()
203 //console.log("SET FROM HIDDEN");
204 //alert('setFrom hidden');
205 this.setValue(this.el.dom.value);
208 onDestroy : function()
211 Roo.get(this.viewEl).remove();
214 Roo.form.Checkbox.superclass.onDestroy.call(this);
217 setBoxLabel : function(str)
219 this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;