117 lines
No EOL
4.4 KiB
HTML
117 lines
No EOL
4.4 KiB
HTML
<html><head><title>Checkbox.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Checkbox.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.form.Checkbox
|
|
* @extends Ext.form.Field
|
|
* Single checkbox field. Can be used as a direct replacement <b>for</b> traditional checkbox fields.
|
|
* @constructor
|
|
* Creates a <b>new</b> CheckBox
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.form.Checkbox = <b>function</b>(config){
|
|
Ext.form.Checkbox.superclass.constructor.call(<b>this</b>, config);
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event check
|
|
* Fires when the checkbox is checked or unchecked
|
|
* @param {Ext.form.Checkbox} <b>this</b> This checkbox
|
|
* @param {Boolean} checked The <b>new</b> checked value
|
|
*/</i>
|
|
check : true
|
|
});
|
|
};
|
|
|
|
Ext.extend(Ext.form.Checkbox, Ext.form.Field, {
|
|
<i>/**
|
|
* @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to 'x-form-check-focus')
|
|
*/</i>
|
|
focusClass : "x-form-check-focus",
|
|
<i>/**
|
|
* @cfg {String} fieldClass The <b>default</b> CSS class <b>for</b> the checkbox (defaults to "x-form-field")
|
|
*/</i>
|
|
fieldClass: "x-form-field",
|
|
<i>/**
|
|
* @cfg {Boolean} checked True <b>if</b> the the checkbox should render already checked (defaults to false)
|
|
*/</i>
|
|
checked: false,
|
|
|
|
<i>// private</i>
|
|
defaultAutoCreate : { tag: "input", type: 'checkbox', autocomplete: "off"},
|
|
<i>/**
|
|
* @cfg {String} boxLabel The text that appears beside the checkbox
|
|
*/</i>
|
|
boxLabel : undefined,
|
|
<i>/**
|
|
* @cfg {String} inputValue The value that should go into the generated input element's value attribute
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* Sets the width and height of the checkbox wrapper element
|
|
* @param {Number} width New width <b>in</b> pixels
|
|
* @param {Number} height New height <b>in</b> pixels
|
|
*/</i>
|
|
setSize : <b>function</b>(w, h){
|
|
<b>if</b>(!<b>this</b>.wrap){
|
|
<b>this</b>.width = w;
|
|
<b>this</b>.height = h;
|
|
<b>return</b>;
|
|
}
|
|
<b>this</b>.wrap.setSize(w, h);
|
|
<b>if</b>(!<b>this</b>.boxLabel){
|
|
<b>this</b>.el.alignTo(<b>this</b>.wrap, 'c-c');
|
|
}
|
|
},
|
|
|
|
initEvents : <b>function</b>(){
|
|
Ext.form.Checkbox.superclass.initEvents.call(<b>this</b>);
|
|
<b>this</b>.el.on("click", <b>this</b>.onClick, <b>this</b>);
|
|
<b>this</b>.el.on("change", <b>this</b>.onClick, <b>this</b>);
|
|
},
|
|
|
|
|
|
<i>// private</i>
|
|
onRender : <b>function</b>(ct, position){
|
|
Ext.form.Checkbox.superclass.onRender.call(<b>this</b>, ct, position);
|
|
<b>if</b>(this.inputValue !== undefined){
|
|
<b>this</b>.el.dom.value = <b>this</b>.inputValue;
|
|
}
|
|
<b>this</b>.wrap = <b>this</b>.el.wrap({cls: "x-form-check-wrap"});
|
|
<b>if</b>(this.boxLabel){
|
|
<b>this</b>.wrap.createChild({tag: 'label', htmlFor: <b>this</b>.el.id, cls: 'x-form-cb-label', html: <b>this</b>.boxLabel});
|
|
}
|
|
<b>if</b>(this.checked){
|
|
<b>this</b>.setValue(true);
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
initValue : Ext.emptyFn,
|
|
|
|
<i>/**
|
|
* Returns the checked state of the checkbox.
|
|
* @<b>return</b> {Boolean} True <b>if</b> checked, <b>else</b> false
|
|
*/</i>
|
|
getValue : <b>function</b>(){
|
|
<b>if</b>(this.rendered){
|
|
<b>return</b> this.el.dom.checked;
|
|
}
|
|
<b>return</b> false;
|
|
},
|
|
|
|
onClick : <b>function</b>(){
|
|
<b>if</b>(this.el.dom.checked != <b>this</b>.checked){
|
|
<b>this</b>.setValue(<b>this</b>.el.dom.checked);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the checked state of the checkbox
|
|
* @param {Boolean/String} checked True, 'true,' or '1' to check the checkbox, any other value will uncheck it
|
|
*/</i>
|
|
setValue : <b>function</b>(v){
|
|
<b>this</b>.checked = (v === true || v === 'true' || v == '1');
|
|
<b>if</b>(this.el && <b>this</b>.el.dom){
|
|
<b>this</b>.el.dom.checked = <b>this</b>.checked;
|
|
}
|
|
<b>this</b>.fireEvent("check", <b>this</b>, <b>this</b>.checked);
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |