364 lines
12 KiB
HTML
364 lines
12 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-boxOverflow-Menu'>/**
|
|
</span> * @class Ext.layout.boxOverflow.Menu
|
|
* @extends Ext.layout.boxOverflow.None
|
|
* Description
|
|
*/
|
|
Ext.layout.boxOverflow.Menu = Ext.extend(Ext.layout.boxOverflow.None, {
|
|
<span id='Ext-layout-boxOverflow-Menu-property-afterCls'> /**
|
|
</span> * @cfg afterCls
|
|
* @type String
|
|
* CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,
|
|
* which must always be present at the rightmost edge of the Container
|
|
*/
|
|
afterCls: 'x-strip-right',
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-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-boxOverflow-Menu-method-constructor'> constructor: function(layout) {
|
|
</span> Ext.layout.boxOverflow.Menu.superclass.constructor.apply(this, arguments);
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-property-menuItems'> /**
|
|
</span> * @property menuItems
|
|
* @type Array
|
|
* Array of all items that are currently hidden and should go into the dropdown menu
|
|
*/
|
|
this.menuItems = [];
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-createInnerElements'> /**
|
|
</span> * @private
|
|
* Creates the beforeCt, innerCt and afterCt elements if they have not already been created
|
|
* @param {Ext.Container} container The Container attached to this Layout instance
|
|
* @param {Ext.Element} target The target Element
|
|
*/
|
|
createInnerElements: function() {
|
|
if (!this.afterCt) {
|
|
this.afterCt = this.layout.innerCt.insertSibling({cls: this.afterCls}, 'before');
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-clearOverflow'> /**
|
|
</span> * @private
|
|
*/
|
|
clearOverflow: function(calculations, targetSize) {
|
|
var newWidth = targetSize.width + (this.afterCt ? this.afterCt.getWidth() : 0),
|
|
items = this.menuItems;
|
|
|
|
this.hideTrigger();
|
|
|
|
for (var index = 0, length = items.length; index < length; index++) {
|
|
items.pop().component.show();
|
|
}
|
|
|
|
return {
|
|
targetSize: {
|
|
height: targetSize.height,
|
|
width : newWidth
|
|
}
|
|
};
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-showTrigger'> /**
|
|
</span> * @private
|
|
*/
|
|
showTrigger: function() {
|
|
this.createMenu();
|
|
this.menuTrigger.show();
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-hideTrigger'> /**
|
|
</span> * @private
|
|
*/
|
|
hideTrigger: function() {
|
|
if (this.menuTrigger != undefined) {
|
|
this.menuTrigger.hide();
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-beforeMenuShow'> /**
|
|
</span> * @private
|
|
* Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can.
|
|
*/
|
|
beforeMenuShow: function(menu) {
|
|
var items = this.menuItems,
|
|
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].component;
|
|
|
|
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-boxOverflow-Menu-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-boxOverflow-Menu-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-boxOverflow-Menu-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-boxOverflow-Menu-method-createMenu'> /**
|
|
</span> * @private
|
|
* Creates the overflow trigger and menu used when enableOverflow is set to true and the items
|
|
* in the layout are too wide to fit in the space available
|
|
*/
|
|
createMenu: function() {
|
|
if (!this.menuTrigger) {
|
|
this.createInnerElements();
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-property-menu'> /**
|
|
</span> * @private
|
|
* @property menu
|
|
* @type Ext.menu.Menu
|
|
* The expand menu - holds items for every item that cannot be shown
|
|
* because the container is currently not large enough.
|
|
*/
|
|
this.menu = new Ext.menu.Menu({
|
|
ownerCt : this.layout.container,
|
|
listeners: {
|
|
scope: this,
|
|
beforeshow: this.beforeMenuShow
|
|
}
|
|
});
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-property-menuTrigger'> /**
|
|
</span> * @private
|
|
* @property menuTrigger
|
|
* @type Ext.Button
|
|
* The expand button which triggers the overflow menu to be shown
|
|
*/
|
|
this.menuTrigger = new Ext.Button({
|
|
iconCls : 'x-toolbar-more-icon',
|
|
cls : 'x-toolbar-more',
|
|
menu : this.menu,
|
|
renderTo: this.afterCt
|
|
});
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-Menu-method-destroy'> /**
|
|
</span> * @private
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.menu, this.menuTrigger);
|
|
}
|
|
});
|
|
|
|
Ext.layout.boxOverflow.menu = Ext.layout.boxOverflow.Menu;
|
|
|
|
|
|
<span id='Ext-layout-boxOverflow-HorizontalMenu'>/**
|
|
</span> * @class Ext.layout.boxOverflow.HorizontalMenu
|
|
* @extends Ext.layout.boxOverflow.Menu
|
|
* Description
|
|
*/
|
|
Ext.layout.boxOverflow.HorizontalMenu = Ext.extend(Ext.layout.boxOverflow.Menu, {
|
|
|
|
<span id='Ext-layout-boxOverflow-HorizontalMenu-method-constructor'> constructor: function() {
|
|
</span> Ext.layout.boxOverflow.HorizontalMenu.superclass.constructor.apply(this, arguments);
|
|
|
|
var me = this,
|
|
layout = me.layout,
|
|
origFunction = layout.calculateChildBoxes;
|
|
|
|
layout.calculateChildBoxes = function(visibleItems, targetSize) {
|
|
var calcs = origFunction.apply(layout, arguments),
|
|
meta = calcs.meta,
|
|
items = me.menuItems;
|
|
|
|
//calculate the width of the items currently hidden solely because there is not enough space
|
|
//to display them
|
|
var hiddenWidth = 0;
|
|
for (var index = 0, length = items.length; index < length; index++) {
|
|
hiddenWidth += items[index].width;
|
|
}
|
|
|
|
meta.minimumWidth += hiddenWidth;
|
|
meta.tooNarrow = meta.minimumWidth > targetSize.width;
|
|
|
|
return calcs;
|
|
};
|
|
},
|
|
|
|
<span id='Ext-layout-boxOverflow-HorizontalMenu-method-handleOverflow'> handleOverflow: function(calculations, targetSize) {
|
|
</span> this.showTrigger();
|
|
|
|
var newWidth = targetSize.width - this.afterCt.getWidth(),
|
|
boxes = calculations.boxes,
|
|
usedWidth = 0,
|
|
recalculate = false;
|
|
|
|
//calculate the width of all visible items and any spare width
|
|
for (var index = 0, length = boxes.length; index < length; index++) {
|
|
usedWidth += boxes[index].width;
|
|
}
|
|
|
|
var spareWidth = newWidth - usedWidth,
|
|
showCount = 0;
|
|
|
|
//see if we can re-show any of the hidden components
|
|
for (var index = 0, length = this.menuItems.length; index < length; index++) {
|
|
var hidden = this.menuItems[index],
|
|
comp = hidden.component,
|
|
width = hidden.width;
|
|
|
|
if (width < spareWidth) {
|
|
comp.show();
|
|
|
|
spareWidth -= width;
|
|
showCount ++;
|
|
recalculate = true;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (recalculate) {
|
|
this.menuItems = this.menuItems.slice(showCount);
|
|
} else {
|
|
for (var i = boxes.length - 1; i >= 0; i--) {
|
|
var item = boxes[i].component,
|
|
right = boxes[i].left + boxes[i].width;
|
|
|
|
if (right >= newWidth) {
|
|
this.menuItems.unshift({
|
|
component: item,
|
|
width : boxes[i].width
|
|
});
|
|
|
|
item.hide();
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.menuItems.length == 0) {
|
|
this.hideTrigger();
|
|
}
|
|
|
|
return {
|
|
targetSize: {
|
|
height: targetSize.height,
|
|
width : newWidth
|
|
},
|
|
recalculate: recalculate
|
|
};
|
|
}
|
|
});
|
|
|
|
Ext.layout.boxOverflow.menu.hbox = Ext.layout.boxOverflow.HorizontalMenu;</pre>
|
|
</body>
|
|
</html>
|