3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.ToolbarLayout
9 * @extends Ext.layout.ContainerLayout
10 * Layout manager implicitly used by Ext.Toolbar.
12 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
17 noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
20 onLayout : function(ct, target){
22 var align = ct.buttonAlign == 'center' ? 'center' : 'left';
23 target.addClass('x-toolbar-layout-ct');
24 target.insertHtml('beforeEnd',
25 '<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>');
26 this.leftTr = target.child('tr.x-toolbar-left-row', true);
27 this.rightTr = target.child('tr.x-toolbar-right-row', true);
28 this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
31 var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
33 items = ct.items.items;
35 for(var i = 0, len = items.length, c; i < len; i++, pos++) {
40 }else if(!c.rendered){
41 c.render(this.insertCell(c, side, pos));
43 if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
44 var td = this.insertCell(c, side, pos);
45 td.appendChild(c.getPositionEl().dom);
46 c.container = Ext.get(td);
50 //strip extra empty cells
51 this.cleanup(this.leftTr);
52 this.cleanup(this.rightTr);
53 this.cleanup(this.extrasTr);
54 this.fitToSize(target);
57 cleanup : function(row){
58 var cn = row.childNodes, i, c;
59 for(i = cn.length-1; i >= 0 && (c = cn[i]); i--){
66 insertCell : function(c, side, pos){
67 var td = document.createElement('td');
68 td.className='x-toolbar-cell';
69 side.insertBefore(td, side.childNodes[pos]||null);
73 hideItem : function(item){
74 var h = (this.hiddens = this.hiddens || []);
76 item.xtbHidden = true;
77 item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
81 unhideItem : function(item){
83 item.xtbHidden = false;
84 this.hiddens.remove(item);
85 if(this.hiddens.length < 1){
90 getItemWidth : function(c){
91 return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
94 fitToSize : function(t){
95 if(this.container.enableOverflow === false){
98 var w = t.dom.clientWidth,
99 lw = this.lastWidth || 0,
100 iw = t.dom.firstChild.offsetWidth,
101 clipWidth = w - this.triggerWidth,
106 if(iw > w || (this.hiddens && w >= lw)){
107 var i, items = this.container.items.items,
108 len = items.length, c,
111 for(i = 0; i < len; i++) {
114 loopWidth += this.getItemWidth(c);
115 if(loopWidth > clipWidth){
116 if(!(c.hidden || c.xtbHidden)){
119 }else if(c.xtbHidden){
127 if(!this.lastOverflow){
128 this.container.fireEvent('overflowchange', this.container, true);
129 this.lastOverflow = true;
135 if(this.lastOverflow){
136 this.container.fireEvent('overflowchange', this.container, false);
137 this.lastOverflow = false;
142 createMenuConfig : function(c, hideOnClick){
143 var cfg = Ext.apply({}, c.initialConfig),
144 group = c.toggleGroup;
147 text: c.overflowText || c.text,
151 disabled: c.disabled,
155 hideOnClick: hideOnClick
157 if(group || c.enableToggle){
162 checkchange: function(item, checked){
175 addComponentToMenu : function(m, c){
176 if(c instanceof Ext.Toolbar.Separator){
178 }else if(Ext.isFunction(c.isXType)){
179 if(c.isXType('splitbutton')){
180 m.add(this.createMenuConfig(c, true));
181 }else if(c.isXType('button')){
182 m.add(this.createMenuConfig(c, !c.menu));
183 }else if(c.isXType('buttongroup')){
184 c.items.each(function(item){
185 this.addComponentToMenu(m, item);
191 clearMenu : function(){
192 var m = this.moreMenu;
194 m.items.each(function(item){
201 beforeMoreShow : function(m){
202 var h = this.container.items.items,
206 needsSep = function(group, item){
207 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
212 for(var i = 0; i < len; i++){
215 if(prev && (needsSep(c, prev) || needsSep(prev, c))){
218 this.addComponentToMenu(m, c);
222 // put something so the menu isn't empty
223 // if no compatible items found
224 if(m.items.length < 1){
225 m.add(this.noItemsMenuText);
229 initMore : function(){
231 this.moreMenu = new Ext.menu.Menu({
232 ownerCt : this.container,
234 beforeshow: this.beforeMoreShow,
239 this.more = new Ext.Button({
240 iconCls : 'x-toolbar-more-icon',
241 cls : 'x-toolbar-more',
242 menu : this.moreMenu,
243 ownerCt : this.container
245 var td = this.insertCell(this.more, this.extrasTr, 100);
246 this.more.render(td);
250 destroy : function(){
251 Ext.destroy(this.more, this.moreMenu);
254 delete this.extrasTr;
255 Ext.layout.ToolbarLayout.superclass.destroy.call(this);
259 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;