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

167 lines
No EOL
7.8 KiB
HTML
Raw Blame History

<html><head><title>MenuButton.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>MenuButton.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.MenuButton
* @extends Ext.Button
* A split button that provides a built-<b>in</b> dropdown arrow that can fire an event separately from the <b>default</b>
* click event of the button. Typically <b>this</b> would be used to display a dropdown menu that provides additional
* options to the primary button action, but any custom handler can provide the arrowclick implementation.
* @cfg {Function} arrowHandler A <b>function</b> called when the arrow button is clicked (can be used instead of click event)
* @cfg {String} arrowTooltip The title attribute of the arrow
* @constructor
* Create a <b>new</b> menu button
* @param {String/HTMLElement/Element} renderTo The element to append the button to
* @param {Object} config The config object
*/</i>
Ext.MenuButton = <b>function</b>(renderTo, config){
Ext.MenuButton.superclass.constructor.call(<b>this</b>, renderTo, config);
<i>/**
* @event arrowclick
* Fires when <b>this</b> button's arrow is clicked
* @param {MenuButton} <b>this</b>
* @param {EventObject} e The click event
*/</i>
<b>this</b>.addEvents({&quot;arrowclick&quot;:true});
};
Ext.extend(Ext.MenuButton, Ext.Button, {
render : <b>function</b>(renderTo){
<i>// <b>this</b> is one sweet looking template!</i>
<b>var</b> tpl = <b>new</b> Ext.Template(
'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-menu-wrap x-btn&quot;&gt;&lt;tr&gt;&lt;td&gt;',
'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-wrap x-btn-menu-text-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;button class=&quot;x-btn-text&quot;&gt;{0}&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;',
&quot;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;td&gt;&quot;,
'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-wrap x-btn-menu-arrow-wrap&quot;&gt;&lt;tbody&gt;',
'&lt;tr&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;button class=&quot;x-btn-menu-arrow-el&quot;&gt;&amp;#160;&lt;/button&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-right&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;/tr&gt;',
&quot;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;
);
<b>var</b> btn = tpl.append(renderTo, [<b>this</b>.text], true);
<b>if</b>(this.cls){
btn.addClass(<b>this</b>.cls);
}
<b>if</b>(this.icon){
btn.child(&quot;button&quot;).setStyle('background-image', 'url(' +<b>this</b>.icon +')');
}
<b>this</b>.el = btn;
<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(&quot;mouseup&quot;, <b>this</b>.onMouseUp, <b>this</b>);
}
btn.on(<b>this</b>.clickEvent, <b>this</b>.onClick, <b>this</b>);
<b>if</b>(this.tooltip){
<b>var</b> btnEl = btn.child(&quot;button:first&quot;);
<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>if</b>(this.arrowTooltip){
<b>var</b> btnEl = btn.child(&quot;button:nth(2)&quot;);
btnEl.dom[<b>this</b>.tooltipType] = <b>this</b>.arrowTooltip;
}
<b>if</b>(this.hidden){
<b>this</b>.hide();
}
<b>if</b>(this.disabled){
<b>this</b>.disable();
}
<b>if</b>(this.menu){
<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>);
}
},
<i>// private</i>
autoWidth : <b>function</b>(){
<b>if</b>(this.el){
<b>var</b> tbl = <b>this</b>.el.child(&quot;table:first&quot;);
<b>var</b> tbl2 = <b>this</b>.el.child(&quot;table:last&quot;);
<b>this</b>.el.setWidth(&quot;auto&quot;);
tbl.setWidth(&quot;auto&quot;);
<b>if</b>(Ext.isIE7 &amp;&amp; Ext.isStrict){
<b>var</b> ib = <b>this</b>.el.child('button:first');
<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>((tbl.getWidth()+tbl2.getWidth()) &lt; <b>this</b>.minWidth){
tbl.setWidth(<b>this</b>.minWidth-tbl2.getWidth());
}
<b>if</b>(this.hidden){
<b>this</b>.el.endMeasure();
}
}
<b>this</b>.el.setWidth(tbl.getWidth()+tbl2.getWidth());
}
},
<i>/**
* Sets <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 above
*/</i>
setHandler : <b>function</b>(handler, scope){
<b>this</b>.handler = handler;
<b>this</b>.scope = scope;
},
<i>/**
* Sets <b>this</b> button's arrow click handler
* @param {Function} handler The <b>function</b> to call when the arrow is clicked
* @param {Object} scope (optional) Scope <b>for</b> the <b>function</b> passed above
*/</i>
setArrowHandler : <b>function</b>(handler, scope){
<b>this</b>.arrowHandler = handler;
<b>this</b>.scope = scope;
},
<i>/**
* Focus the button
*/</i>
focus : <b>function</b>(){
<b>if</b>(this.el){
<b>this</b>.el.child(&quot;a:first&quot;).focus();
}
},
<i>// private</i>
onClick : <b>function</b>(e){
e.preventDefault();
<b>if</b>(!<b>this</b>.disabled){
<b>if</b>(e.getTarget(&quot;.x-btn-menu-arrow-wrap&quot;)){
<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;arrowclick&quot;, <b>this</b>, e);
<b>if</b>(this.arrowHandler){
<b>this</b>.arrowHandler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, e);
}
}<b>else</b>{
<b>this</b>.fireEvent(&quot;click&quot;, <b>this</b>, e);
<b>if</b>(this.handler){
<b>this</b>.handler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, e);
}
}
}
},
<i>// private</i>
onMouseDown : <b>function</b>(e){
<b>if</b>(!<b>this</b>.disabled){
Ext.fly(e.getTarget(&quot;table&quot;)).addClass(&quot;x-btn-click&quot;);
}
},
<i>// private</i>
onMouseUp : <b>function</b>(e){
Ext.fly(e.getTarget(&quot;table&quot;)).removeClass(&quot;x-btn-click&quot;);
}
});</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