oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/Button.jss.html

455 lines
No EOL
16 KiB
HTML
Raw Blame History

<html><head><title>Button.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Button.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.Button
* @extends Ext.util.Observable
* Simple Button class
* @cfg {String} text The button text
* @cfg {String} icon The path to an image to display <b>in</b> the button (the image will be set as the background-image
* CSS property of the button by <b>default</b>, so <b>if</b> you want a mixed icon/text button, set cls:&quot;x-btn-text-icon&quot;)
* @cfg {Function} handler A <b>function</b> called when the button is clicked (can be used instead of click event)
* @cfg {Object} scope The scope of the handler
* @cfg {Number} minWidth The minimum width <b>for</b> this button (used to give a set of buttons a common width)
* @cfg {String/Object} tooltip The tooltip <b>for</b> the button - can be a string or QuickTips config object
* @cfg {Boolean} hidden True to start hidden (defaults to false)
* @cfg {Boolean} disabled True to start disabled (defaults to false)
* @cfg {Boolean} pressed True to start pressed (only <b>if</b> enableToggle = true)
* @cfg {String} toggleGroup The group <b>this</b> toggle button is a member of (only 1 per group can be pressed, only
* applies <b>if</b> enableToggle = true)
* @cfg {Boolean/Object} repeat True to repeat fire the click event <b>while</b> the mouse is down. This can also be
an {@link Ext.util.ClickRepeater} config object (defaults to false).
* @constructor
* Create a <b>new</b> button
* @param {String/HTMLElement/Element} renderTo The element to append the button to
* @param {Object} config The config object
*/</i>
Ext.Button = <b>function</b>(renderTo, config){
Ext.apply(<b>this</b>, config);
<b>this</b>.addEvents({
<i>/**
* @event click
* Fires when <b>this</b> button is clicked
* @param {Button} <b>this</b>
* @param {EventObject} e The click event
*/</i>
&quot;click&quot; : true,
<i>/**
* @event toggle
* Fires when the &quot;pressed&quot; state of <b>this</b> button changes (only <b>if</b> enableToggle = true)
* @param {Button} <b>this</b>
* @param {Boolean} pressed
*/</i>
&quot;toggle&quot; : true,
<i>/**
* @event mouseover
* Fires when the mouse hovers over the button
* @param {Button} <b>this</b>
* @param {Event} e The event object
*/</i>
'mouseover' : true,
<i>/**
* @event mouseout
* Fires when the mouse exits the button
* @param {Button} <b>this</b>
* @param {Event} e The event object
*/</i>
'mouseout': true
});
<b>if</b>(this.menu){
<b>this</b>.menu = Ext.menu.MenuMgr.get(<b>this</b>.menu);
}
<b>if</b>(renderTo){
<b>this</b>.render(renderTo);
}
Ext.Button.superclass.constructor.call(<b>this</b>);
};
Ext.extend(Ext.Button, Ext.util.Observable, {
<i>/**
* Read-only. True <b>if</b> this button is hidden
* @type Boolean
*/</i>
hidden : false,
<i>/**
* Read-only. True <b>if</b> this button is disabled
* @type Boolean
*/</i>
disabled : false,
<i>/**
* Read-only. True <b>if</b> this button is pressed (only <b>if</b> enableToggle = true)
* @type Boolean
*/</i>
pressed : false,
<i>/**
* @cfg {Boolean} enableToggle
* True to enable pressed/not pressed toggling (defaults to false)
*/</i>
enableToggle: false,
<i>/**
* @cfg {Mixed} menu
* Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob
*/</i>
menu : undefined,
<i>/**
* @cfg {String} menuAlign
* The position to align the menu to (see {@link Ext.Element#alignTo} <b>for</b> more details, defaults to 'tl-bl?').
*/</i>
menuAlign : &quot;tl-bl?&quot;,
<i>// private</i>
menuClassTarget: 'tr',
clickEvent : 'click',
handleMouseEvents : true,
<i>/**
* @cfg {String} tooltipType
* The type of tooltip to use. Either &quot;qtip&quot; <b>for</b> QuickTips or &quot;title&quot; <b>for</b> title attribute.
*/</i>
tooltipType : 'qtip',
<i>// private</i>
render : <b>function</b>(renderTo){
<b>var</b> btn;
<b>if</b>(this.hideParent){
<b>this</b>.parentEl = Ext.get(renderTo);
}
<b>if</b>(!<b>this</b>.dhconfig){
<b>if</b>(!<b>this</b>.template){
<b>if</b>(!Ext.Button.buttonTemplate){
<i>// hideous table template</i>
Ext.Button.buttonTemplate = <b>new</b> Ext.Template(
'&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;x-btn-wrap&quot;&gt;&lt;tbody&gt;&lt;tr&gt;',
'&lt;td class=&quot;x-btn-left&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;em&gt;&lt;button class=&quot;x-btn-text&quot;&gt;{0}&lt;/button&gt;&lt;/em&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-right&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;',
&quot;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&quot;);
}
<b>this</b>.template = Ext.Button.buttonTemplate;
}
btn = <b>this</b>.template.append(renderTo, [<b>this</b>.text || '&amp;#160;'], true);
<b>var</b> btnEl = btn.child(&quot;button:first&quot;);
btnEl.on('focus', <b>this</b>.onFocus, <b>this</b>);
btnEl.on('blur', <b>this</b>.onBlur, <b>this</b>);
<b>if</b>(this.cls){
btn.addClass(<b>this</b>.cls);
}
<b>if</b>(this.icon){
btnEl.setStyle('background-image', 'url(' +<b>this</b>.icon +')');
}
<b>if</b>(this.tooltip){
<b>if</b>(typeof <b>this</b>.tooltip == 'object'){
Ext.QuickTips.tips(Ext.apply({
target: btnEl.id
}, <b>this</b>.tooltip));
} <b>else</b> {
btnEl.dom[<b>this</b>.tooltipType] = <b>this</b>.tooltip;
}
}
}<b>else</b>{
btn = Ext.DomHelper.append(Ext.get(renderTo).dom, <b>this</b>.dhconfig, true);
}
<b>this</b>.el = btn;
<b>if</b>(this.id){
<b>this</b>.el.dom.id = <b>this</b>.el.id = <b>this</b>.id;
}
<b>if</b>(this.menu){
<b>this</b>.el.child(<b>this</b>.menuClassTarget).addClass(&quot;x-btn-<b>with</b>-menu&quot;);
<b>this</b>.menu.on(&quot;show&quot;, <b>this</b>.onMenuShow, <b>this</b>);
<b>this</b>.menu.on(&quot;hide&quot;, <b>this</b>.onMenuHide, <b>this</b>);
}
btn.addClass(&quot;x-btn&quot;);
<b>if</b>(Ext.isIE &amp;&amp; !Ext.isIE7){
<b>this</b>.autoWidth.defer(1, <b>this</b>);
}<b>else</b>{
<b>this</b>.autoWidth();
}
<b>if</b>(this.handleMouseEvents){
btn.on(&quot;mouseover&quot;, <b>this</b>.onMouseOver, <b>this</b>);
btn.on(&quot;mouseout&quot;, <b>this</b>.onMouseOut, <b>this</b>);
btn.on(&quot;mousedown&quot;, <b>this</b>.onMouseDown, <b>this</b>);
}
btn.on(<b>this</b>.clickEvent, <b>this</b>.onClick, <b>this</b>);
<i>//btn.on(&quot;mouseup&quot;, <b>this</b>.onMouseUp, <b>this</b>);</i>
<b>if</b>(this.hidden){
<b>this</b>.hide();
}
<b>if</b>(this.disabled){
<b>this</b>.disable();
}
Ext.ButtonToggleMgr.register(<b>this</b>);
<b>if</b>(this.pressed){
<b>this</b>.el.addClass(&quot;x-btn-pressed&quot;);
}
<b>if</b>(this.repeat){
<b>var</b> repeater = <b>new</b> Ext.util.ClickRepeater(btn,
<b>typeof</b> this.repeat == &quot;object&quot; ? <b>this</b>.repeat : {}
);
repeater.on(&quot;click&quot;, <b>this</b>.onClick, <b>this</b>);
}
},
<i>/**
* Returns the button's underlying element
* @<b>return</b> {Ext.Element} The element
*/</i>
getEl : <b>function</b>(){
<b>return</b> this.el;
},
<i>/**
* Destroys <b>this</b> Button and removes any listeners.
*/</i>
destroy : <b>function</b>(){
Ext.ButtonToggleMgr.unregister(<b>this</b>);
<b>this</b>.el.removeAllListeners();
<b>this</b>.purgeListeners();
<b>this</b>.el.remove();
},
<i>// private</i>
autoWidth : <b>function</b>(){
<b>if</b>(this.el){
<b>this</b>.el.setWidth(&quot;auto&quot;);
<b>if</b>(Ext.isIE7 &amp;&amp; Ext.isStrict){
<b>var</b> ib = <b>this</b>.el.child('button');
<b>if</b>(ib &amp;&amp; ib.getWidth() &gt; 20){
ib.clip();
ib.setWidth(Ext.util.TextMetrics.measure(ib, <b>this</b>.text).width+ib.getFrameWidth('lr'));
}
}
<b>if</b>(this.minWidth){
<b>if</b>(this.hidden){
<b>this</b>.el.beginMeasure();
}
<b>if</b>(this.el.getWidth() &lt; <b>this</b>.minWidth){
<b>this</b>.el.setWidth(<b>this</b>.minWidth);
}
<b>if</b>(this.hidden){
<b>this</b>.el.endMeasure();
}
}
}
},
<i>/**
* Assigns <b>this</b> button's click handler
* @param {Function} handler The <b>function</b> to call when the button is clicked
* @param {Object} scope (optional) Scope <b>for</b> the <b>function</b> passed <b>in</b>
*/</i>
setHandler : <b>function</b>(handler, scope){
<b>this</b>.handler = handler;
<b>this</b>.scope = scope;
},
<i>/**
* Sets <b>this</b> button's text
* @param {String} text The button text
*/</i>
setText : <b>function</b>(text){
<b>this</b>.text = text;
<b>if</b>(this.el){
<b>this</b>.el.child(&quot;td.x-btn-center button.x-btn-text&quot;).update(text);
}
<b>this</b>.autoWidth();
},
<i>/**
* Gets the text <b>for</b> this button
* @<b>return</b> {String} The button text
*/</i>
getText : <b>function</b>(){
<b>return</b> this.text;
},
<i>/**
* Show <b>this</b> button
*/</i>
show: <b>function</b>(){
<b>this</b>.hidden = false;
<b>if</b>(this.el){
<b>this</b>[this.hideParent? 'parentEl' : 'el'].setStyle(&quot;display&quot;, &quot;&quot;);
}
},
<i>/**
* Hide <b>this</b> button
*/</i>
hide: <b>function</b>(){
<b>this</b>.hidden = true;
<b>if</b>(this.el){
<b>this</b>[this.hideParent? 'parentEl' : 'el'].setStyle(&quot;display&quot;, &quot;none&quot;);
}
},
<i>/**
* Convenience <b>function</b> for boolean show/hide
* @param {Boolean} visible True to show, false to hide
*/</i>
setVisible: <b>function</b>(visible){
<b>if</b>(visible) {
<b>this</b>.show();
}<b>else</b>{
<b>this</b>.hide();
}
},
<i>/**
* If a state it passed, it becomes the pressed state otherwise the current state is toggled.
* @param {Boolean} state (optional) Force a particular state
*/</i>
toggle : <b>function</b>(state){
state = state === undefined ? !<b>this</b>.pressed : state;
<b>if</b>(state != <b>this</b>.pressed){
<b>if</b>(state){
<b>this</b>.el.addClass(&quot;x-btn-pressed&quot;);
<b>this</b>.pressed = true;
<b>this</b>.fireEvent(&quot;toggle&quot;, <b>this</b>, true);
}<b>else</b>{
<b>this</b>.el.removeClass(&quot;x-btn-pressed&quot;);
<b>this</b>.pressed = false;
<b>this</b>.fireEvent(&quot;toggle&quot;, <b>this</b>, false);
}
<b>if</b>(this.toggleHandler){
<b>this</b>.toggleHandler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, state);
}
}
},
<i>/**
* Focus the button
*/</i>
focus : <b>function</b>(){
<b>this</b>.el.child('button:first').focus();
},
<i>/**
* Disable <b>this</b> button
*/</i>
disable : <b>function</b>(){
<b>if</b>(this.el){
<b>this</b>.el.addClass(&quot;x-btn-disabled&quot;);
}
<b>this</b>.disabled = true;
},
<i>/**
* Enable <b>this</b> button
*/</i>
enable : <b>function</b>(){
<b>if</b>(this.el){
<b>this</b>.el.removeClass(&quot;x-btn-disabled&quot;);
}
<b>this</b>.disabled = false;
},
<i>/**
* Convenience <b>function</b> for boolean enable/disable
* @param {Boolean} enabled True to enable, false to disable
*/</i>
setDisabled : <b>function</b>(v){
<b>this</b>[v !== true ? &quot;enable&quot; : &quot;disable&quot;]();
},
<i>// private</i>
onClick : <b>function</b>(e){
<b>if</b>(e){
e.preventDefault();
}
<b>if</b>(!<b>this</b>.disabled){
<b>if</b>(this.enableToggle){
<b>this</b>.toggle();
}
<b>if</b>(this.menu &amp;&amp; !<b>this</b>.menu.isVisible()){
<b>this</b>.menu.show(<b>this</b>.el, <b>this</b>.menuAlign);
}
<b>this</b>.fireEvent(&quot;click&quot;, <b>this</b>, e);
<b>if</b>(this.handler){
<b>this</b>.el.removeClass(&quot;x-btn-over&quot;);
<b>this</b>.handler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, e);
}
}
},
<i>// private</i>
onMouseOver : <b>function</b>(e){
<b>if</b>(!<b>this</b>.disabled){
<b>this</b>.el.addClass(&quot;x-btn-over&quot;);
<b>this</b>.fireEvent('mouseover', <b>this</b>, e);
}
},
<i>// private</i>
onMouseOut : <b>function</b>(e){
<b>if</b>(!e.within(<b>this</b>.el, true)){
<b>this</b>.el.removeClass(&quot;x-btn-over&quot;);
<b>this</b>.fireEvent('mouseout', <b>this</b>, e);
}
},
<i>// private</i>
onFocus : <b>function</b>(e){
<b>if</b>(!<b>this</b>.disabled){
<b>this</b>.el.addClass(&quot;x-btn-focus&quot;);
}
},
<i>// private</i>
onBlur : <b>function</b>(e){
<b>this</b>.el.removeClass(&quot;x-btn-focus&quot;);
},
<i>// private</i>
onMouseDown : <b>function</b>(){
<b>if</b>(!<b>this</b>.disabled){
<b>this</b>.el.addClass(&quot;x-btn-click&quot;);
Ext.get(document).on('mouseup', <b>this</b>.onMouseUp, <b>this</b>);
}
},
<i>// private</i>
onMouseUp : <b>function</b>(){
<b>this</b>.el.removeClass(&quot;x-btn-click&quot;);
Ext.get(document).un('mouseup', <b>this</b>.onMouseUp, <b>this</b>);
},
<i>// private</i>
onMenuShow : <b>function</b>(e){
<b>this</b>.el.addClass(&quot;x-btn-menu-active&quot;);
},
<i>// private</i>
onMenuHide : <b>function</b>(e){
<b>this</b>.el.removeClass(&quot;x-btn-menu-active&quot;);
}
});
<i>// Private utility class used by Button</i>
Ext.ButtonToggleMgr = <b>function</b>(){
<b>var</b> groups = {};
<b>function</b> toggleGroup(btn, state){
<b>if</b>(state){
<b>var</b> g = groups[btn.toggleGroup];
<b>for</b>(var i = 0, l = g.length; i &lt; l; i++){
<b>if</b>(g[i] != btn){
g[i].toggle(false);
}
}
}
}
<b>return</b> {
register : <b>function</b>(btn){
<b>if</b>(!btn.toggleGroup){
<b>return</b>;
}
<b>var</b> g = groups[btn.toggleGroup];
<b>if</b>(!g){
g = groups[btn.toggleGroup] = [];
}
g.push(btn);
btn.on(&quot;toggle&quot;, toggleGroup);
},
unregister : <b>function</b>(btn){
<b>if</b>(!btn.toggleGroup){
<b>return</b>;
}
<b>var</b> g = groups[btn.toggleGroup];
<b>if</b>(g){
g.remove(btn);
btn.un(&quot;toggle&quot;, toggleGroup);
}
}
};
}();</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink