/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-/**
- * @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,
- forceLayout: true,
-
- noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
- // private
- onLayout : function(ct, target){
- if(!this.leftTr){
- var align = ct.buttonAlign == 'center' ? 'center' : 'left';
- target.addClass('x-toolbar-layout-ct');
- target.insertHtml('beforeEnd',
- '<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="' + align + '"><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 = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
- pos = 0,
- 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.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);
- },
-
- 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.getPositionEl().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.getPositionEl().dom.parentNode.offsetWidth;
- },
-
- fitToSize : function(t){
- if(this.container.enableOverflow === false){
- return;
- }
- var w = t.dom.clientWidth,
- lw = this.lastWidth || 0,
- iw = t.dom.firstChild.offsetWidth,
- clipWidth = w - this.triggerWidth,
- hideIndex = -1;
-
- this.lastWidth = w;
-
- if(iw > w || (this.hiddens && w >= lw)){
- var i, items = this.container.items.items,
- len = items.length, c,
- loopWidth = 0;
-
- for(i = 0; i < len; i++) {
- c = items[i];
- if(!c.isFill){
- loopWidth += this.getItemWidth(c);
- if(loopWidth > clipWidth){
- if(!(c.hidden || 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.ownerCt;
- 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){
- m.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.moreMenu.ownerCt = this.container;
- 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);
- }
- },
-
- onRemove : function(c){
- delete this.leftTr;
- delete this.rightTr;
- delete this.extrasTr;
- Ext.layout.ToolbarLayout.superclass.onRemove.call(this, c);
- },
-
- destroy : function(){
- Ext.destroy(this.more, this.moreMenu);
- delete this.leftTr;
- delete this.rightTr;
- delete this.extrasTr;
- Ext.layout.ToolbarLayout.superclass.destroy.call(this);
- }
- /**
- * @property activeItem
- * @hide
- */
-});
-
-Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
-
/**
* @class Ext.Toolbar
* @extends Ext.Container
* case instead of an array).
* See {@link Ext.Container#layout} for additional information.
*/
+
+ enableOverflow : false,
+
/**
* @cfg {Boolean} enableOverflow
* Defaults to false. Configure <code>true<code> to make the toolbar provide a button
* which activates a dropdown Menu to show items which overflow the Toolbar's width.
*/
+ /**
+ * @cfg {String} buttonAlign
+ * <p>The default position at which to align child items. Defaults to <code>"left"</code></p>
+ * <p>May be specified as <code>"center"</code> to cause items added before a Fill (A <code>"->"</code>) item
+ * to be centered in the Toolbar. Items added after a Fill are still right-aligned.</p>
+ * <p>Specify as <code>"right"</code> to right align all child items.</p>
+ */
trackMenus : true,
internalDefaults: {removeMode: 'container', hideParent: true},
onAdd : function(c){
Ext.Toolbar.superclass.onAdd.call(this);
this.trackMenu(c);
+ if(this.disabled){
+ c.disable();
+ }
},
// private
Ext.reg('tbsplit', T.SplitButton);
})();
-/**\r
- * @class Ext.ButtonGroup\r
- * @extends Ext.Panel\r
- * Container for a group of buttons. Example usage:\r
- * <pre><code>\r
-var p = new Ext.Panel({\r
- title: 'Panel with Button Group',\r
- width: 300,\r
- height:200,\r
- renderTo: document.body,\r
- html: 'whatever',\r
- tbar: [{\r
- xtype: 'buttongroup',\r
- {@link #columns}: 3,\r
- title: 'Clipboard',\r
- items: [{\r
- text: 'Paste',\r
- scale: 'large',\r
- rowspan: 3, iconCls: 'add',\r
- iconAlign: 'top',\r
- cls: 'x-btn-as-arrow'\r
- },{\r
- xtype:'splitbutton',\r
- text: 'Menu Button',\r
- scale: 'large',\r
- rowspan: 3,\r
- iconCls: 'add',\r
- iconAlign: 'top',\r
- arrowAlign:'bottom',\r
- menu: [{text: 'Menu Item 1'}]\r
- },{\r
- xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]\r
- },{\r
- text: 'Copy', iconCls: 'add16'\r
- },{\r
- text: 'Format', iconCls: 'add16'\r
- }]\r
- }]\r
-});\r
- * </code></pre>\r
- * @constructor\r
- * Create a new ButtonGroup.\r
- * @param {Object} config The config object\r
- * @xtype buttongroup\r
- */\r
-Ext.ButtonGroup = Ext.extend(Ext.Panel, {\r
- /**\r
- * @cfg {Number} columns The <tt>columns</tt> configuration property passed to the\r
- * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.\r
- */\r
- /**\r
- * @cfg {String} baseCls Defaults to <tt>'x-btn-group'</tt>. See {@link Ext.Panel#baseCls}.\r
- */\r
- baseCls: 'x-btn-group',\r
- /**\r
- * @cfg {String} layout Defaults to <tt>'table'</tt>. See {@link Ext.Container#layout}.\r
- */\r
- layout:'table',\r
- defaultType: 'button',\r
- /**\r
- * @cfg {Boolean} frame Defaults to <tt>true</tt>. See {@link Ext.Panel#frame}.\r
- */\r
- frame: true,\r
- internalDefaults: {removeMode: 'container', hideParent: true},\r
-\r
- initComponent : function(){\r
- this.layoutConfig = this.layoutConfig || {};\r
- Ext.applyIf(this.layoutConfig, {\r
- columns : this.columns\r
- });\r
- if(!this.title){\r
- this.addClass('x-btn-group-notitle');\r
- }\r
- this.on('afterlayout', this.onAfterLayout, this);\r
- Ext.ButtonGroup.superclass.initComponent.call(this);\r
- },\r
-\r
- applyDefaults : function(c){\r
- c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);\r
- var d = this.internalDefaults;\r
- if(c.events){\r
- Ext.applyIf(c.initialConfig, d);\r
- Ext.apply(c, d);\r
- }else{\r
- Ext.applyIf(c, d);\r
- }\r
- return c;\r
- },\r
-\r
- onAfterLayout : function(){\r
- var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;\r
- this.body.setWidth(bodyWidth);\r
- this.el.setWidth(bodyWidth + this.getFrameWidth());\r
- }\r
- /**\r
- * @cfg {Array} tools @hide\r
- */\r
-});\r
-\r
-Ext.reg('buttongroup', Ext.ButtonGroup);\r
+/**
+ * @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>
+ * @constructor
+ * Create a new ButtonGroup.
+ * @param {Object} config The config object
+ * @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
git.ithinksw.org / extjs.git / blobdiff