453 lines
17 KiB
HTML
453 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-layout-ToolbarLayout'>/**
|
|
</span> * @class Ext.layout.ToolbarLayout
|
|
* @extends Ext.layout.ContainerLayout
|
|
* Layout manager used by Ext.Toolbar. This is highly specialised for use by Toolbars and would not
|
|
* usually be used by any other class.
|
|
*/
|
|
Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
|
|
<span id='Ext-layout-ToolbarLayout-property-monitorResize'> monitorResize : true,
|
|
</span>
|
|
<span id='Ext-layout-ToolbarLayout-property-type'> type: 'toolbar',
|
|
</span>
|
|
<span id='Ext-layout-ToolbarLayout-property-triggerWidth'> /**
|
|
</span> * @property triggerWidth
|
|
* @type Number
|
|
* The width allocated for the menu trigger at the extreme right end of the Toolbar
|
|
*/
|
|
triggerWidth: 18,
|
|
|
|
<span id='Ext-layout-ToolbarLayout-property-noItemsMenuText'> /**
|
|
</span> * @property noItemsMenuText
|
|
* @type String
|
|
* HTML fragment to render into the toolbar overflow menu if there are no items to display
|
|
*/
|
|
noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
|
|
|
|
<span id='Ext-layout-ToolbarLayout-property-lastOverflow'> /**
|
|
</span> * @private
|
|
* @property lastOverflow
|
|
* @type Boolean
|
|
* Used internally to record whether the last layout caused an overflow or not
|
|
*/
|
|
lastOverflow: false,
|
|
|
|
<span id='Ext-layout-ToolbarLayout-property-tableHTML'> /**
|
|
</span> * @private
|
|
* @property tableHTML
|
|
* @type String
|
|
* String used to build the HTML injected to support the Toolbar's layout. The align property is
|
|
* injected into this string inside the td.x-toolbar-left element during onLayout.
|
|
*/
|
|
tableHTML: [
|
|
'<table cellspacing="0" class="x-toolbar-ct">',
|
|
'<tbody>',
|
|
'<tr>',
|
|
'<td class="x-toolbar-left" align="{0}">',
|
|
'<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>'
|
|
].join(""),
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-onLayout'> /**
|
|
</span> * @private
|
|
* Create the wrapping Toolbar HTML and render/move all the items into the correct places
|
|
*/
|
|
onLayout : function(ct, target) {
|
|
//render the Toolbar <table> HTML if it's not already present
|
|
if (!this.leftTr) {
|
|
var align = ct.buttonAlign == 'center' ? 'center' : 'left';
|
|
|
|
target.addClass('x-toolbar-layout-ct');
|
|
target.insertHtml('beforeEnd', String.format(this.tableHTML, align));
|
|
|
|
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);
|
|
|
|
if (this.hiddenItem == undefined) {
|
|
<span id='Ext-layout-ToolbarLayout-property-hiddenItems'> /**
|
|
</span> * @property hiddenItems
|
|
* @type Array
|
|
* Holds all items that are currently hidden due to there not being enough space to render them
|
|
* These items will appear on the expand menu.
|
|
*/
|
|
this.hiddenItems = [];
|
|
}
|
|
}
|
|
|
|
var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
|
|
items = ct.items.items,
|
|
position = 0;
|
|
|
|
//render each item if not already rendered, place it into the correct (left or right) target
|
|
for (var i = 0, len = items.length, c; i < len; i++, position++) {
|
|
c = items[i];
|
|
|
|
if (c.isFill) {
|
|
side = this.rightTr;
|
|
position = -1;
|
|
} else if (!c.rendered) {
|
|
c.render(this.insertCell(c, side, position));
|
|
this.configureItem(c);
|
|
} else {
|
|
if (!c.xtbHidden && !this.isValidParent(c, side.childNodes[position])) {
|
|
var td = this.insertCell(c, side, position);
|
|
td.appendChild(c.getPositionEl().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);
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-cleanup'> /**
|
|
</span> * @private
|
|
* Removes any empty nodes from the given element
|
|
* @param {Ext.Element} el The element to clean up
|
|
*/
|
|
cleanup : function(el) {
|
|
var cn = el.childNodes, i, c;
|
|
|
|
for (i = cn.length-1; i >= 0 && (c = cn[i]); i--) {
|
|
if (!c.firstChild) {
|
|
el.removeChild(c);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-insertCell'> /**
|
|
</span> * @private
|
|
* Inserts the given Toolbar item into the given element
|
|
* @param {Ext.Component} c The component to add
|
|
* @param {Ext.Element} target The target to add the component to
|
|
* @param {Number} position The position to add the component at
|
|
*/
|
|
insertCell : function(c, target, position) {
|
|
var td = document.createElement('td');
|
|
td.className = 'x-toolbar-cell';
|
|
|
|
target.insertBefore(td, target.childNodes[position] || null);
|
|
|
|
return td;
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-hideItem'> /**
|
|
</span> * @private
|
|
* Hides an item because it will not fit in the available width. The item will be unhidden again
|
|
* if the Toolbar is resized to be large enough to show it
|
|
* @param {Ext.Component} item The item to hide
|
|
*/
|
|
hideItem : function(item) {
|
|
this.hiddenItems.push(item);
|
|
|
|
item.xtbHidden = true;
|
|
item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
|
|
item.hide();
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-unhideItem'> /**
|
|
</span> * @private
|
|
* Unhides an item that was previously hidden due to there not being enough space left on the Toolbar
|
|
* @param {Ext.Component} item The item to show
|
|
*/
|
|
unhideItem : function(item) {
|
|
item.show();
|
|
item.xtbHidden = false;
|
|
this.hiddenItems.remove(item);
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-getItemWidth'> /**
|
|
</span> * @private
|
|
* Returns the width of the given toolbar item. If the item is currently hidden because there
|
|
* is not enough room to render it, its previous width is returned
|
|
* @param {Ext.Component} c The component to measure
|
|
* @return {Number} The width of the item
|
|
*/
|
|
getItemWidth : function(c) {
|
|
return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-fitToSize'> /**
|
|
</span> * @private
|
|
* Called at the end of onLayout. At this point the Toolbar has already been resized, so we need
|
|
* to fit the items into the available width. We add up the width required by all of the items in
|
|
* the toolbar - if we don't have enough space we hide the extra items and render the expand menu
|
|
* trigger.
|
|
* @param {Ext.Element} target The Element the Toolbar is currently laid out within
|
|
*/
|
|
fitToSize : function(target) {
|
|
if (this.container.enableOverflow === false) {
|
|
return;
|
|
}
|
|
|
|
var width = target.dom.clientWidth,
|
|
tableWidth = target.dom.firstChild.offsetWidth,
|
|
clipWidth = width - this.triggerWidth,
|
|
lastWidth = this.lastWidth || 0,
|
|
|
|
hiddenItems = this.hiddenItems,
|
|
hasHiddens = hiddenItems.length != 0,
|
|
isLarger = width >= lastWidth;
|
|
|
|
this.lastWidth = width;
|
|
|
|
if (tableWidth > width || (hasHiddens && isLarger)) {
|
|
var items = this.container.items.items,
|
|
len = items.length,
|
|
loopWidth = 0,
|
|
item;
|
|
|
|
for (var i = 0; i < len; i++) {
|
|
item = items[i];
|
|
|
|
if (!item.isFill) {
|
|
loopWidth += this.getItemWidth(item);
|
|
if (loopWidth > clipWidth) {
|
|
if (!(item.hidden || item.xtbHidden)) {
|
|
this.hideItem(item);
|
|
}
|
|
} else if (item.xtbHidden) {
|
|
this.unhideItem(item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//test for number of hidden items again here because they may have changed above
|
|
hasHiddens = hiddenItems.length != 0;
|
|
|
|
if (hasHiddens) {
|
|
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;
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-createMenuConfig'> /**
|
|
</span> * @private
|
|
* Returns a menu config for a given component. This config is used to create a menu item
|
|
* to be added to the expander menu
|
|
* @param {Ext.Component} component The component to create the config for
|
|
* @param {Boolean} hideOnClick Passed through to the menu item
|
|
*/
|
|
createMenuConfig : function(component, hideOnClick){
|
|
var config = Ext.apply({}, component.initialConfig),
|
|
group = component.toggleGroup;
|
|
|
|
Ext.copyTo(config, component, [
|
|
'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
|
|
]);
|
|
|
|
Ext.apply(config, {
|
|
text : component.overflowText || component.text,
|
|
hideOnClick: hideOnClick
|
|
});
|
|
|
|
if (group || component.enableToggle) {
|
|
Ext.apply(config, {
|
|
group : group,
|
|
checked: component.pressed,
|
|
listeners: {
|
|
checkchange: function(item, checked){
|
|
component.toggle(checked);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
delete config.ownerCt;
|
|
delete config.xtype;
|
|
delete config.id;
|
|
|
|
return config;
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-addComponentToMenu'> /**
|
|
</span> * @private
|
|
* Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.
|
|
* @param {Ext.menu.Menu} menu The menu to add to
|
|
* @param {Ext.Component} component The component to add
|
|
*/
|
|
addComponentToMenu : function(menu, component) {
|
|
if (component instanceof Ext.Toolbar.Separator) {
|
|
menu.add('-');
|
|
|
|
} else if (Ext.isFunction(component.isXType)) {
|
|
if (component.isXType('splitbutton')) {
|
|
menu.add(this.createMenuConfig(component, true));
|
|
|
|
} else if (component.isXType('button')) {
|
|
menu.add(this.createMenuConfig(component, !component.menu));
|
|
|
|
} else if (component.isXType('buttongroup')) {
|
|
component.items.each(function(item){
|
|
this.addComponentToMenu(menu, item);
|
|
}, this);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-clearMenu'> /**
|
|
</span> * @private
|
|
* Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as
|
|
* splitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item
|
|
*/
|
|
clearMenu : function(){
|
|
var menu = this.moreMenu;
|
|
if (menu && menu.items) {
|
|
menu.items.each(function(item){
|
|
delete item.menu;
|
|
});
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-beforeMoreShow'> /**
|
|
</span> * @private
|
|
* Called before the expand menu is shown, this rebuilds the menu since it was last shown because
|
|
* it is possible that the items hidden due to space limitations on the Toolbar have changed since.
|
|
* @param {Ext.menu.Menu} m The menu
|
|
*/
|
|
beforeMoreShow : function(menu) {
|
|
var items = this.container.items.items,
|
|
len = items.length,
|
|
item,
|
|
prev;
|
|
|
|
var needsSep = function(group, item){
|
|
return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
|
|
};
|
|
|
|
this.clearMenu();
|
|
menu.removeAll();
|
|
for (var i = 0; i < len; i++) {
|
|
item = items[i];
|
|
if (item.xtbHidden) {
|
|
if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
|
|
menu.add('-');
|
|
}
|
|
this.addComponentToMenu(menu, item);
|
|
prev = item;
|
|
}
|
|
}
|
|
|
|
// put something so the menu isn't empty if no compatible items found
|
|
if (menu.items.length < 1) {
|
|
menu.add(this.noItemsMenuText);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-initMore'> /**
|
|
</span> * @private
|
|
* Creates the expand trigger and menu, adding them to the <tr> at the extreme right of the
|
|
* Toolbar table
|
|
*/
|
|
initMore : function(){
|
|
if (!this.more) {
|
|
<span id='Ext-layout-ToolbarLayout-property-moreMenu'> /**
|
|
</span> * @private
|
|
* @property moreMenu
|
|
* @type Ext.menu.Menu
|
|
* The expand menu - holds items for every Toolbar item that cannot be shown
|
|
* because the Toolbar is currently not wide enough.
|
|
*/
|
|
this.moreMenu = new Ext.menu.Menu({
|
|
ownerCt : this.container,
|
|
listeners: {
|
|
beforeshow: this.beforeMoreShow,
|
|
scope: this
|
|
}
|
|
});
|
|
|
|
<span id='Ext-layout-ToolbarLayout-property-more'> /**
|
|
</span> * @private
|
|
* @property more
|
|
* @type Ext.Button
|
|
* The expand button which triggers the overflow menu to be shown
|
|
*/
|
|
this.more = new Ext.Button({
|
|
iconCls: 'x-toolbar-more-icon',
|
|
cls : 'x-toolbar-more',
|
|
menu : this.moreMenu,
|
|
ownerCt: this.container
|
|
});
|
|
|
|
var td = this.insertCell(this.more, this.extrasTr, 100);
|
|
this.more.render(td);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ToolbarLayout-method-destroy'> destroy : function(){
|
|
</span> Ext.destroy(this.more, this.moreMenu);
|
|
delete this.leftTr;
|
|
delete this.rightTr;
|
|
delete this.extrasTr;
|
|
Ext.layout.ToolbarLayout.superclass.destroy.call(this);
|
|
}
|
|
});
|
|
|
|
Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
|
|
</pre>
|
|
</body>
|
|
</html>
|