中间件编程

开发平台：

JavaScript

ext-all-debug.js：源码内容

this.updateSortIcon(sortColumn, sortDir);
}
},
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.view.innerHd.select('em').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
},
onHdClick : function(e){
var hd = e.getTarget('em', 3);
if(hd && !this.view.disableHeaders){
var index = this.view.findHeaderIndex(hd);
this.view.store.sort(this.view.columns[index].dataIndex);
}
}
});/** * @class Ext.TabPanel * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel} * for layout purposes, but also have special support for containing child Components * (<tt>{@link Ext.Container#items items}</tt>) that are managed using a * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p> * * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component * and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable * re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>. * * <p><b><u>TabPanel header/footer elements</u></b></p> * <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons. * This means that a TabPanel will not display any configured title, and will not display any * configured header {@link Ext.Panel#tools tools}.</p> * <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses * <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p> * * <p><b><u>Tab Events</u></b></p> * <p>There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component} * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component * can fire additional events that only exist for tabs and are not available from other Components. * These events are:</p> * <div><ul class="mdetail-params"> * <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes * the active tab.</li> * <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that * was the active tab becomes deactivated.</li> * </ul></div> * <p><b><u>Creating TabPanels from Code</u></b></p> * <p>TabPanels can be created and rendered completely in code, as in this example:</p> * <pre><code> var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0, items: [{ title: 'Tab 1', html: 'A simple tab' },{ title: 'Tab 2', html: 'Another one' }] }); </code></pre> * <p><b><u>Creating TabPanels from Existing Markup</u></b></p> * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p> * <div><ul class="mdetail-params"> * * <li>Pre-Structured Markup</li> * <div class="sub-desc"> * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely * from existing markup (See the {@link #autoTabs} example).</p> * </div> * * <li>Un-Structured Markup</li> * <div class="sub-desc"> * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id * which elements should be the container and the tabs. Using this method tab content can be pulled from different * elements within the page by id regardless of page structure. For example:</p> * <pre><code> var tabs = new Ext.TabPanel({ renderTo: 'my-tabs', activeTab: 0, items:[ {contentEl:'tab1', title:'Tab 1'}, {contentEl:'tab2', title:'Tab 2'} ] }); // Note that the tabs do not have to be nested within the container (although they can be) <div id="my-tabs"></div> <div id="tab1" class="x-hide-display">A simple tab</div> <div id="tab2" class="x-hide-display">Another one</div> </code></pre> * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt> * to render all content tabs on page load. * </div> * * </ul></div> * * @extends Ext.Panel * @constructor * @param {Object} config The configuration options * @xtype tabpanel */ Ext.TabPanel = Ext.extend(Ext.Panel, { /** * @cfg {Boolean} layoutOnTabChange * Set to true to force a layout of the active tab when the tab is changed. Defaults to false. * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>. */ /** * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS * class name applied to the tab strip item representing the child Component, allowing special * styling to be applied. */ /** * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on * browser resize (defaults to true). */ monitorResize : true, /** * @cfg {Boolean} deferredRender * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt> * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout} * is rendered. If there is a significant amount of content or a lot of heavy controls being * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might * improve performance.</p> * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender} * configuration value.</p> * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content * within an unactivated tab will not be available. For example, this means that if the TabPanel * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within * unactivated tabs will not be rendered, and will therefore not be submitted and will not be * available to either {@link Ext.form.BasicForm#getValues getValues} or * {@link Ext.form.BasicForm#setValues setValues}.</p> */ deferredRender : true, /** * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120). */ tabWidth : 120, /** * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30). */ minTabWidth : 30, /** * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the * tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored). */ resizeTabs : false, /** * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the * overall TabPanel width. Only available with tabPosition:'top' (defaults to false). */ enableTabScroll : false, /** * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width). Only * applies when <tt>{@link #enableTabScroll} = true</tt>. */ scrollIncrement : 0, /** * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is * continuously pressed (defaults to <tt>400</tt>). */ scrollRepeatInterval : 400, /** * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>. */ scrollDuration : 0.35, /** * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults * to <tt>true</tt>). Only applies when <tt>{@link #enableTabScroll} = true</tt>. */ animScroll : true, /** * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>). * The only other supported value is <tt>'bottom'</tt>. <b>Note</b>: tab scrolling is only supported for * <tt>tabPosition: 'top'</tt>. */ tabPosition : 'top', /** * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>). */ baseCls : 'x-tab-panel', /** * @cfg {Boolean} autoTabs * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted * to tabs and added to this panel (defaults to <tt>false</tt>). Note that the query will be executed within * the scope of the container element only (so that multiple tab panels from markup can be supported via this * method).</p> * <p>This method is only possible when the markup is structured correctly as a container with nested divs * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p> * <p>There are a couple of things to note when using this method:<ul> * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt> * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel * components.</li> * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed * until each tab is activated and will be visible outside the TabPanel.</li> * </ul>Example usage:</p> * <pre><code> var tabs = new Ext.TabPanel({ applyTo: 'my-tabs', activeTab: 0, deferredRender: false, autoTabs: true }); // This markup will be converted to a TabPanel from the code above <div id="my-tabs"> <div class="x-tab" title="Tab 1">A simple tab</div> <div class="x-tab" title="Tab 2">Another one</div> </div> </code></pre> */ autoTabs : false, /** * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>). This can be any valid selector * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this * tab panel only (so that multiple tab panels from markup can be supported on a page). */ autoTabSelector : 'div.x-tab', /** * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially * activated on render (defaults to none). */ activeTab : null, /** * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>) */ tabMargin : 2, /** * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image * (defaults to <tt>false</tt>). */ plain : false, /** * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel * scrolling (defaults to <tt>20</tt>). */ wheelIncrement : 20, /* * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness. * It does not generally need to be changed, but can be if external code also uses an id scheme that can * potentially clash with this one. */ idDelimiter : '__', // private itemCls : 'x-tab-item', // private config overrides elements : 'body', headerAsText : false, frame : false, hideBorders :true, // private initComponent : function(){ this.frame = false; Ext.TabPanel.superclass.initComponent.call(this); this.addEvents( /** * @event beforetabchange * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change. * @param {TabPanel} this * @param {Panel} newTab The tab being activated * @param {Panel} currentTab The current active tab */ 'beforetabchange', /** * @event tabchange * Fires after the active tab has changed. * @param {TabPanel} this * @param {Panel} tab The new active tab */ 'tabchange', /** * @event contextmenu * Relays the contextmenu event from a tab selector element in the tab strip. * @param {TabPanel} this * @param {Panel} tab The target tab * @param {EventObject} e */ 'contextmenu' ); /** * @cfg {Object} layoutConfig * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager. * <code>layoutConfig</code> may be used to configure this layout manager. * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code> * configured on the TabPanel will be applied as configs to the layout manager. */ this.setLayout(new Ext.layout.CardLayout(Ext.apply({ layoutOnCardChange: this.layoutOnTabChange, deferredRender: this.deferredRender }, this.layoutConfig))); if(this.tabPosition == 'top'){ this.elements += ',header'; this.stripTarget = 'header'; }else { this.elements += ',footer'; this.stripTarget = 'footer'; } if(!this.stack){ this.stack = Ext.TabPanel.AccessStack(); } this.initItems(); }, // private onRender : function(ct, position){ Ext.TabPanel.superclass.onRender.call(this, ct, position); if(this.plain){ var pos = this.tabPosition == 'top' ? 'header' : 'footer'; this[pos].addClass('x-tab-panel-'+pos+'-plain'); } var st = this[this.stripTarget]; this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{ tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}}); var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null); this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl); this.strip = new Ext.Element(this.stripWrap.dom.firstChild); this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'}); this.strip.createChild({cls:'x-clear'}); this.body.addClass('x-tab-panel-body-'+this.tabPosition); /** * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p> * <p>The main element created should be a <tt><li></tt> element. In order for a click event on * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's * native <tt>{@link #getTemplateArgs}</tt>.</p> * <p>The child element which contains the title text must be marked by the CSS class * <tt>x-tab-strip-inner</tt>.</p> * <p>To enable closability, the created element should contain an element marked by the CSS class * <tt>x-tab-strip-close</tt>.</p> * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS * style rules to create the desired appearance.</p> * Below is an example of how to create customized tab selector items:<pre><code> new Ext.TabPanel({ renderTo: document.body, minTabWidth: 115, tabWidth: 135, enableTabScroll: true, width: 600, height: 250, defaults: {autoScroll:true}, itemTpl: new Ext.XTemplate( '<li class="{cls}" id="{id}" style="overflow:hidden">', '<tpl if="closable">', '<a class="x-tab-strip-close" onclick="return false;"></a>', '</tpl>', '<a class="x-tab-right" href="#" onclick="return false;" style="padding-left:6px">', '<em class="x-tab-left">', '<span class="x-tab-strip-inner">', '<img src="{src}" style="float:left;margin:3px 3px 0 0">', '<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>', '</span>', '</em>', '</a>', '</li>' ), getTemplateArgs: function(item) { // Call the native method to collect the base data. Like the ID! var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item); // Add stuff used in our template return Ext.apply(result, { closable: item.closable, src: item.iconSrc, extra: item.extraText || '' }); }, items: [{ title: 'New Tab 1', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 1', closable: true }, { title: 'New Tab 2', iconSrc: '../shared/icons/fam/grid.png', html: 'Tab Body 2', extraText: 'Extra stuff in the tab button' }] }); </code></pre> */ if(!this.itemTpl){ var tt = new Ext.Template( '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>', '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">', '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>', '</em></a></li>' ); tt.disableFormats = true; tt.compile(); Ext.TabPanel.prototype.itemTpl = tt; } this.items.each(this.initTab, this); }, // private afterRender : function(){ Ext.TabPanel.superclass.afterRender.call(this); if(this.autoTabs){ this.readTabs(false); } if(this.activeTab !== undefined){ var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab); delete this.activeTab; this.setActiveTab(item); } }, // private initEvents : function(){ Ext.TabPanel.superclass.initEvents.call(this); this.on('add', this.onAdd, this, {target: this}); this.on('remove', this.onRemove, this, {target: this}); this.mon(this.strip, 'mousedown', this.onStripMouseDown, this); this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this); if(this.enableTabScroll){ this.mon(this.strip, 'mousewheel', this.onWheel, this); } }, // private findTargets : function(e){ var item = null; var itemEl = e.getTarget('li', this.strip); if(itemEl){ item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]); if(item.disabled){ return { close : null, item : null, el : null }; } } return { close : e.getTarget('.x-tab-strip-close', this.strip), item : item, el : itemEl }; }, // private onStripMouseDown : function(e){ if(e.button !== 0){ return; } e.preventDefault(); var t = this.findTargets(e); if(t.close){ if (t.item.fireEvent('beforeclose', t.item) !== false) { t.item.fireEvent('close', t.item); this.remove(t.item); } return; } if(t.item && t.item != this.activeTab){ this.setActiveTab(t.item); } }, // private onStripContextMenu : function(e){ e.preventDefault(); var t = this.findTargets(e); if(t.item){ this.fireEvent('contextmenu', this, t.item, e); } }, /** * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the * <tt>{@link #autoTabSelector}</tt> * @param {Boolean} removeExisting True to remove existing tabs */ readTabs : function(removeExisting){ if(removeExisting === true){ this.items.each(function(item){ this.remove(item); }, this); } var tabs = this.el.query(this.autoTabSelector); for(var i = 0, len = tabs.length; i < len; i++){ var tab = tabs[i]; var title = tab.getAttribute('title'); tab.removeAttribute('title'); this.add({ title: title, contentEl: tab }); } }, // private initTab : function(item, index){ var before = this.strip.dom.childNodes[index]; var p = this.getTemplateArgs(item); var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p); Ext.fly(el).addClassOnOver('x-tab-strip-over'); if(item.tabTip){ Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip; } item.tabEl = el; item.on('disable', this.onItemDisabled, this); item.on('enable', this.onItemEnabled, this); item.on('titlechange', this.onItemTitleChanged, this); item.on('iconchange', this.onItemIconChanged, this); item.on('beforeshow', this.onBeforeShowItem, this); }, /** * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p> * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt> * to create a formatted, clickable tab selector element. The properties which must be returned * are:</p><div class="mdetail-params"><ul> * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li> * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li> * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li> * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li> * </ul></div> * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip. * @return {Object} An object hash containing the properties required to render the selector element. */ getTemplateArgs : function(item) { var cls = item.closable ? 'x-tab-strip-closable' : ''; if(item.disabled){ cls += ' x-item-disabled'; } if(item.iconCls){ cls += ' x-tab-with-icon'; } if(item.tabCls){ cls += ' ' + item.tabCls; } return { id: this.id + this.idDelimiter + item.getItemId(), text: item.title, cls: cls, iconCls: item.iconCls || '' }; }, // private onAdd : function(tp, item, index){ this.initTab(item, index); if(this.items.getCount() == 1){ this.syncSize(); } this.delegateUpdates(); }, // private onBeforeAdd : function(item){ var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item); if(existing){ this.setActiveTab(item); return false; } Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments); var es = item.elements; item.elements = es ? es.replace(',header', '') : es; item.border = (item.border === true); }, // private onRemove : function(tp, item){ Ext.destroy(Ext.get(this.getTabEl(item))); this.stack.remove(item); item.un('disable', this.onItemDisabled, this); item.un('enable', this.onItemEnabled, this); item.un('titlechange', this.onItemTitleChanged, this); item.un('iconchange', this.onItemIconChanged, this); item.un('beforeshow', this.onBeforeShowItem, this); if(item == this.activeTab){ var next = this.stack.next(); if(next){ this.setActiveTab(next); }else if(this.items.getCount() > 0){ this.setActiveTab(0); }else{ this.activeTab = null; } } this.delegateUpdates(); }, // private onBeforeShowItem : function(item){ if(item != this.activeTab){ this.setActiveTab(item); return false; } }, // private onItemDisabled : function(item){ var el = this.getTabEl(item); if(el){ Ext.fly(el).addClass('x-item-disabled'); } this.stack.remove(item); }, // private onItemEnabled : function(item){ var el = this.getTabEl(item); if(el){ Ext.fly(el).removeClass('x-item-disabled'); } }, // private onItemTitleChanged : function(item){ var el = this.getTabEl(item); if(el){ Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title; } }, //private onItemIconChanged : function(item, iconCls, oldCls){ var el = this.getTabEl(item); if(el){ Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls); } }, /** * Gets the DOM element for the tab strip item which activates the child panel with the specified * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name. * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId. * @return {HTMLElement} The DOM node */ getTabEl : function(item){ return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId()); }, // private onResize : function(){ Ext.TabPanel.superclass.onResize.apply(this, arguments); this.delegateUpdates(); }, /** * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate} */ beginUpdate : function(){ this.suspendUpdates = true; }, /** * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate} */ endUpdate : function(){ this.suspendUpdates = false; this.delegateUpdates(); }, /** * Hides the tab strip item for the passed tab * @param {Number/String/Panel} item The tab index, id or item */ hideTabStripItem : function(item){ item = this.getComponent(item); var el = this.getTabEl(item); if(el){ el.style.display = 'none'; this.delegateUpdates(); } this.stack.remove(item); }, /** * Unhides the tab strip item for the passed tab * @param {Number/String/Panel} item The tab index, id or item */ unhideTabStripItem : function(item){ item = this.getComponent(item); var el = this.getTabEl(item); if(el){ el.style.display = ''; this.delegateUpdates(); } }, // private delegateUpdates : function(){ if(this.suspendUpdates){ return; } if(this.resizeTabs && this.rendered){ this.autoSizeTabs(); } if(this.enableTabScroll && this.rendered){ this.autoScrollTabs(); } }, // private autoSizeTabs : function(){ var count = this.items.length; var ce = this.tabPosition != 'bottom' ? 'header' : 'footer'; var ow = this[ce].dom.offsetWidth; var aw = this[ce].dom.clientWidth; if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none return; } var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE this.lastTabWidth = each; var lis = this.strip.query("li:not([className^=x-tab-edge])"); for(var i = 0, len = lis.length; i < len; i++) { var li = lis[i]; var inner = Ext.fly(li).child('.x-tab-strip-inner', true); var tw = li.offsetWidth; var iw = inner.offsetWidth; inner.style.width = (each - (tw-iw)) + 'px'; } }, // private adjustBodyWidth : function(w){ if(this.header){ this.header.setWidth(w); } if(this.footer){ this.footer.setWidth(w); } return w; }, /** * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which * can <tt>return false</tt> to cancel the tab change. * @param {String/Number} item * The id or tab Panel to activate. This parameter may be any of the following: * <div><ul class="mdetail-params"> * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code> * or <code>{@link Ext.Component#id id}</code> of the child component </li> * <li>a <b><tt>Number</tt></b> : representing the position of the child component * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li> * </ul></div> * <p>For additional information see {@link Ext.util.MixedCollection#get}. */ setActiveTab : function(item){ item = this.getComponent(item); if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){ return; } if(!this.rendered){ this.activeTab = item; return; } if(this.activeTab != item){ if(this.activeTab){ var oldEl = this.getTabEl(this.activeTab); if(oldEl){ Ext.fly(oldEl).removeClass('x-tab-strip-active'); } this.activeTab.fireEvent('deactivate', this.activeTab); } var el = this.getTabEl(item); Ext.fly(el).addClass('x-tab-strip-active'); this.activeTab = item; this.stack.add(item); this.layout.setActiveItem(item); if(this.scrolling){ this.scrollToTab(item, this.animScroll); } item.fireEvent('activate', item); this.fireEvent('tabchange', this, item); } }, /** * Gets the currently active tab. * @return {Panel} The active tab */ getActiveTab : function(){ return this.activeTab || null; }, /** * Gets the specified tab by id. * @param {String} id The tab id * @return {Panel} The tab */ getItem : function(item){ return this.getComponent(item); }, // private autoScrollTabs : function(){ this.pos = this.tabPosition=='bottom' ? this.footer : this.header; var count = this.items.length; var ow = this.pos.dom.offsetWidth; var tw = this.pos.dom.clientWidth; var wrap = this.stripWrap; var wd = wrap.dom; var cw = wd.offsetWidth; var pos = this.getScrollPos(); var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos; if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues return; } if(l <= tw){ wd.scrollLeft = 0; wrap.setWidth(tw); if(this.scrolling){ this.scrolling = false; this.pos.removeClass('x-tab-scrolling'); this.scrollLeft.hide(); this.scrollRight.hide(); // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari if(Ext.isAir || Ext.isWebKit){ wd.style.marginLeft = ''; wd.style.marginRight = ''; } } }else{ if(!this.scrolling){ this.pos.addClass('x-tab-scrolling'); // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari if(Ext.isAir || Ext.isWebKit){ wd.style.marginLeft = '18px'; wd.style.marginRight = '18px'; } } tw -= wrap.getMargins('lr'); wrap.setWidth(tw > 20 ? tw : 20); if(!this.scrolling){ if(!this.scrollLeft){ this.createScrollers(); }else{ this.scrollLeft.show(); this.scrollRight.show(); } } this.scrolling = true; if(pos > (l-tw)){ // ensure it stays within bounds wd.scrollLeft = l-tw; }else{ // otherwise, make sure the active tab is still visible this.scrollToTab(this.activeTab, false); } this.updateScrollButtons(); } }, // private createScrollers : function(){ this.pos.addClass('x-tab-scrolling-' + this.tabPosition); var h = this.stripWrap.dom.offsetHeight; // left var sl = this.pos.insertFirst({ cls:'x-tab-scroller-left' }); sl.setHeight(h); sl.addClassOnOver('x-tab-scroller-left-over'); this.leftRepeater = new Ext.util.ClickRepeater(sl, { interval : this.scrollRepeatInterval, handler: this.onScrollLeft, scope: this }); this.scrollLeft = sl; // right var sr = this.pos.insertFirst({ cls:'x-tab-scroller-right' }); sr.setHeight(h); sr.addClassOnOver('x-tab-scroller-right-over'); this.rightRepeater = new Ext.util.ClickRepeater(sr, { interval : this.scrollRepeatInterval, handler: this.onScrollRight, scope: this }); this.scrollRight = sr; }, // private getScrollWidth : function(){ return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos(); }, // private getScrollPos : function(){ return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0; }, // private getScrollArea : function(){ return parseInt(this.stripWrap.dom.clientWidth, 10) || 0; }, // private getScrollAnim : function(){ return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this}; }, // private getScrollIncrement : function(){ return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100); }, /** * Scrolls to a particular tab if tab scrolling is enabled * @param {Panel} item The item to scroll to * @param {Boolean} animate True to enable animations */ scrollToTab : function(item, animate){ if(!item){ return; } var el = this.getTabEl(item); var pos = this.getScrollPos(), area = this.getScrollArea(); var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos; var right = left + el.offsetWidth; if(left < pos){ this.scrollTo(left, animate); }else if(right > (pos + area)){ this.scrollTo(right - area, animate); } }, // private scrollTo : function(pos, animate){ this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false); if(!animate){ this.updateScrollButtons(); } }, onWheel : function(e){ var d = e.getWheelDelta()*this.wheelIncrement*-1; e.stopEvent(); var pos = this.getScrollPos(); var newpos = pos + d; var sw = this.getScrollWidth()-this.getScrollArea(); var s = Math.max(0, Math.min(sw, newpos)); if(s != pos){ this.scrollTo(s, false); } }, // private onScrollRight : function(){ var sw = this.getScrollWidth()-this.getScrollArea(); var pos = this.getScrollPos(); var s = Math.min(sw, pos + this.getScrollIncrement()); if(s != pos){ this.scrollTo(s, this.animScroll); } }, // private onScrollLeft : function(){ var pos = this.getScrollPos(); var s = Math.max(0, pos - this.getScrollIncrement()); if(s != pos){ this.scrollTo(s, this.animScroll); } }, // private updateScrollButtons : function(){ var pos = this.getScrollPos(); this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled'); this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled'); }, // private beforeDestroy : function() { if(this.items){ this.items.each(function(item){ if(item && item.tabEl){ Ext.get(item.tabEl).removeAllListeners(); item.tabEl = null; } }, this); } if(this.strip){ this.strip.removeAllListeners(); } Ext.TabPanel.superclass.beforeDestroy.apply(this); } /** * @cfg {Boolean} collapsible * @hide */ /** * @cfg {String} header * @hide */ /** * @cfg {Boolean} headerAsText * @hide */ /** * @property header * @hide */ /** * @property title * @hide */ /** * @cfg {Array} tools * @hide */ /** * @cfg {Array} toolTemplate * @hide */ /** * @cfg {Boolean} hideCollapseTool * @hide */ /** * @cfg {Boolean} titleCollapse * @hide */ /** * @cfg {Boolean} collapsed * @hide */ /** * @cfg {String} layout * @hide */ /** * @cfg {Boolean} preventBodyReset * @hide */ }); Ext.reg('tabpanel', Ext.TabPanel); /** * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change. * @param {String/Panel} tab The id or tab Panel to activate * @method activate */ Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab; // private utility class used by TabPanel Ext.TabPanel.AccessStack = function(){ var items = []; return { add : function(item){ items.push(item); if(items.length > 10){ items.shift(); } }, remove : function(item){ var s = []; for(var i = 0, len = items.length; i < len; i++) { if(items[i] != item){ s.push(items[i]); } } items = s; }, next : function(){ return items.pop(); } }; };/** * @class Ext.Button * @extends Ext.BoxComponent * Simple Button class * @cfg {String} text The button text to be used as innerHTML (html tags are accepted) * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon') * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event). * The handler is passed the following parameters:<div class="mdetail-params"><ul> * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li> * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li> * </ul></div> * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the handler is executed. Defaults to this Button. * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width). * See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>. * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) 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 if enableToggle = true) * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed) * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false). * @constructor * Create a new button * @param {Object} config The config object * @xtype button */ Ext.Button = Ext.extend(Ext.BoxComponent, { /** * Read-only. True if this button is hidden * @type Boolean */ hidden : false, /** * Read-only. True if this button is disabled * @type Boolean */ disabled : false, /** * Read-only. True if this button is pressed (only if enableToggle = true) * @type Boolean */ pressed : false, /** * The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when * the Button is added to a container). Read-only. * @type Ext.Panel * @property ownerCt */ /** * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined) */ /** * @cfg {Boolean} allowDepress * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true. */ /** * @cfg {Boolean} enableToggle * True to enable pressed/not pressed toggling (defaults to false) */ enableToggle: false, /** * @cfg {Function} toggleHandler * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params"> * <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li> * <li><b>state</b> : Boolean<div class="sub-desc">The next state if the Button, true means pressed.</div></li> * </ul> */ /** * @cfg {Mixed} menu * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined). */ /** * @cfg {String} menuAlign * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?'). */ menuAlign : 'tl-bl?', /** * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the * text to be used if this item is shown in the overflow menu. See also * {@link Ext.Toolbar.Item}.<code>{@link Ext.Toolbar.Item#overflowText overflowText}</code>. */ /** * @cfg {String} iconCls * A css class which sets a background image to be used as the icon for this button */ /** * @cfg {String} type * submit, reset or button - defaults to 'button' */ type : 'button', // private menuClassTarget: 'tr:nth(2)', /** * @cfg {String} clickEvent * The type of event to map to the button's event handler (defaults to 'click') */ clickEvent : 'click', /** * @cfg {Boolean} handleMouseEvents * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true) */ handleMouseEvents : true, /** * @cfg {String} tooltipType * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute. */ tooltipType : 'qtip', /** * @cfg {String} buttonSelector * <p>(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the * DOM structure created.</p> * <p>When a custom {@link #template} is used, you must ensure that this selector results in the selection of * a focussable element.</p> * <p>Defaults to <b><tt>"button:first-child"</tt></b>.</p> */ buttonSelector : 'button:first-child', /** * @cfg {String} scale * <p>(Optional) The size of the Button. Three values are allowed:</p> * <ul class="mdetail-params"> * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li> * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li> * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li> * </ul> * <p>Defaults to <b><tt>'small'</tt></b>.</p> */ scale: 'small', /** * @cfg {String} iconAlign * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p> * <ul class="mdetail-params"> * <li>'top'<div class="sub-desc"></div></li> * <li>'right'<div class="sub-desc"></div></li> * <li>'bottom'<div class="sub-desc"></div></li> * <li>'left'<div class="sub-desc"></div></li> * </ul> * <p>Defaults to <b><tt>'left'</tt></b>.</p> */ iconAlign : 'left', /** * @cfg {String} arrowAlign * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}. * Two values are allowed:</p> * <ul class="mdetail-params"> * <li>'right'<div class="sub-desc"></div></li> * <li>'bottom'<div class="sub-desc"></div></li> * </ul> * <p>Defaults to <b><tt>'right'</tt></b>.</p> */ arrowAlign : 'right', /** * @cfg {Ext.Template} template (Optional) * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p> * Instances, or subclasses which need a different DOM structure may provide a different * template layout in conjunction with an implementation of {@link #getTemplateArgs}. * @type Ext.Template * @property template */ /** * @cfg {String} cls * A CSS class string to apply to the button's main element. */ /** * @property menu * @type Menu * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. */ initComponent : function(){ Ext.Button.superclass.initComponent.call(this); this.addEvents( /** * @event click * Fires when this button is clicked * @param {Button} this * @param {EventObject} e The click event */ 'click', /** * @event toggle * Fires when the 'pressed' state of this button changes (only if enableToggle = true) * @param {Button} this * @param {Boolean} pressed */ 'toggle', /** * @event mouseover * Fires when the mouse hovers over the button * @param {Button} this * @param {Event} e The event object */ 'mouseover', /** * @event mouseout * Fires when the mouse exits the button * @param {Button} this * @param {Event} e The event object */ 'mouseout', /** * @event menushow * If this button has a menu, this event fires when it is shown * @param {Button} this * @param {Menu} menu */ 'menushow', /** * @event menuhide * If this button has a menu, this event fires when it is hidden * @param {Button} this * @param {Menu} menu */ 'menuhide', /** * @event menutriggerover * If this button has a menu, this event fires when the mouse enters the menu triggering element * @param {Button} this * @param {Menu} menu * @param {EventObject} e */ 'menutriggerover', /** * @event menutriggerout * If this button has a menu, this event fires when the mouse leaves the menu triggering element * @param {Button} this * @param {Menu} menu * @param {EventObject} e */ 'menutriggerout' ); if(this.menu){ this.menu = Ext.menu.MenuMgr.get(this.menu); } if(Ext.isString(this.toggleGroup)){ this.enableToggle = true; } }, /** * <p>This method returns an object which provides substitution parameters for the {@link #template Template} used * to create this Button's DOM structure.</p> * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their * own implementation of this method.</p> * <p>The default implementation which provides data for the default {@link #template} returns an Array containing the * following items:</p><div class="mdetail-params"><ul> * <li>The Button's {@link #text}</li> * <li>The <button>'s {@link #type}</li> * <li>The {@link iconCls} applied to the <button> {@link #btnEl element}</li> * <li>The {@link #cls} applied to the Button's main {@link #getEl Element}</li> * <li>A CSS class name controlling the Button's {@link #scale} and {@link #iconAlign icon alignment}</li> * <li>A CSS class name which applies an arrow to the Button if configured with a {@link #menu}</li> * </ul></div> * @return {Object} Substitution data for a Template. */ getTemplateArgs : function(){ var cls = (this.cls || ''); cls += (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon'; if(this.pressed){ cls += ' x-btn-pressed'; } return [this.text || ' ', this.type, this.iconCls || '', cls, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass()]; }, // protected getMenuClass : function(){ return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : ''; }, // private onRender : function(ct, position){ if(!this.template){ if(!Ext.Button.buttonTemplate){ // hideous table template Ext.Button.buttonTemplate = new Ext.Template( '<table cellspacing="0" class="x-btn {3}"><tbody class="{4}">', '<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>', '<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{5}" unselectable="on"><button class="x-btn-text {2}" type="{1}">{0}</button></em></td><td class="x-btn-mr"><i> </i></td></tr>', '<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>', "</tbody></table>"); Ext.Button.buttonTemplate.compile(); } this.template = Ext.Button.buttonTemplate; } var btn, targs = this.getTemplateArgs(); if(position){ btn = this.template.insertBefore(position, targs, true); }else{ btn = this.template.append(ct, targs, true); } /** * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default, * this references a <tt><button></tt> element. Read only. * @type Ext.Element * @property btnEl */ this.btnEl = btn.child(this.buttonSelector); this.mon(this.btnEl, { scope: this, focus: this.onFocus, blur: this.onBlur }); this.initButtonEl(btn, this.btnEl); Ext.ButtonToggleMgr.register(this); }, // private initButtonEl : function(btn, btnEl){ this.el = btn; if(this.id){ this.el.dom.id = this.el.id = this.id; } if(this.icon){ btnEl.setStyle('background-image', 'url(' +this.icon +')'); } if(this.tabIndex !== undefined){ btnEl.dom.tabIndex = this.tabIndex; } if(this.tooltip){ this.setTooltip(this.tooltip, true); } if(this.handleMouseEvents){ this.mon(btn, { scope: this, mouseover: this.onMouseOver, mousedown: this.onMouseDown }); // new functionality for monitoring on the document level //this.mon(btn, 'mouseout', this.onMouseOut, this); } if(this.menu){ this.mon(this.menu, { scope: this, show: this.onMenuShow, hide: this.onMenuHide }); } if(this.repeat){ var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {}); this.mon(repeater, 'click', this.onClick, this); } this.mon(btn, this.clickEvent, this.onClick, this); }, // private afterRender : function(){ Ext.Button.superclass.afterRender.call(this); this.doAutoWidth(); }, /** * Sets the CSS class that provides a background image to use as the button's icon. This method also changes * the value of the {@link iconCls} config internally. * @param {String} cls The CSS class providing the icon image * @return {Ext.Button} this */ setIconClass : function(cls){ if(this.el){ this.btnEl.replaceClass(this.iconCls, cls); } this.iconCls = cls; return this; }, /** * Sets the tooltip for this Button. * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul> * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li> * <li><b>Object</b> : A configuration object for {@link Ext.QuickTips#register}.</li> * </ul></div> * @return {Ext.Button} this */ setTooltip : function(tooltip, /* private */ initial){ if(this.rendered){ if(!initial){ this.clearTip(); } if(Ext.isObject(tooltip)){ Ext.QuickTips.register(Ext.apply({ target: this.btnEl.id }, tooltip)); this.tooltip = tooltip; }else{ this.btnEl.dom[this.tooltipType] = tooltip; } }else{ this.tooltip = tooltip; } return this; }, // private clearTip: function(){ if(Ext.isObject(this.tooltip)){ Ext.QuickTips.unregister(this.btnEl); } }, // private beforeDestroy: function(){ if(this.rendered){ this.clearTip(); } Ext.destroy(this.menu, this.repeater); }, // private onDestroy : function(){ var doc = Ext.getDoc(); doc.un('mouseover', this.monitorMouseOver, this); doc.un('mouseup', this.onMouseUp, this); if(this.rendered){ Ext.ButtonToggleMgr.unregister(this); } }, // private doAutoWidth : function(){ if(this.el && this.text && this.width === undefined){ this.el.setWidth('auto'); if(Ext.isIE7 && Ext.isStrict){ var ib = this.btnEl; if(ib && ib.getWidth() > 20){ ib.clip(); ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr')); } } if(this.minWidth){ if(this.el.getWidth() < this.minWidth){ this.el.setWidth(this.minWidth); } } } }, /** * Assigns this Button's click handler * @param {Function} handler The function to call when the button is clicked * @param {Object} scope (optional) Scope for the function passed in * @return {Ext.Button} this */ setHandler : function(handler, scope){ this.handler = handler; this.scope = scope; return this; }, /** * Sets this Button's text * @param {String} text The button text * @return {Ext.Button} this */ setText : function(text){ this.text = text; if(this.el){ this.el.child('td.x-btn-mc ' + this.buttonSelector).update(text); } this.doAutoWidth(); return this; }, /** * Gets the text for this Button * @return {String} The button text */ getText : function(){ return this.text; }, /** * If a state it passed, it becomes the pressed state otherwise the current state is toggled. * @param {Boolean} state (optional) Force a particular state * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method. * @return {Ext.Button} this */ toggle : function(state, suppressEvent){ state = state === undefined ? !this.pressed : !!state; if(state != this.pressed){ this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed'); this.pressed = state; if(!suppressEvent){ this.fireEvent('toggle', this, state); if(this.toggleHandler){ this.toggleHandler.call(this.scope || this, this, state); } } } return this; }, /** * Focus the button */ focus : function(){ this.btnEl.focus(); }, // private onDisable : function(){ this.onDisableChange(true); }, // private onEnable : function(){ this.onDisableChange(false); }, onDisableChange : function(disabled){ if(this.el){ if(!Ext.isIE6 || !this.text){ this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass); } this.el.dom.disabled = disabled; } this.disabled = disabled; }, /** * Show this button's menu (if it has one) */ showMenu : function(){ if(this.rendered && this.menu){ if(this.tooltip){ Ext.QuickTips.getQuickTip().cancelShow(this.btnEl); } this.menu.show(this.el, this.menuAlign); } return this; }, /** * Hide this button's menu (if it has one) */ hideMenu : function(){ if(this.menu){ this.menu.hide(); } return this; }, /** * Returns true if the button has a menu and it is visible * @return {Boolean} */ hasVisibleMenu : function(){ return this.menu && this.menu.isVisible(); }, // private onClick : function(e){ if(e){ e.preventDefault(); } if(e.button !== 0){ return; } if(!this.disabled){ if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){ this.toggle(); } if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){ this.showMenu(); } this.fireEvent('click', this, e); if(this.handler){ //this.el.removeClass('x-btn-over'); this.handler.call(this.scope || this, this, e); } } }, // private isMenuTriggerOver : function(e, internal){ return this.menu && !internal; }, // private isMenuTriggerOut : function(e, internal){ return this.menu && !internal; }, // private onMouseOver : function(e){ if(!this.disabled){ var internal = e.within(this.el, true); if(!internal){ this.el.addClass('x-btn-over'); if(!this.monitoringMouseOver){ Ext.getDoc().on('mouseover', this.monitorMouseOver, this); this.monitoringMouseOver = true; } this.fireEvent('mouseover', this, e); } if(this.isMenuTriggerOver(e, internal)){ this.fireEvent('menutriggerover', this, this.menu, e); } } }, // private monitorMouseOver : function(e){ if(e.target != this.el.dom && !e.within(this.el)){ if(this.monitoringMouseOver){ Ext.getDoc().un('mouseover', this.monitorMouseOver, this); this.monitoringMouseOver = false; } this.onMouseOut(e); } }, // private onMouseOut : function(e){ var internal = e.within(this.el) && e.target != this.el.dom; this.el.removeClass('x-btn-over'); this.fireEvent('mouseout', this, e); if(this.isMenuTriggerOut(e, internal)){ this.fireEvent('menutriggerout', this, this.menu, e); } }, // private onFocus : function(e){ if(!this.disabled){ this.el.addClass('x-btn-focus'); } }, // private onBlur : function(e){ this.el.removeClass('x-btn-focus'); }, // private getClickEl : function(e, isUp){ return this.el; }, // private onMouseDown : function(e){ if(!this.disabled && e.button === 0){ this.getClickEl(e).addClass('x-btn-click'); Ext.getDoc().on('mouseup', this.onMouseUp, this); } }, // private onMouseUp : function(e){ if(e.button === 0){ this.getClickEl(e, true).removeClass('x-btn-click'); Ext.getDoc().un('mouseup', this.onMouseUp, this); } }, // private onMenuShow : function(e){ this.ignoreNextClick = 0; this.el.addClass('x-btn-menu-active'); this.fireEvent('menushow', this, this.menu); }, // private onMenuHide : function(e){ this.el.removeClass('x-btn-menu-active'); this.ignoreNextClick = this.restoreClick.defer(250, this); this.fireEvent('menuhide', this, this.menu); }, // private restoreClick : function(){ this.ignoreNextClick = 0; } /** * @cfg {String} autoEl @hide */ }); Ext.reg('button', Ext.Button); // Private utility class used by Button Ext.ButtonToggleMgr = function(){ var groups = {}; function toggleGroup(btn, state){ if(state){ var g = groups[btn.toggleGroup]; for(var i = 0, l = g.length; i < l; i++){ if(g[i] != btn){ g[i].toggle(false); } } } } return { register : function(btn){ if(!btn.toggleGroup){ return; } var g = groups[btn.toggleGroup]; if(!g){ g = groups[btn.toggleGroup] = []; } g.push(btn); btn.on('toggle', toggleGroup); }, unregister : function(btn){ if(!btn.toggleGroup){ return; } var g = groups[btn.toggleGroup]; if(g){ g.remove(btn); btn.un('toggle', toggleGroup); } }, /** * Gets the pressed button in the passed group or null * @param {String} group * @return Button */ getPressed : function(group){ var g = groups[group]; if(g){ for(var i = 0, len = g.length; i < len; i++){ if(g[i].pressed === true){ return g[i]; } } } return null; } }; }();/**
* @class Ext.SplitButton
* @extends Ext.Button
* A split button that provides a built-in dropdown arrow that can fire an event separately from the default
* click event of the button. Typically this 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. Example usage:
* <pre><code>
// display a dropdown menu:
new Ext.SplitButton({
renderTo: 'button-ct', // the container id
text: 'Options',
handler: optionsHandler, // handle a click on the button itself
menu: new Ext.menu.Menu({
items: [
// these items will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: item1Handler},
{text: 'Item 2', handler: item2Handler}
]
})
});
// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
new Ext.SplitButton({
renderTo: 'button-ct',
text: 'Options',
handler: optionsHandler,
arrowHandler: myCustomHandler
});
</code></pre>
* @cfg {Function} arrowHandler A function 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 new menu button
* @param {Object} config The config object
* @xtype splitbutton
*/
Ext.SplitButton = Ext.extend(Ext.Button, {
// private
arrowSelector : 'em',
split: true,
// private
initComponent : function(){
Ext.SplitButton.superclass.initComponent.call(this);
/**
* @event arrowclick
* Fires when this button's arrow is clicked
* @param {MenuButton} this
* @param {EventObject} e The click event
*/
this.addEvents("arrowclick");
},
// private
onRender : function(){
Ext.SplitButton.superclass.onRender.apply(this, arguments);
if(this.arrowTooltip){
this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
}
},
/**
* Sets this button's arrow click handler.
* @param {Function} handler The function to call when the arrow is clicked
* @param {Object} scope (optional) Scope for the function passed above
*/
setArrowHandler : function(handler, scope){
this.arrowHandler = handler;
this.scope = scope;
},
getMenuClass : function(){
return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
},
isClickOnArrow : function(e){
return this.arrowAlign != 'bottom' ?
e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :
e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom;
},
// private
onClick : function(e, t){
e.preventDefault();
if(!this.disabled){
if(this.isClickOnArrow(e)){
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent("arrowclick", this, e);
if(this.arrowHandler){
this.arrowHandler.call(this.scope || this, this, e);
}
}else{
if(this.enableToggle){
this.toggle();
}
this.fireEvent("click", this, e);
if(this.handler){
this.handler.call(this.scope || this, this, e);
}
}
}
},
// private
isMenuTriggerOver : function(e){
return this.menu && e.target.tagName == 'em';
},
// private
isMenuTriggerOut : function(e, internal){
return this.menu && e.target.tagName != 'em';
}
});
Ext.reg('splitbutton', Ext.SplitButton);/**
* @class Ext.CycleButton
* @extends Ext.SplitButton
* A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically
* cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
* {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
* button displays the dropdown menu just like a normal SplitButton. Example usage:
* <pre><code>
var btn = new Ext.CycleButton({
showText: true,
prependText: 'View as ',
items: [{
text:'text only',
iconCls:'view-text',
checked:true
},{
text:'HTML',
iconCls:'view-html'
}],
changeHandler:function(btn, item){
Ext.Msg.alert('Change View', item.text);
}
});
</code></pre>
* @constructor
* Create a new split button
* @param {Object} config The config object
* @xtype cycle
*/
Ext.CycleButton = Ext.extend(Ext.SplitButton, {
/**
* @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
* button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
*/
/**
* @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
*/
/**
* @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
* button's text (only applies when showText = true, defaults to '')
*/
/**
* @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
* item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead
* fire the {@link #change} event on active item change. The changeHandler function will be called with the
* following argument list: (SplitButton this, Ext.menu.CheckItem item)
*/
/**
* @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button. This
* icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the
* default behavior of changing the button's icon to match the selected item's icon on change.
*/
/**
* @property menu
* @type Menu
* The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
*/
// private
getItemText : function(item){
if(item && this.showText === true){
var text = '';
if(this.prependText){
text += this.prependText;
}
text += item.text;
return text;
}
return undefined;
},
/**
* Sets the button's active menu item.
* @param {Ext.menu.CheckItem} item The item to activate
* @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
*/
setActiveItem : function(item, suppressEvent){
if(typeof item != 'object'){
item = this.menu.items.get(item);
}
if(item){
if(!this.rendered){
this.text = this.getItemText(item);
this.iconCls = item.iconCls;
}else{
var t = this.getItemText(item);
if(t){
this.setText(t);
}
this.setIconClass(item.iconCls);
}
this.activeItem = item;
if(!item.checked){
item.setChecked(true, true);
}
if(this.forceIcon){
this.setIconClass(this.forceIcon);
}
if(!suppressEvent){
this.fireEvent('change', this, item);
}
}
},
/**
* Gets the currently active menu item.
* @return {Ext.menu.CheckItem} The active item
*/
getActiveItem : function(){
return this.activeItem;
},
// private
initComponent : function(){
this.addEvents(
/**
* @event change
* Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function
* is set on this CycleButton, it will be called instead on active item change and this change event will
* not be fired.
* @param {Ext.CycleButton} this
* @param {Ext.menu.CheckItem} item The menu item that was selected
*/
"change"
);
if(this.changeHandler){
this.on('change', this.changeHandler, this.scope||this);
delete this.changeHandler;
}
this.itemCount = this.items.length;
this.menu = {cls:'x-cycle-menu', items:[]};
var checked;
for(var i = 0, len = this.itemCount; i < len; i++){
var item = this.items[i];
item.group = item.group || this.id;
item.itemIndex = i;
item.checkHandler = this.checkHandler;
item.scope = this;
item.checked = item.checked || false;
this.menu.items.push(item);
if(item.checked){
checked = item;
}
}
this.setActiveItem(checked, true);
Ext.CycleButton.superclass.initComponent.call(this);
this.on('click', this.toggleSelected, this);
},
// private
checkHandler : function(item, pressed){
if(pressed){
this.setActiveItem(item);
}
},
/**
* This is normally called internally on button click, but can be called externally to advance the button's
* active item programmatically to the next one in the menu. If the current item is the last one in the menu
* the active item will be set to the first item in the menu.
*/
toggleSelected : function(){
this.menu.render();
var nextIdx, checkItem;
for (var i = 1; i < this.itemCount; i++) {
nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
// check the potential item
checkItem = this.menu.items.itemAt(nextIdx);
// if its not disabled then check it.
if (!checkItem.disabled) {
checkItem.setChecked(true);
break;
}
}
}
});
Ext.reg('cycle', Ext.CycleButton);/**
* @class Ext.layout.ToolbarLayout
* @extends Ext.layout.ContainerLayout
* Layout manager implicitly used by Ext.Toolbar.
*/
Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
monitorResize : true,
triggerWidth : 18,
lastOverflow : false,
noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
// private
onLayout : function(ct, target){
if(!this.leftTr){
target.addClass('x-toolbar-layout-ct');
target.insertHtml('beforeEnd',
'<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="left"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
this.leftTr = target.child('tr.x-toolbar-left-row', true);
this.rightTr = target.child('tr.x-toolbar-right-row', true);
this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
}
var side = this.leftTr;
var pos = 0;
var items = ct.items.items;
for(var i = 0, len = items.length, c; i < len; i++, pos++) {
c = items[i];
if(c.isFill){
side = this.rightTr;
pos = -1;
}else if(!c.rendered){
c.render(this.insertCell(c, side, pos));
}else{
if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
var td = this.insertCell(c, side, pos);
td.appendChild(c.getDomPositionEl().dom);
c.container = Ext.get(td);
}
}
}
//strip extra empty cells
this.cleanup(this.leftTr);
this.cleanup(this.rightTr);
this.cleanup(this.extrasTr);
this.fitToSize(target);
},
cleanup : function(row){
var cn = row.childNodes;
for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
if(!c.firstChild){
row.removeChild(c);
}
}
},
insertCell : function(c, side, pos){
var td = document.createElement('td');
td.className='x-toolbar-cell';
side.insertBefore(td, side.childNodes[pos]||null);
return td;
},
hideItem : function(item){
var h = (this.hiddens = this.hiddens || []);
h.push(item);
item.xtbHidden = true;
item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth;
item.hide();
},
unhideItem : function(item){
item.show();
item.xtbHidden = false;
this.hiddens.remove(item);
if(this.hiddens.length < 1){
delete this.hiddens;
}
},
getItemWidth : function(c){
return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth;
},
fitToSize : function(t){
if(this.container.enableOverflow === false){
return;
}
var w = t.dom.clientWidth;
var lw = this.lastWidth || 0;
this.lastWidth = w;
var iw = t.dom.firstChild.offsetWidth;
var clipWidth = w - this.triggerWidth;
var hideIndex = -1;
if(iw > w || (this.hiddens && w >= lw)){
var i, items = this.container.items.items, len = items.length, c;
var loopWidth = 0;
for(i = 0; i < len; i++) {
c = items[i];
if(!c.isFill){
loopWidth += this.getItemWidth(c);
if(loopWidth > clipWidth){
if(!c.xtbHidden){
this.hideItem(c);
}
}else{
if(c.xtbHidden){
this.unhideItem(c);
}
}
}
}
}
if(this.hiddens){
this.initMore();
if(!this.lastOverflow){
this.container.fireEvent('overflowchange', this.container, true);
this.lastOverflow = true;
}
}else if(this.more){
this.clearMenu();
this.more.destroy();
delete this.more;
if(this.lastOverflow){
this.container.fireEvent('overflowchange', this.container, false);
this.lastOverflow = false;
}
}
},
createMenuConfig : function(c, hideOnClick){
var cfg = Ext.apply({}, c.initialConfig),
group = c.toggleGroup;
Ext.apply(cfg, {
text: c.overflowText || c.text,
iconCls: c.iconCls,
icon: c.icon,
itemId: c.itemId,
disabled: c.disabled,
handler: c.handler,
scope: c.scope,
menu: c.menu,
hideOnClick: hideOnClick
});
if(group || c.enableToggle){
Ext.apply(cfg, {
group: group,
checked: c.pressed,
listeners: {
checkchange: function(item, checked){
c.toggle(checked);
}
}
});
}
delete cfg.xtype;
delete cfg.id;
return cfg;
},
// private
addComponentToMenu : function(m, c){
if(c instanceof Ext.Toolbar.Separator){
m.add('-');
}else if(Ext.isFunction(c.isXType)){
if(c.isXType('splitbutton')){
m.add(this.createMenuConfig(c, true));
}else if(c.isXType('button')){
m.add(this.createMenuConfig(c, !c.menu));
}else if(c.isXType('buttongroup')){
c.items.each(function(item){
this.addComponentToMenu(m, item);
}, this);
}
}
},
clearMenu : function(){
var m = this.moreMenu;
if(m && m.items){
this.moreMenu.items.each(function(item){
delete item.menu;
});
}
},
// private
beforeMoreShow : function(m){
var h = this.container.items.items,
len = h.length,
c,
prev,
needsSep = function(group, item){
return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
};
this.clearMenu();
m.removeAll();
for(var i = 0; i < len; i++){
c = h[i];
if(c.xtbHidden){
if(prev && (needsSep(c, prev) || needsSep(prev, c))){
m.add('-');
}
this.addComponentToMenu(m, c);
prev = c;
}
}
// put something so the menu isn't empty
// if no compatible items found
if(m.items.length < 1){
m.add(this.noItemsMenuText);
}
},
initMore : function(){
if(!this.more){
this.moreMenu = new Ext.menu.Menu({
listeners: {
beforeshow: this.beforeMoreShow,
scope: this
}
});
this.more = new Ext.Button({
iconCls: 'x-toolbar-more-icon',
cls: 'x-toolbar-more',
menu: this.moreMenu
});
var td = this.insertCell(this.more, this.extrasTr, 100);
this.more.render(td);
}
},
destroy : function(){
Ext.destroy(this.more, this.moreMenu);
Ext.layout.ToolbarLayout.superclass.destroy.call(this);
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
/**
* @class Ext.Toolbar
* @extends Ext.Container
* <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
* is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
* be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
* or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
* <p>Some items have shortcut strings for creation:</p>
* <pre>
<u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>
'->' 'tbfill' {@link Ext.Toolbar.Fill} begin using the right-justified button container
'-' 'tbseparator' {@link Ext.Toolbar.Separator} add a vertical separator bar between toolbar items
' ' 'tbspacer' {@link Ext.Toolbar.Spacer} add horiztonal space between elements
* </pre>
*
* Example usage of various elements:
* <pre><code>
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [
{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button'
},
{
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
{xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
'text 2',
{xtype: 'tbspacer', width: 50}, // add a 50px space
'text 3'
]
});
* </code></pre>
* Example adding a ComboBox within a menu of a button:
* <pre><code>
// ComboBox creation
var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['initials', 'fullname'],
data : [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
}),
displayField: 'fullname',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a name...',
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
});
// put ComboBox in a Menu
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
combo // A Field in a Menu
]
});
// add a Button with the menu
tb.add({
text:'Button w/ Menu',
menu: menu // assign menu by instance
});
tb.doLayout();
* </code></pre>
* @constructor
* Creates a new Toolbar
* @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
* @xtype toolbar
*/
Ext.Toolbar = function(config){
if(Ext.isArray(config)){
config = {items: config, layout: 'toolbar'};
} else {
config = Ext.apply({
layout: 'toolbar'
}, config);
if(config.buttons) {
config.items = config.buttons;
}
}
Ext.Toolbar.superclass.constructor.call(this, config);
};
(function(){
var T = Ext.Toolbar;
Ext.extend(T, Ext.Container, {
defaultType: 'button',
trackMenus : true,
internalDefaults: {removeMode: 'container', hideParent: true},
toolbarCls: 'x-toolbar',
initComponent : function(){
T.superclass.initComponent.call(this);
/**
* @event overflowchange
* Fires after the overflow state has changed.
* @param {Object} c The Container
* @param {Boolean} lastOverflow overflow state
*/
this.addEvents('overflowchange');
},
// private
onRender : function(ct, position){
if(!this.el){
if(!this.autoCreate){
this.autoCreate = {
cls: this.toolbarCls + ' x-small-editor'
};
}
this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
}
},
/**
* Adds element(s) to the toolbar -- this function takes a variable number of
* arguments of mixed type and adds them to the toolbar.
* @param {Mixed} arg1 The following types of arguments are all valid:<br />
* <ul>
* <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
* <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
* <li>Field: Any form field (equivalent to {@link #addField})</li>
* <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
* <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
* Note that there are a few special strings that are treated differently as explained next.</li>
* <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
* <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
* <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
* </ul>
* @param {Mixed} arg2
* @param {Mixed} etc.
* @method add
*/
// private
lookupComponent : function(c){
if(Ext.isString(c)){
if(c == '-'){
c = new T.Separator();
}else if(c == ' '){
c = new T.Spacer();
}else if(c == '->'){
c = new T.Fill();
}else{
c = new T.TextItem(c);
}
this.applyDefaults(c);
}else{
if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
c = this.constructItem(c);
}else if(c.tag){ // DomHelper spec
c = new T.Item({autoEl: c});
}else if(c.tagName){ // element
c = new T.Item({el:c});
}else if(Ext.isObject(c)){ // must be button config?
c = c.xtype ? this.constructItem(c) : this.constructButton(c);
}
}
return c;
},
// private
applyDefaults : function(c){
if(!Ext.isString(c)){
c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
var d = this.internalDefaults;
if(c.events){
Ext.applyIf(c.initialConfig, d);
Ext.apply(c, d);
}else{
Ext.applyIf(c, d);
}
}
return c;
},
// private
constructItem : function(item, type){
return Ext.create(item, type || this.defaultType);
},
/**
* Adds a separator
* @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
*/
addSeparator : function(){
return this.add(new T.Separator());
},
/**
* Adds a spacer element
* @return {Ext.Toolbar.Spacer} The spacer item
*/
addSpacer : function(){
return this.add(new T.Spacer());
},
/**
* Forces subsequent additions into the float:right toolbar
*/
addFill : function(){
this.add(new T.Fill());
},
/**
* Adds any standard HTML element to the toolbar
* @param {Mixed} el The element or id of the element to add
* @return {Ext.Toolbar.Item} The element's item
*/
addElement : function(el){
return this.addItem(new T.Item({el:el}));
},
/**
* Adds any Toolbar.Item or subclass
* @param {Ext.Toolbar.Item} item
* @return {Ext.Toolbar.Item} The item
*/
addItem : function(item){
return Ext.Toolbar.superclass.add.apply(this, arguments);
},
/**
* Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
* @param {Object/Array} config A button config or array of configs
* @return {Ext.Button/Array}
*/
addButton : function(config){
if(Ext.isArray(config)){
var buttons = [];
for(var i = 0, len = config.length; i < len; i++) {
buttons.push(this.addButton(config[i]));
}
return buttons;
}
return this.add(this.constructButton(config));
},
/**
* Adds text to the toolbar
* @param {String} text The text to add
* @return {Ext.Toolbar.Item} The element's item
*/
addText : function(text){
return this.addItem(new T.TextItem(text));
},
/**
* Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
* @param {Object} config
* @return {Ext.Toolbar.Item} The element's item
*/
addDom : function(config){
return this.add(new T.Item({autoEl: config}));
},
/**
* Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
* been rendered yet. For a field that has already been rendered, use {@link #addElement}.
* @param {Ext.form.Field} field
* @return {Ext.Toolbar.Item}
*/
addField : function(field){
return this.add(field);
},
/**
* Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
* @param {Number} index The index where the item is to be inserted
* @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
* inserted, or an array of buttons/configs.
* @return {Ext.Button/Item}
*/
insertButton : function(index, item){
if(Ext.isArray(item)){
var buttons = [];
for(var i = 0, len = item.length; i < len; i++) {
buttons.push(this.insertButton(index + i, item[i]));
}
return buttons;
}
return Ext.Toolbar.superclass.insert.call(this, index, item);
},
// private
initMenuTracking : function(item){
if(this.trackMenus && item.menu){
this.mon(item, {
'menutriggerover' : this.onButtonTriggerOver,
'menushow' : this.onButtonMenuShow,
'menuhide' : this.onButtonMenuHide,
scope: this
});
}
},
// private
constructButton : function(item){
var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType);
this.initMenuTracking(b);
return b;
},
// private
onDisable : function(){
this.items.each(function(item){
if(item.disable){
item.disable();
}
});
},
// private
onEnable : function(){
this.items.each(function(item){
if(item.enable){
item.enable();
}
});
},
// private
onButtonTriggerOver : function(btn){
if(this.activeMenuBtn && this.activeMenuBtn != btn){
this.activeMenuBtn.hideMenu();
btn.showMenu();
this.activeMenuBtn = btn;
}
},
// private
onButtonMenuShow : function(btn){
this.activeMenuBtn = btn;
},
// private
onButtonMenuHide : function(btn){
delete this.activeMenuBtn;
}
});
Ext.reg('toolbar', Ext.Toolbar);
/**
* @class Ext.Toolbar.Item
* @extends Ext.BoxComponent
* The base class that other non-interacting Toolbar Item classes should extend in order to
* get some basic common toolbar item functionality.
* @constructor
* Creates a new Item
* @param {HTMLElement} el
* @xtype tbitem
*/
T.Item = Ext.extend(Ext.BoxComponent, {
hideParent: true, // Hiding a Toolbar.Item hides its containing TD
enable:Ext.emptyFn,
disable:Ext.emptyFn,
focus:Ext.emptyFn
/**
* @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
*/
});
Ext.reg('tbitem', T.Item);
/**
* @class Ext.Toolbar.Separator
* @extends Ext.Toolbar.Item
* A simple class that adds a vertical separator bar between toolbar items
* (css class:<tt>'xtb-sep'</tt>). Example usage:
* <pre><code>
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbseparator'}, // or '-'
'Item 2'
]
});
</code></pre>
* @constructor
* Creates a new Separator
* @xtype tbseparator
*/
T.Separator = Ext.extend(T.Item, {
onRender : function(ct, position){
this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
}
});
Ext.reg('tbseparator', T.Separator);
/**
* @class Ext.Toolbar.Spacer
* @extends Ext.Toolbar.Item
* A simple element that adds extra horizontal space between items in a toolbar.
* By default a 2px wide space is added via css specification:<pre><code>
.x-toolbar .xtb-spacer {
width:2px;
}
* </code></pre>
* <p>Example usage:</p>
* <pre><code>
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbspacer'}, // or ' '
'Item 2',
// space width is also configurable via javascript
{xtype: 'tbspacer', width: 50}, // add a 50px space
'Item 3'
]
});
</code></pre>
* @constructor
* Creates a new Spacer
* @xtype tbspacer
*/
T.Spacer = Ext.extend(T.Item, {
/**
* @cfg {Number} width
* The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
*/
onRender : function(ct, position){
this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
}
});
Ext.reg('tbspacer', T.Spacer);
/**
* @class Ext.Toolbar.Fill
* @extends Ext.Toolbar.Spacer
* A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
* the right-justified button container.
* <pre><code>
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbfill'}, // or '->'
'Item 2'
]
});
</code></pre>
* @constructor
* Creates a new Fill
* @xtype tbfill
*/
T.Fill = Ext.extend(T.Item, {
// private
render : Ext.emptyFn,
isFill : true
});
Ext.reg('tbfill', T.Fill);
/**
* @class Ext.Toolbar.TextItem
* @extends Ext.Toolbar.Item
* A simple class that renders text directly into a toolbar
* (with css class:<tt>'xtb-text'</tt>). Example usage:
* <pre><code>
new Ext.Panel({
tbar : [
{xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
]
});
</code></pre>
* @constructor
* Creates a new TextItem
* @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
* @xtype tbtext
*/
T.TextItem = Ext.extend(T.Item, {
constructor: function(config){
if (Ext.isString(config)) {
config = { autoEl: {cls: 'xtb-text', html: config }};
} else {
config.autoEl = {cls: 'xtb-text', html: config.text || ''};
}
T.TextItem.superclass.constructor.call(this, config);
},
/**
* Updates this item's text, setting the text to be used as innerHTML.
* @param {String} t The text to display (html accepted).
*/
setText : function(t) {
if (this.rendered) {
this.el.dom.innerHTML = t;
} else {
this.autoEl.html = t;
}
}
});
Ext.reg('tbtext', T.TextItem);
// backwards compat
T.Button = Ext.extend(Ext.Button, {});
T.SplitButton = Ext.extend(Ext.SplitButton, {});
Ext.reg('tbbutton', T.Button);
Ext.reg('tbsplit', T.SplitButton);
})();
/**
* @class Ext.ButtonGroup
* @extends Ext.Panel
* Container for a group of buttons. Example usage:
* <pre><code>
var p = new Ext.Panel({
title: 'Panel with Button Group',
width: 300,
height:200,
renderTo: document.body,
html: 'whatever',
tbar: [{
xtype: 'buttongroup',
{@link #columns}: 3,
title: 'Clipboard',
items: [{
text: 'Paste',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton',
text: 'Menu Button',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{text: 'Menu Item 1'}]
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
}]
});
* </code></pre>
* @xtype buttongroup
*/
Ext.ButtonGroup = Ext.extend(Ext.Panel, {
/**
* @cfg {Number} columns The <tt>columns</tt> configuration property passed to the
* {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
*/
/**
* @cfg {String} baseCls Defaults to <tt>'x-btn-group'</tt>. See {@link Ext.Panel#baseCls}.
*/
baseCls: 'x-btn-group',
/**
* @cfg {String} layout Defaults to <tt>'table'</tt>. See {@link Ext.Container#layout}.
*/
layout:'table',
defaultType: 'button',
/**
* @cfg {Boolean} frame Defaults to <tt>true</tt>. See {@link Ext.Panel#frame}.
*/
frame: true,
internalDefaults: {removeMode: 'container', hideParent: true},
initComponent : function(){
this.layoutConfig = this.layoutConfig || {};
Ext.applyIf(this.layoutConfig, {
columns : this.columns
});
if(!this.title){
this.addClass('x-btn-group-notitle');
}
this.on('afterlayout', this.onAfterLayout, this);
Ext.ButtonGroup.superclass.initComponent.call(this);
},
applyDefaults : function(c){
c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
var d = this.internalDefaults;
if(c.events){
Ext.applyIf(c.initialConfig, d);
Ext.apply(c, d);
}else{
Ext.applyIf(c, d);
}
return c;
},
onAfterLayout : function(){
var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
this.body.setWidth(bodyWidth);
this.el.setWidth(bodyWidth + this.getFrameWidth());
}
/**
* @cfg {Array} tools @hide
*/
});
Ext.reg('buttongroup', Ext.ButtonGroup);
/** * @class Ext.PagingToolbar * @extends Ext.Toolbar * <p>As the amount of records increases, the time required for the browser to render * them increases. Paging is used to reduce the amount of data exchanged with the client. * Note: if there are more records/rows than can be viewed in the available screen area, vertical * scrollbars will be added.</p> * <p>Paging is typically handled on the server side (see exception below). The client sends * parameters to the server side, which the server needs to interpret and then respond with the * approprate data.</p> * <p><b>Ext.PagingToolbar</b> is a specialized toolbar that is bound to a {@link Ext.data.Store} * and provides automatic paging control. This Component {@link Ext.data.Store#load load}s blocks * of data into the <tt>{@link #store}</tt> by passing {@link Ext.data.Store#paramNames paramNames} used for * paging criteria.</p> * <p>PagingToolbar is typically used as one of the Grid's toolbars:</p> * <pre><code> Ext.QuickTips.init(); // to display button quicktips var myStore = new Ext.data.Store({ ... }); var myPageSize = 25; // server script should only send back 25 items var grid = new Ext.grid.GridPanel({ ... store: myStore, bbar: new Ext.PagingToolbar({ {@link #store}: myStore, // grid and PagingToolbar using same store {@link #displayInfo}: true, {@link #pageSize}: myPageSize, {@link #prependButtons}: true, items: [ 'text 1' ] }) }); * </code></pre> * * <p>To use paging, pass the paging requirements to the server when the store is first loaded.</p> * <pre><code> store.load({ params: { start: 0, // specify params for the first page load if using paging limit: myPageSize, foo: 'bar' } }); * </code></pre> * <p><u>Paging with Local Data</u></p> * <p>Paging can also be accomplished with local data using extensions:</p> * <div class="mdetail-params"><ul> * <li><a href="http://extjs.com/forum/showthread.php?t=57386">Ext.ux.data.PagingStore</a></li> * <li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li> * </ul></div> * @constructor * Create a new PagingToolbar * @param {Object} config The config object * @xtype paging */ (function() { var T = Ext.Toolbar; Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { /** * @cfg {Ext.data.Store} store * The {@link Ext.data.Store} the paging toolbar should use as its data source (required). */ /** * @cfg {Boolean} displayInfo * <tt>true</tt> to display the displayMsg (defaults to <tt>false</tt>) */ /** * @cfg {Number} pageSize * The number of records to display per page (defaults to <tt>20</tt>) */ pageSize : 20, /** * @cfg {Boolean} prependButtons * <tt>true</tt> to insert any configured <tt>items</tt> <i>before</i> the paging buttons. * Defaults to <tt>false</tt>. */ /** * @cfg {String} displayMsg * The paging status message to display (defaults to <tt>'Displaying {0} - {1} of {2}'</tt>). * Note that this string is formatted using the braced numbers <tt>{0}-{2}</tt> as tokens * that are replaced by the values for start, end and total respectively. These tokens should * be preserved when overriding this string if showing those values is desired. */ displayMsg : 'Displaying {0} - {1} of {2}', /** * @cfg {String} emptyMsg * The message to display when no records are found (defaults to 'No data to display') */ emptyMsg : 'No data to display', /** * @cfg {String} beforePageText * The text displayed before the input item (defaults to <tt>'Page'</tt>). */ beforePageText : 'Page', /** * @cfg {String} afterPageText * Customizable piece of the default paging text (defaults to <tt>'of {0}'</tt>). Note that * this string is formatted using <tt>{0}</tt> as a token that is replaced by the number of * total pages. This token should be preserved when overriding this string if showing the * total page count is desired. */ afterPageText : 'of {0}', /** * @cfg {String} firstText * The quicktip text displayed for the first page button (defaults to <tt>'First Page'</tt>). * <b>Note</b>: quick tips must be initialized for the quicktip to show. */ firstText : 'First Page', /** * @cfg {String} prevText * The quicktip text displayed for the previous page button (defaults to <tt>'Previous Page'</tt>). * <b>Note</b>: quick tips must be initialized for the quicktip to show. */ prevText : 'Previous Page', /** * @cfg {String} nextText * The quicktip text displayed for the next page button (defaults to <tt>'Next Page'</tt>). * <b>Note</b>: quick tips must be initialized for the quicktip to show. */ nextText : 'Next Page', /** * @cfg {String} lastText * The quicktip text displayed for the last page button (defaults to <tt>'Last Page'</tt>). * <b>Note</b>: quick tips must be initialized for the quicktip to show. */ lastText : 'Last Page', /** * @cfg {String} refreshText * The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>). * <b>Note</b>: quick tips must be initialized for the quicktip to show. */ refreshText : 'Refresh', /** * @deprecated * <b>The defaults for these should be set in the data store.</b> * Object mapping of parameter names used for load calls, initially set to: * <pre>{start: 'start', limit: 'limit'}</pre> */ /** * The number of records to display per page. See also <tt>{@link #cursor}</tt>. * @type Number * @property pageSize */ /** * Indicator for the record position. This property might be used to get the active page * number for example:<pre><code> * // t is reference to the paging toolbar instance * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize); * </code></pre> * @type Number * @property cursor */ initComponent : function(){ var pagingItems = [this.first = new T.Button({ tooltip: this.firstText, overflowText: this.firstText, iconCls: 'x-tbar-page-first', disabled: true, handler: this.moveFirst, scope: this }), this.prev = new T.Button({ tooltip: this.prevText, overflowText: this.prevText, iconCls: 'x-tbar-page-prev', disabled: true, handler: this.movePrevious, scope: this }), '-', this.beforePageText, this.inputItem = new Ext.form.NumberField({ cls: 'x-tbar-page-number', allowDecimals: false, allowNegative: false, enableKeyEvents: true, selectOnFocus: true, listeners: { scope: this, keydown: this.onPagingKeyDown, blur: this.onPagingBlur } }), this.afterTextItem = new T.TextItem({ text: String.format(this.afterPageText, 1) }), '-', this.next = new T.Button({ tooltip: this.nextText, overflowText: this.nextText, iconCls: 'x-tbar-page-next', disabled: true, handler: this.moveNext, scope: this }), this.last = new T.Button({ tooltip: this.lastText, overflowText: this.lastText, iconCls: 'x-tbar-page-last', disabled: true, handler: this.moveLast, scope: this }), '-', this.refresh = new T.Button({ tooltip: this.refreshText, overflowText: this.refreshText, iconCls: 'x-tbar-loading', handler: this.refresh, scope: this })]; var userItems = this.items || this.buttons || []; if (this.prependButtons) { this.items = userItems.concat(pagingItems); }else{ this.items = pagingItems.concat(userItems); } delete this.buttons; if(this.displayInfo){ this.items.push('->'); this.items.push(this.displayItem = new T.TextItem({})); } Ext.PagingToolbar.superclass.initComponent.call(this); this.addEvents( /** * @event change * Fires after the active page has been changed. * @param {Ext.PagingToolbar} this * @param {Object} pageData An object that has these properties:<ul> * <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as * returned by the server</div></li> * <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li> * <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from * the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li> * </ul> */ 'change', /** * @event beforechange * Fires just before the active page is changed. * Return false to prevent the active page from being changed. * @param {Ext.PagingToolbar} this * @param {Object} params An object hash of the parameters which the PagingToolbar will send when * loading the required page. This will contain:<ul> * <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to * be retrieved from the server</div></li> * <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li> * </ul> * <p>(note: the names of the <b>start</b> and <b>limit</b> properties are determined * by the store's {@link Ext.data.Store#paramNames paramNames} property.)</p> * <p>Parameters may be added as required in the event handler.</p> */ 'beforechange' ); this.on('afterlayout', this.onFirstLayout, this, {single: true}); this.cursor = 0; this.bindStore(this.store); }, // private onFirstLayout : function(){ if(this.dsLoaded){ this.onLoad.apply(this, this.dsLoaded); } }, // private updateInfo : function(){ if(this.displayItem){ var count = this.store.getCount(); var msg = count == 0 ? this.emptyMsg : String.format( this.displayMsg, this.cursor+1, this.cursor+count, this.store.getTotalCount() ); this.displayItem.setText(msg); } }, // private onLoad : function(store, r, o){ if(!this.rendered){ this.dsLoaded = [store, r, o]; return; } var p = this.getParams(); this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0; var d = this.getPageData(), ap = d.activePage, ps = d.pages; this.afterTextItem.setText(String.format(this.afterPageText, d.pages)); this.inputItem.setValue(ap); this.first.setDisabled(ap == 1); this.prev.setDisabled(ap == 1); this.next.setDisabled(ap == ps); this.last.setDisabled(ap == ps); this.refresh.enable(); this.updateInfo(); this.fireEvent('change', this, d); }, // private getPageData : function(){ var total = this.store.getTotalCount(); return { total : total, activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize), pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize) }; }, /** * Change the active page * @param {Integer} page The page to display */ changePage : function(page){ this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount())); }, // private onLoadError : function(){ if(!this.rendered){ return; } this.refresh.enable(); }, // private readPage : function(d){ var v = this.inputItem.getValue(), pageNum; if (!v || isNaN(pageNum = parseInt(v, 10))) { this.inputItem.setValue(d.activePage); return false; } return pageNum; }, onPagingFocus : function(){ this.inputItem.select(); }, //private onPagingBlur : function(e){ this.inputItem.setValue(this.getPageData().activePage); }, // private onPagingKeyDown : function(field, e){ var k = e.getKey(), d = this.getPageData(), pageNum; if (k == e.RETURN) { e.stopEvent(); pageNum = this.readPage(d); if(pageNum !== false){ pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1; this.doLoad(pageNum * this.pageSize); } }else if (k == e.HOME || k == e.END){ e.stopEvent(); pageNum = k == e.HOME ? 1 : d.pages; field.setValue(pageNum); }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){ e.stopEvent(); if((pageNum = this.readPage(d))){ var increment = e.shiftKey ? 10 : 1; if(k == e.DOWN || k == e.PAGEDOWN){ increment *= -1; } pageNum += increment; if(pageNum >= 1 & pageNum <= d.pages){ field.setValue(pageNum); } } } }, // private getParams : function(){ //retain backwards compat, allow params on the toolbar itself, if they exist. return this.paramNames || this.store.paramNames; }, // private beforeLoad : function(){ if(this.rendered && this.refresh){ this.refresh.disable(); } }, // private doLoad : function(start){ var o = {}, pn = this.getParams(); o[pn.start] = start; o[pn.limit] = this.pageSize; if(this.fireEvent('beforechange', this, o) !== false){ this.store.load({params:o}); } }, /** * Move to the first page, has the same effect as clicking the 'first' button. */ moveFirst : function(){ this.doLoad(0); }, /** * Move to the previous page, has the same effect as clicking the 'previous' button. */ movePrevious : function(){ this.doLoad(Math.max(0, this.cursor-this.pageSize)); }, /** * Move to the next page, has the same effect as clicking the 'next' button. */ moveNext : function(){ this.doLoad(this.cursor+this.pageSize); }, /** * Move to the last page, has the same effect as clicking the 'last' button. */ moveLast : function(){ var total = this.store.getTotalCount(), extra = total % this.pageSize; this.doLoad(extra ? (total - extra) : total - this.pageSize); }, /** * Refresh the current page, has the same effect as clicking the 'refresh' button. */ refresh : function(){ this.doLoad(this.cursor); }, /** * Binds the paging toolbar to the specified {@link Ext.data.Store} * @param {Store} store The store to bind to this toolbar * @param {Boolean} initial (Optional) true to not remove listeners */ bindStore : function(store, initial){ var doLoad; if(!initial && this.store){ this.store.un('beforeload', this.beforeLoad, this); this.store.un('load', this.onLoad, this); this.store.un('exception', this.onLoadError, this); if(store !== this.store && this.store.autoDestroy){ this.store.destroy(); } } if(store){ store = Ext.StoreMgr.lookup(store); store.on({ scope: this, beforeload: this.beforeLoad, load: this.onLoad, exception: this.onLoadError }); doLoad = store.getCount() > 0; } this.store = store; if(doLoad){ this.onLoad(store, null, {}); } }, /** * Unbinds the paging toolbar from the specified {@link Ext.data.Store} <b>(deprecated)</b> * @param {Ext.data.Store} store The data store to unbind */ unbind : function(store){ this.bindStore(null); }, /** * Binds the paging toolbar to the specified {@link Ext.data.Store} <b>(deprecated)</b> * @param {Ext.data.Store} store The data store to bind */ bind : function(store){ this.bindStore(store); }, // private onDestroy : function(){ this.bindStore(null); Ext.PagingToolbar.superclass.onDestroy.call(this); } }); })(); Ext.reg('paging', Ext.PagingToolbar);/**
* @class Ext.History
* @extends Ext.util.Observable
* History management component that allows you to register arbitrary tokens that signify application
* history state on navigation actions. You can then handle the history {@link #change} event in order
* to reset your application UI to the appropriate state when the user navigates forward or backward through
* the browser history stack.
* @singleton
*/
Ext.History = (function () {
var iframe, hiddenField;
var ready = false;
var currentToken;
function getHash() {
var href = top.location.href, i = href.indexOf("#");
return i >= 0 ? href.substr(i + 1) : null;
}
function doSave() {
hiddenField.value = currentToken;
}
function handleStateChange(token) {
currentToken = token;
Ext.History.fireEvent('change', token);
}
function updateIFrame (token) {
var html = ['<html><body><div id="state">',token,'</div></body></html>'].join('');
try {
var doc = iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
return true;
} catch (e) {
return false;
}
}
function checkIFrame() {
if (!iframe.contentWindow || !iframe.contentWindow.document) {
setTimeout(checkIFrame, 10);
return;
}
var doc = iframe.contentWindow.document;
var elem = doc.getElementById("state");
var token = elem ? elem.innerText : null;
var hash = getHash();
setInterval(function () {
doc = iframe.contentWindow.document;
elem = doc.getElementById("state");
var newtoken = elem ? elem.innerText : null;
var newHash = getHash();
if (newtoken !== token) {
token = newtoken;
handleStateChange(token);
top.location.hash = token;
hash = token;
doSave();
} else if (newHash !== hash) {
hash = newHash;
updateIFrame(newHash);
}
}, 50);
ready = true;
Ext.History.fireEvent('ready', Ext.History);
}
function startUp() {
currentToken = hiddenField.value ? hiddenField.value : getHash();
if (Ext.isIE) {
checkIFrame();
} else {
var hash = getHash();
setInterval(function () {
var newHash = getHash();
if (newHash !== hash) {
hash = newHash;
handleStateChange(hash);
doSave();
}
}, 50);
ready = true;
Ext.History.fireEvent('ready', Ext.History);
}
}
return {
/**
* The id of the hidden field required for storing the current history token.
* @type String
* @property
*/
fieldId: 'x-history-field',
/**
* The id of the iframe required by IE to manage the history stack.
* @type String
* @property
*/
iframeId: 'x-history-frame',
events:{},
/**
* Initialize the global History instance.
* @param {Boolean} onReady (optional) A callback function that will be called once the history
* component is fully initialized.
* @param {Object} scope (optional) The callback scope
*/
init: function (onReady, scope) {
if(ready) {
Ext.callback(onReady, scope, [this]);
return;
}
if(!Ext.isReady){
Ext.onReady(function(){
Ext.History.init(onReady, scope);
});
return;
}
hiddenField = Ext.getDom(Ext.History.fieldId);
if (Ext.isIE) {
iframe = Ext.getDom(Ext.History.iframeId);
}
this.addEvents('ready', 'change');
if(onReady){
this.on('ready', onReady, scope, {single:true});
}
startUp();
},
/**
* Add a new token to the history stack. This can be any arbitrary value, although it would
* commonly be the concatenation of a component id and another id marking the specifc history
* state of that component. Example usage:
* <pre><code>
// Handle tab changes on a TabPanel
tabPanel.on('tabchange', function(tabPanel, tab){
Ext.History.add(tabPanel.id + ':' + tab.id);
});
</code></pre>
* @param {String} token The value that defines a particular application-specific history state
* @param {Boolean} preventDuplicates When true, if the passed token matches the current token
* it will not save a new history step. Set to false if the same state can be saved more than once
* at the same history stack location (defaults to true).
*/
add: function (token, preventDup) {
if(preventDup !== false){
if(this.getToken() == token){
return true;
}
}
if (Ext.isIE) {
return updateIFrame(token);
} else {
top.location.hash = token;
return true;
}
},
/**
* Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
*/
back: function(){
history.go(-1);
},
/**
* Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
*/
forward: function(){
history.go(1);
},
/**
* Retrieves the currently-active history token.
* @return {String} The token
*/
getToken: function() {
return ready ? currentToken : getHash();
}
};
})();
Ext.apply(Ext.History, new Ext.util.Observable());/**
* @class Ext.Tip
* @extends Ext.Panel
* This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
* positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
* tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
* @constructor
* Create a new Tip
* @param {Object} config The configuration options
*/
Ext.Tip = Ext.extend(Ext.Panel, {
/**
* @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
*/
/**
* @cfg {Number} width
* Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of
* {@link #minWidth} or {@link #maxWidth}. The maximum supported value is 500.
*/
/**
* @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
*/
minWidth : 40,
/**
* @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
*/
maxWidth : 300,
/**
* @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
* for bottom-right shadow (defaults to "sides").
*/
shadow : "sides",
/**
* @cfg {String} defaultAlign <b>Experimental</b>. The default {@link Ext.Element#alignTo} anchor position value
* for this tip relative to its element of origin (defaults to "tl-bl?").
*/
defaultAlign : "tl-bl?",
autoRender: true,
quickShowInterval : 250,
// private panel overrides
frame:true,
hidden:true,
baseCls: 'x-tip',
floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
autoHeight:true,
closeAction: 'hide',
// private
initComponent : function(){
Ext.Tip.superclass.initComponent.call(this);
if(this.closable && !this.title){
this.elements += ',header';
}
},
// private
afterRender : function(){
Ext.Tip.superclass.afterRender.call(this);
if(this.closable){
this.addTool({
id: 'close',
handler: this[this.closeAction],
scope: this
});
}
},
/**
* Shows this tip at the specified XY position. Example usage:
* <pre><code>
// Show the tip at x:50 and y:100
tip.showAt([50,100]);
</code></pre>
* @param {Array} xy An array containing the x and y coordinates
*/
showAt : function(xy){
Ext.Tip.superclass.show.call(this);
if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
this.doAutoWidth();
}
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}
this.setPagePosition(xy[0], xy[1]);
},
// protected
doAutoWidth : function(){
var bw = this.body.getTextWidth();
if(this.title){
bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
}
bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr");
this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
// IE7 repaint bug on initial show
if(Ext.isIE7 && !this.repainted){
this.el.repaint();
this.repainted = true;
}
},
/**
* <b>Experimental</b>. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
* anchor position value. Example usage:
* <pre><code>
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');
// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');
</code></pre>
* @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
* @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
* {@link #defaultAlign} if specified).
*/
showBy : function(el, pos){
if(!this.rendered){
this.render(Ext.getBody());
}
this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
},
initDraggable : function(){
this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
this.header.addClass('x-tip-draggable');
}
});
// private - custom Tip DD implementation
Ext.Tip.DD = function(tip, config){
Ext.apply(this, config);
this.tip = tip;
Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
this.setHandleElId(tip.header.id);
this.scroll = false;
};
Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
moveOnly:true,
scroll:false,
headerOffsets:[100, 25],
startDrag : function(){
this.tip.el.disableShadow();
},
endDrag : function(e){
this.tip.el.enableShadow(true);
}
});/**
* @class Ext.ToolTip
* @extends Ext.Tip
* A standard tooltip implementation for providing additional information when hovering over a target element.
* @constructor
* Create a new Tooltip
* @param {Object} config The configuration options
*/
Ext.ToolTip = Ext.extend(Ext.Tip, {
/**
* When a Tooltip is configured with the {@link #delegate} option to cause selected child elements of the {@link #target}
* Element to each trigger a seperate show event, this property is set to the DOM element which triggered the show.
* @type DOMElement
* @property triggerElement
*/
/**
* @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger
* showing this ToolTip.
*/
/**
* @cfg {Boolean} autoHide True to automatically hide the tooltip after the mouse exits the target element
* or after the {@link #dismissDelay} has expired if set (defaults to true). If {@link closable} = true a close
* tool button will be rendered into the tooltip header.
*/
/**
* @cfg {Number} showDelay Delay in milliseconds before the tooltip displays after the mouse enters the
* target element (defaults to 500)
*/
showDelay: 500,
/**
* @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the target element but before the
* tooltip actually hides (defaults to 200). Set to 0 for the tooltip to hide immediately.
*/
hideDelay: 200,
/**
* @cfg {Number} dismissDelay Delay in milliseconds before the tooltip automatically hides (defaults to 5000).
* To disable automatic hiding, set dismissDelay = 0.
*/
dismissDelay: 5000,
/**
* @cfg {Array} mouseOffset An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
*/
/**
* @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
*/
trackMouse : false,
/**
* @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target element, false to
* anchor it relative to the mouse coordinates (defaults to true). When anchorToTarget is
* true, use {@link #defaultAlign} to control tooltip alignment to the target element. When
* anchorToTarget is false, use {@link #anchorPosition} instead to control alignment.
*/
anchorToTarget: true,
/**
* @cfg {Number} anchorOffset A numeric pixel value used to offset the default position of the
* anchor arrow (defaults to 0). When the anchor position is on the top or bottom of the tooltip,
* anchorOffset will be used as a horizontal offset. Likewise, when the anchor position is on the
* left or right side, anchorOffset will be used as a vertical offset.
*/
anchorOffset: 0,
/**
* @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements
* within the {@link #target} element to trigger showing and hiding the ToolTip as the mouse moves within the target.</p>
* <p>When specified, the child element of the target which caused a show event is placed into the {@link #triggerElement} property
* before the ToolTip is shown.</p>
* <p>This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains
* information specific to that element. For example:</p><pre><code>
var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
myGrid.tip = new Ext.ToolTip({
target: view.mainBody, // The overall target element.
delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
listeners: { // Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
}
}
});
});</code></pre>
*/
// private
targetCounter: 0,
constrainPosition: false,
// private
initComponent: function(){
Ext.ToolTip.superclass.initComponent.call(this);
this.lastActive = new Date();
this.initTarget(this.target);
this.origAnchor = this.anchor;
},
// private
onRender : function(ct, position){
Ext.ToolTip.superclass.onRender.call(this, ct, position);
this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
this.anchorEl = this.el.createChild({
cls: 'x-tip-anchor ' + this.anchorCls
});
},
// private