1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.layout.ToolbarLayout |
---|
9 | * @extends Ext.layout.ContainerLayout |
---|
10 | * Layout manager implicitly used by Ext.Toolbar. |
---|
11 | */ |
---|
12 | Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, { |
---|
13 | monitorResize : true, |
---|
14 | triggerWidth : 18, |
---|
15 | lastOverflow : false, |
---|
16 | |
---|
17 | noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>', |
---|
18 | // private |
---|
19 | onLayout : function(ct, target){ |
---|
20 | if(!this.leftTr){ |
---|
21 | target.addClass('x-toolbar-layout-ct'); |
---|
22 | target.insertHtml('beforeEnd', |
---|
23 | '<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>'); |
---|
24 | this.leftTr = target.child('tr.x-toolbar-left-row', true); |
---|
25 | this.rightTr = target.child('tr.x-toolbar-right-row', true); |
---|
26 | this.extrasTr = target.child('tr.x-toolbar-extras-row', true); |
---|
27 | } |
---|
28 | var side = this.leftTr; |
---|
29 | var pos = 0; |
---|
30 | |
---|
31 | var items = ct.items.items; |
---|
32 | for(var i = 0, len = items.length, c; i < len; i++, pos++) { |
---|
33 | c = items[i]; |
---|
34 | if(c.isFill){ |
---|
35 | side = this.rightTr; |
---|
36 | pos = -1; |
---|
37 | }else if(!c.rendered){ |
---|
38 | c.render(this.insertCell(c, side, pos)); |
---|
39 | }else{ |
---|
40 | if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){ |
---|
41 | var td = this.insertCell(c, side, pos); |
---|
42 | td.appendChild(c.getDomPositionEl().dom); |
---|
43 | c.container = Ext.get(td); |
---|
44 | } |
---|
45 | } |
---|
46 | } |
---|
47 | //strip extra empty cells |
---|
48 | this.cleanup(this.leftTr); |
---|
49 | this.cleanup(this.rightTr); |
---|
50 | this.cleanup(this.extrasTr); |
---|
51 | this.fitToSize(target); |
---|
52 | }, |
---|
53 | |
---|
54 | cleanup : function(row){ |
---|
55 | var cn = row.childNodes; |
---|
56 | for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){ |
---|
57 | if(!c.firstChild){ |
---|
58 | row.removeChild(c); |
---|
59 | } |
---|
60 | } |
---|
61 | }, |
---|
62 | |
---|
63 | insertCell : function(c, side, pos){ |
---|
64 | var td = document.createElement('td'); |
---|
65 | td.className='x-toolbar-cell'; |
---|
66 | side.insertBefore(td, side.childNodes[pos]||null); |
---|
67 | return td; |
---|
68 | }, |
---|
69 | |
---|
70 | hideItem : function(item){ |
---|
71 | var h = (this.hiddens = this.hiddens || []); |
---|
72 | h.push(item); |
---|
73 | item.xtbHidden = true; |
---|
74 | item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth; |
---|
75 | item.hide(); |
---|
76 | }, |
---|
77 | |
---|
78 | unhideItem : function(item){ |
---|
79 | item.show(); |
---|
80 | item.xtbHidden = false; |
---|
81 | this.hiddens.remove(item); |
---|
82 | if(this.hiddens.length < 1){ |
---|
83 | delete this.hiddens; |
---|
84 | } |
---|
85 | }, |
---|
86 | |
---|
87 | getItemWidth : function(c){ |
---|
88 | return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth; |
---|
89 | }, |
---|
90 | |
---|
91 | fitToSize : function(t){ |
---|
92 | if(this.container.enableOverflow === false){ |
---|
93 | return; |
---|
94 | } |
---|
95 | var w = t.dom.clientWidth; |
---|
96 | var lw = this.lastWidth || 0; |
---|
97 | this.lastWidth = w; |
---|
98 | var iw = t.dom.firstChild.offsetWidth; |
---|
99 | |
---|
100 | var clipWidth = w - this.triggerWidth; |
---|
101 | var hideIndex = -1; |
---|
102 | |
---|
103 | if(iw > w || (this.hiddens && w >= lw)){ |
---|
104 | var i, items = this.container.items.items, len = items.length, c; |
---|
105 | var loopWidth = 0; |
---|
106 | for(i = 0; i < len; i++) { |
---|
107 | c = items[i]; |
---|
108 | if(!c.isFill){ |
---|
109 | loopWidth += this.getItemWidth(c); |
---|
110 | if(loopWidth > clipWidth){ |
---|
111 | if(!c.xtbHidden){ |
---|
112 | this.hideItem(c); |
---|
113 | } |
---|
114 | }else{ |
---|
115 | if(c.xtbHidden){ |
---|
116 | this.unhideItem(c); |
---|
117 | } |
---|
118 | } |
---|
119 | } |
---|
120 | } |
---|
121 | } |
---|
122 | if(this.hiddens){ |
---|
123 | this.initMore(); |
---|
124 | if(!this.lastOverflow){ |
---|
125 | this.container.fireEvent('overflowchange', this.container, true); |
---|
126 | this.lastOverflow = true; |
---|
127 | } |
---|
128 | }else if(this.more){ |
---|
129 | this.clearMenu(); |
---|
130 | this.more.destroy(); |
---|
131 | delete this.more; |
---|
132 | if(this.lastOverflow){ |
---|
133 | this.container.fireEvent('overflowchange', this.container, false); |
---|
134 | this.lastOverflow = false; |
---|
135 | } |
---|
136 | } |
---|
137 | }, |
---|
138 | |
---|
139 | createMenuConfig : function(c, hideOnClick){ |
---|
140 | var cfg = Ext.apply({}, c.initialConfig), |
---|
141 | group = c.toggleGroup; |
---|
142 | |
---|
143 | Ext.apply(cfg, { |
---|
144 | text: c.overflowText || c.text, |
---|
145 | iconCls: c.iconCls, |
---|
146 | icon: c.icon, |
---|
147 | itemId: c.itemId, |
---|
148 | disabled: c.disabled, |
---|
149 | handler: c.handler, |
---|
150 | scope: c.scope, |
---|
151 | menu: c.menu, |
---|
152 | hideOnClick: hideOnClick |
---|
153 | }); |
---|
154 | if(group || c.enableToggle){ |
---|
155 | Ext.apply(cfg, { |
---|
156 | group: group, |
---|
157 | checked: c.pressed, |
---|
158 | listeners: { |
---|
159 | checkchange: function(item, checked){ |
---|
160 | c.toggle(checked); |
---|
161 | } |
---|
162 | } |
---|
163 | }); |
---|
164 | } |
---|
165 | delete cfg.xtype; |
---|
166 | delete cfg.id; |
---|
167 | return cfg; |
---|
168 | }, |
---|
169 | |
---|
170 | // private |
---|
171 | addComponentToMenu : function(m, c){ |
---|
172 | if(c instanceof Ext.Toolbar.Separator){ |
---|
173 | m.add('-'); |
---|
174 | }else if(Ext.isFunction(c.isXType)){ |
---|
175 | if(c.isXType('splitbutton')){ |
---|
176 | m.add(this.createMenuConfig(c, true)); |
---|
177 | }else if(c.isXType('button')){ |
---|
178 | m.add(this.createMenuConfig(c, !c.menu)); |
---|
179 | }else if(c.isXType('buttongroup')){ |
---|
180 | c.items.each(function(item){ |
---|
181 | this.addComponentToMenu(m, item); |
---|
182 | }, this); |
---|
183 | } |
---|
184 | } |
---|
185 | }, |
---|
186 | |
---|
187 | clearMenu : function(){ |
---|
188 | var m = this.moreMenu; |
---|
189 | if(m && m.items){ |
---|
190 | this.moreMenu.items.each(function(item){ |
---|
191 | delete item.menu; |
---|
192 | }); |
---|
193 | } |
---|
194 | }, |
---|
195 | |
---|
196 | // private |
---|
197 | beforeMoreShow : function(m){ |
---|
198 | var h = this.container.items.items, |
---|
199 | len = h.length, |
---|
200 | c, |
---|
201 | prev, |
---|
202 | needsSep = function(group, item){ |
---|
203 | return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator); |
---|
204 | }; |
---|
205 | |
---|
206 | this.clearMenu(); |
---|
207 | m.removeAll(); |
---|
208 | for(var i = 0; i < len; i++){ |
---|
209 | c = h[i]; |
---|
210 | if(c.xtbHidden){ |
---|
211 | if(prev && (needsSep(c, prev) || needsSep(prev, c))){ |
---|
212 | m.add('-'); |
---|
213 | } |
---|
214 | this.addComponentToMenu(m, c); |
---|
215 | prev = c; |
---|
216 | } |
---|
217 | } |
---|
218 | // put something so the menu isn't empty |
---|
219 | // if no compatible items found |
---|
220 | if(m.items.length < 1){ |
---|
221 | m.add(this.noItemsMenuText); |
---|
222 | } |
---|
223 | }, |
---|
224 | |
---|
225 | initMore : function(){ |
---|
226 | if(!this.more){ |
---|
227 | this.moreMenu = new Ext.menu.Menu({ |
---|
228 | listeners: { |
---|
229 | beforeshow: this.beforeMoreShow, |
---|
230 | scope: this |
---|
231 | } |
---|
232 | }); |
---|
233 | this.more = new Ext.Button({ |
---|
234 | iconCls: 'x-toolbar-more-icon', |
---|
235 | cls: 'x-toolbar-more', |
---|
236 | menu: this.moreMenu |
---|
237 | }); |
---|
238 | var td = this.insertCell(this.more, this.extrasTr, 100); |
---|
239 | this.more.render(td); |
---|
240 | } |
---|
241 | }, |
---|
242 | |
---|
243 | destroy : function(){ |
---|
244 | Ext.destroy(this.more, this.moreMenu); |
---|
245 | Ext.layout.ToolbarLayout.superclass.destroy.call(this); |
---|
246 | } |
---|
247 | /** |
---|
248 | * @property activeItem |
---|
249 | * @hide |
---|
250 | */ |
---|
251 | }); |
---|
252 | |
---|
253 | Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout; |
---|
254 | |
---|
255 | /** |
---|
256 | * @class Ext.Toolbar |
---|
257 | * @extends Ext.Container |
---|
258 | * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar |
---|
259 | * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may |
---|
260 | * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors, |
---|
261 | * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p> |
---|
262 | * <p>Some items have shortcut strings for creation:</p> |
---|
263 | * <pre> |
---|
264 | <u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u> |
---|
265 | '->' 'tbfill' {@link Ext.Toolbar.Fill} begin using the right-justified button container |
---|
266 | '-' 'tbseparator' {@link Ext.Toolbar.Separator} add a vertical separator bar between toolbar items |
---|
267 | ' ' 'tbspacer' {@link Ext.Toolbar.Spacer} add horiztonal space between elements |
---|
268 | * </pre> |
---|
269 | * |
---|
270 | * Example usage of various elements: |
---|
271 | * <pre><code> |
---|
272 | var tb = new Ext.Toolbar({ |
---|
273 | renderTo: document.body, |
---|
274 | width: 600, |
---|
275 | height: 100, |
---|
276 | items: [ |
---|
277 | { |
---|
278 | // xtype: 'button', // default for Toolbars, same as 'tbbutton' |
---|
279 | text: 'Button' |
---|
280 | }, |
---|
281 | { |
---|
282 | xtype: 'splitbutton', // same as 'tbsplitbutton' |
---|
283 | text: 'Split Button' |
---|
284 | }, |
---|
285 | // begin using the right-justified button container |
---|
286 | '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill |
---|
287 | { |
---|
288 | xtype: 'textfield', |
---|
289 | name: 'field1', |
---|
290 | emptyText: 'enter search term' |
---|
291 | }, |
---|
292 | // add a vertical separator bar between toolbar items |
---|
293 | '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator |
---|
294 | 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem |
---|
295 | {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer |
---|
296 | 'text 2', |
---|
297 | {xtype: 'tbspacer', width: 50}, // add a 50px space |
---|
298 | 'text 3' |
---|
299 | ] |
---|
300 | }); |
---|
301 | * </code></pre> |
---|
302 | * Example adding a ComboBox within a menu of a button: |
---|
303 | * <pre><code> |
---|
304 | // ComboBox creation |
---|
305 | var combo = new Ext.form.ComboBox({ |
---|
306 | store: new Ext.data.ArrayStore({ |
---|
307 | autoDestroy: true, |
---|
308 | fields: ['initials', 'fullname'], |
---|
309 | data : [ |
---|
310 | ['FF', 'Fred Flintstone'], |
---|
311 | ['BR', 'Barney Rubble'] |
---|
312 | ] |
---|
313 | }), |
---|
314 | displayField: 'fullname', |
---|
315 | typeAhead: true, |
---|
316 | mode: 'local', |
---|
317 | forceSelection: true, |
---|
318 | triggerAction: 'all', |
---|
319 | emptyText: 'Select a name...', |
---|
320 | selectOnFocus: true, |
---|
321 | width: 135, |
---|
322 | getListParent: function() { |
---|
323 | return this.el.up('.x-menu'); |
---|
324 | }, |
---|
325 | iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu |
---|
326 | }); |
---|
327 | |
---|
328 | // put ComboBox in a Menu |
---|
329 | var menu = new Ext.menu.Menu({ |
---|
330 | id: 'mainMenu', |
---|
331 | items: [ |
---|
332 | combo // A Field in a Menu |
---|
333 | ] |
---|
334 | }); |
---|
335 | |
---|
336 | // add a Button with the menu |
---|
337 | tb.add({ |
---|
338 | text:'Button w/ Menu', |
---|
339 | menu: menu // assign menu by instance |
---|
340 | }); |
---|
341 | tb.doLayout(); |
---|
342 | * </code></pre> |
---|
343 | * @constructor |
---|
344 | * Creates a new Toolbar |
---|
345 | * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt> |
---|
346 | * @xtype toolbar |
---|
347 | */ |
---|
348 | Ext.Toolbar = function(config){ |
---|
349 | if(Ext.isArray(config)){ |
---|
350 | config = {items: config, layout: 'toolbar'}; |
---|
351 | } else { |
---|
352 | config = Ext.apply({ |
---|
353 | layout: 'toolbar' |
---|
354 | }, config); |
---|
355 | if(config.buttons) { |
---|
356 | config.items = config.buttons; |
---|
357 | } |
---|
358 | } |
---|
359 | Ext.Toolbar.superclass.constructor.call(this, config); |
---|
360 | }; |
---|
361 | |
---|
362 | (function(){ |
---|
363 | |
---|
364 | var T = Ext.Toolbar; |
---|
365 | |
---|
366 | Ext.extend(T, Ext.Container, { |
---|
367 | |
---|
368 | defaultType: 'button', |
---|
369 | |
---|
370 | trackMenus : true, |
---|
371 | internalDefaults: {removeMode: 'container', hideParent: true}, |
---|
372 | toolbarCls: 'x-toolbar', |
---|
373 | |
---|
374 | initComponent : function(){ |
---|
375 | T.superclass.initComponent.call(this); |
---|
376 | |
---|
377 | /** |
---|
378 | * @event overflowchange |
---|
379 | * Fires after the overflow state has changed. |
---|
380 | * @param {Object} c The Container |
---|
381 | * @param {Boolean} lastOverflow overflow state |
---|
382 | */ |
---|
383 | this.addEvents('overflowchange'); |
---|
384 | }, |
---|
385 | |
---|
386 | // private |
---|
387 | onRender : function(ct, position){ |
---|
388 | if(!this.el){ |
---|
389 | if(!this.autoCreate){ |
---|
390 | this.autoCreate = { |
---|
391 | cls: this.toolbarCls + ' x-small-editor' |
---|
392 | }; |
---|
393 | } |
---|
394 | this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position); |
---|
395 | } |
---|
396 | }, |
---|
397 | |
---|
398 | /** |
---|
399 | * Adds element(s) to the toolbar -- this function takes a variable number of |
---|
400 | * arguments of mixed type and adds them to the toolbar. |
---|
401 | * @param {Mixed} arg1 The following types of arguments are all valid:<br /> |
---|
402 | * <ul> |
---|
403 | * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li> |
---|
404 | * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li> |
---|
405 | * <li>Field: Any form field (equivalent to {@link #addField})</li> |
---|
406 | * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li> |
---|
407 | * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}). |
---|
408 | * Note that there are a few special strings that are treated differently as explained next.</li> |
---|
409 | * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li> |
---|
410 | * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li> |
---|
411 | * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li> |
---|
412 | * </ul> |
---|
413 | * @param {Mixed} arg2 |
---|
414 | * @param {Mixed} etc. |
---|
415 | * @method add |
---|
416 | */ |
---|
417 | |
---|
418 | // private |
---|
419 | lookupComponent : function(c){ |
---|
420 | if(Ext.isString(c)){ |
---|
421 | if(c == '-'){ |
---|
422 | c = new T.Separator(); |
---|
423 | }else if(c == ' '){ |
---|
424 | c = new T.Spacer(); |
---|
425 | }else if(c == '->'){ |
---|
426 | c = new T.Fill(); |
---|
427 | }else{ |
---|
428 | c = new T.TextItem(c); |
---|
429 | } |
---|
430 | this.applyDefaults(c); |
---|
431 | }else{ |
---|
432 | if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item |
---|
433 | c = this.constructItem(c); |
---|
434 | }else if(c.tag){ // DomHelper spec |
---|
435 | c = new T.Item({autoEl: c}); |
---|
436 | }else if(c.tagName){ // element |
---|
437 | c = new T.Item({el:c}); |
---|
438 | }else if(Ext.isObject(c)){ // must be button config? |
---|
439 | c = c.xtype ? this.constructItem(c) : this.constructButton(c); |
---|
440 | } |
---|
441 | } |
---|
442 | return c; |
---|
443 | }, |
---|
444 | |
---|
445 | // private |
---|
446 | applyDefaults : function(c){ |
---|
447 | if(!Ext.isString(c)){ |
---|
448 | c = Ext.Toolbar.superclass.applyDefaults.call(this, c); |
---|
449 | var d = this.internalDefaults; |
---|
450 | if(c.events){ |
---|
451 | Ext.applyIf(c.initialConfig, d); |
---|
452 | Ext.apply(c, d); |
---|
453 | }else{ |
---|
454 | Ext.applyIf(c, d); |
---|
455 | } |
---|
456 | } |
---|
457 | return c; |
---|
458 | }, |
---|
459 | |
---|
460 | // private |
---|
461 | constructItem : function(item, type){ |
---|
462 | return Ext.create(item, type || this.defaultType); |
---|
463 | }, |
---|
464 | |
---|
465 | /** |
---|
466 | * Adds a separator |
---|
467 | * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item} |
---|
468 | */ |
---|
469 | addSeparator : function(){ |
---|
470 | return this.add(new T.Separator()); |
---|
471 | }, |
---|
472 | |
---|
473 | /** |
---|
474 | * Adds a spacer element |
---|
475 | * @return {Ext.Toolbar.Spacer} The spacer item |
---|
476 | */ |
---|
477 | addSpacer : function(){ |
---|
478 | return this.add(new T.Spacer()); |
---|
479 | }, |
---|
480 | |
---|
481 | /** |
---|
482 | * Forces subsequent additions into the float:right toolbar |
---|
483 | */ |
---|
484 | addFill : function(){ |
---|
485 | this.add(new T.Fill()); |
---|
486 | }, |
---|
487 | |
---|
488 | /** |
---|
489 | * Adds any standard HTML element to the toolbar |
---|
490 | * @param {Mixed} el The element or id of the element to add |
---|
491 | * @return {Ext.Toolbar.Item} The element's item |
---|
492 | */ |
---|
493 | addElement : function(el){ |
---|
494 | return this.addItem(new T.Item({el:el})); |
---|
495 | }, |
---|
496 | |
---|
497 | /** |
---|
498 | * Adds any Toolbar.Item or subclass |
---|
499 | * @param {Ext.Toolbar.Item} item |
---|
500 | * @return {Ext.Toolbar.Item} The item |
---|
501 | */ |
---|
502 | addItem : function(item){ |
---|
503 | return Ext.Toolbar.superclass.add.apply(this, arguments); |
---|
504 | }, |
---|
505 | |
---|
506 | /** |
---|
507 | * Adds a button (or buttons). See {@link Ext.Button} for more info on the config. |
---|
508 | * @param {Object/Array} config A button config or array of configs |
---|
509 | * @return {Ext.Button/Array} |
---|
510 | */ |
---|
511 | addButton : function(config){ |
---|
512 | if(Ext.isArray(config)){ |
---|
513 | var buttons = []; |
---|
514 | for(var i = 0, len = config.length; i < len; i++) { |
---|
515 | buttons.push(this.addButton(config[i])); |
---|
516 | } |
---|
517 | return buttons; |
---|
518 | } |
---|
519 | return this.add(this.constructButton(config)); |
---|
520 | }, |
---|
521 | |
---|
522 | /** |
---|
523 | * Adds text to the toolbar |
---|
524 | * @param {String} text The text to add |
---|
525 | * @return {Ext.Toolbar.Item} The element's item |
---|
526 | */ |
---|
527 | addText : function(text){ |
---|
528 | return this.addItem(new T.TextItem(text)); |
---|
529 | }, |
---|
530 | |
---|
531 | /** |
---|
532 | * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config |
---|
533 | * @param {Object} config |
---|
534 | * @return {Ext.Toolbar.Item} The element's item |
---|
535 | */ |
---|
536 | addDom : function(config){ |
---|
537 | return this.add(new T.Item({autoEl: config})); |
---|
538 | }, |
---|
539 | |
---|
540 | /** |
---|
541 | * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have |
---|
542 | * been rendered yet. For a field that has already been rendered, use {@link #addElement}. |
---|
543 | * @param {Ext.form.Field} field |
---|
544 | * @return {Ext.Toolbar.Item} |
---|
545 | */ |
---|
546 | addField : function(field){ |
---|
547 | return this.add(field); |
---|
548 | }, |
---|
549 | |
---|
550 | /** |
---|
551 | * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index. |
---|
552 | * @param {Number} index The index where the item is to be inserted |
---|
553 | * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be |
---|
554 | * inserted, or an array of buttons/configs. |
---|
555 | * @return {Ext.Button/Item} |
---|
556 | */ |
---|
557 | insertButton : function(index, item){ |
---|
558 | if(Ext.isArray(item)){ |
---|
559 | var buttons = []; |
---|
560 | for(var i = 0, len = item.length; i < len; i++) { |
---|
561 | buttons.push(this.insertButton(index + i, item[i])); |
---|
562 | } |
---|
563 | return buttons; |
---|
564 | } |
---|
565 | return Ext.Toolbar.superclass.insert.call(this, index, item); |
---|
566 | }, |
---|
567 | |
---|
568 | // private |
---|
569 | initMenuTracking : function(item){ |
---|
570 | if(this.trackMenus && item.menu){ |
---|
571 | this.mon(item, { |
---|
572 | 'menutriggerover' : this.onButtonTriggerOver, |
---|
573 | 'menushow' : this.onButtonMenuShow, |
---|
574 | 'menuhide' : this.onButtonMenuHide, |
---|
575 | scope: this |
---|
576 | }); |
---|
577 | } |
---|
578 | }, |
---|
579 | |
---|
580 | // private |
---|
581 | constructButton : function(item){ |
---|
582 | var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType); |
---|
583 | this.initMenuTracking(b); |
---|
584 | return b; |
---|
585 | }, |
---|
586 | |
---|
587 | // private |
---|
588 | onDisable : function(){ |
---|
589 | this.items.each(function(item){ |
---|
590 | if(item.disable){ |
---|
591 | item.disable(); |
---|
592 | } |
---|
593 | }); |
---|
594 | }, |
---|
595 | |
---|
596 | // private |
---|
597 | onEnable : function(){ |
---|
598 | this.items.each(function(item){ |
---|
599 | if(item.enable){ |
---|
600 | item.enable(); |
---|
601 | } |
---|
602 | }); |
---|
603 | }, |
---|
604 | |
---|
605 | // private |
---|
606 | onButtonTriggerOver : function(btn){ |
---|
607 | if(this.activeMenuBtn && this.activeMenuBtn != btn){ |
---|
608 | this.activeMenuBtn.hideMenu(); |
---|
609 | btn.showMenu(); |
---|
610 | this.activeMenuBtn = btn; |
---|
611 | } |
---|
612 | }, |
---|
613 | |
---|
614 | // private |
---|
615 | onButtonMenuShow : function(btn){ |
---|
616 | this.activeMenuBtn = btn; |
---|
617 | }, |
---|
618 | |
---|
619 | // private |
---|
620 | onButtonMenuHide : function(btn){ |
---|
621 | delete this.activeMenuBtn; |
---|
622 | } |
---|
623 | }); |
---|
624 | Ext.reg('toolbar', Ext.Toolbar); |
---|
625 | |
---|
626 | /** |
---|
627 | * @class Ext.Toolbar.Item |
---|
628 | * @extends Ext.BoxComponent |
---|
629 | * The base class that other non-interacting Toolbar Item classes should extend in order to |
---|
630 | * get some basic common toolbar item functionality. |
---|
631 | * @constructor |
---|
632 | * Creates a new Item |
---|
633 | * @param {HTMLElement} el |
---|
634 | * @xtype tbitem |
---|
635 | */ |
---|
636 | T.Item = Ext.extend(Ext.BoxComponent, { |
---|
637 | hideParent: true, // Hiding a Toolbar.Item hides its containing TD |
---|
638 | enable:Ext.emptyFn, |
---|
639 | disable:Ext.emptyFn, |
---|
640 | focus:Ext.emptyFn |
---|
641 | /** |
---|
642 | * @cfg {String} overflowText Text to be used for the menu if the item is overflowed. |
---|
643 | */ |
---|
644 | }); |
---|
645 | Ext.reg('tbitem', T.Item); |
---|
646 | |
---|
647 | /** |
---|
648 | * @class Ext.Toolbar.Separator |
---|
649 | * @extends Ext.Toolbar.Item |
---|
650 | * A simple class that adds a vertical separator bar between toolbar items |
---|
651 | * (css class:<tt>'xtb-sep'</tt>). Example usage: |
---|
652 | * <pre><code> |
---|
653 | new Ext.Panel({ |
---|
654 | tbar : [ |
---|
655 | 'Item 1', |
---|
656 | {xtype: 'tbseparator'}, // or '-' |
---|
657 | 'Item 2' |
---|
658 | ] |
---|
659 | }); |
---|
660 | </code></pre> |
---|
661 | * @constructor |
---|
662 | * Creates a new Separator |
---|
663 | * @xtype tbseparator |
---|
664 | */ |
---|
665 | T.Separator = Ext.extend(T.Item, { |
---|
666 | onRender : function(ct, position){ |
---|
667 | this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position); |
---|
668 | } |
---|
669 | }); |
---|
670 | Ext.reg('tbseparator', T.Separator); |
---|
671 | |
---|
672 | /** |
---|
673 | * @class Ext.Toolbar.Spacer |
---|
674 | * @extends Ext.Toolbar.Item |
---|
675 | * A simple element that adds extra horizontal space between items in a toolbar. |
---|
676 | * By default a 2px wide space is added via css specification:<pre><code> |
---|
677 | .x-toolbar .xtb-spacer { |
---|
678 | width:2px; |
---|
679 | } |
---|
680 | * </code></pre> |
---|
681 | * <p>Example usage:</p> |
---|
682 | * <pre><code> |
---|
683 | new Ext.Panel({ |
---|
684 | tbar : [ |
---|
685 | 'Item 1', |
---|
686 | {xtype: 'tbspacer'}, // or ' ' |
---|
687 | 'Item 2', |
---|
688 | // space width is also configurable via javascript |
---|
689 | {xtype: 'tbspacer', width: 50}, // add a 50px space |
---|
690 | 'Item 3' |
---|
691 | ] |
---|
692 | }); |
---|
693 | </code></pre> |
---|
694 | * @constructor |
---|
695 | * Creates a new Spacer |
---|
696 | * @xtype tbspacer |
---|
697 | */ |
---|
698 | T.Spacer = Ext.extend(T.Item, { |
---|
699 | /** |
---|
700 | * @cfg {Number} width |
---|
701 | * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>). |
---|
702 | */ |
---|
703 | |
---|
704 | onRender : function(ct, position){ |
---|
705 | this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position); |
---|
706 | } |
---|
707 | }); |
---|
708 | Ext.reg('tbspacer', T.Spacer); |
---|
709 | |
---|
710 | /** |
---|
711 | * @class Ext.Toolbar.Fill |
---|
712 | * @extends Ext.Toolbar.Spacer |
---|
713 | * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using |
---|
714 | * the right-justified button container. |
---|
715 | * <pre><code> |
---|
716 | new Ext.Panel({ |
---|
717 | tbar : [ |
---|
718 | 'Item 1', |
---|
719 | {xtype: 'tbfill'}, // or '->' |
---|
720 | 'Item 2' |
---|
721 | ] |
---|
722 | }); |
---|
723 | </code></pre> |
---|
724 | * @constructor |
---|
725 | * Creates a new Fill |
---|
726 | * @xtype tbfill |
---|
727 | */ |
---|
728 | T.Fill = Ext.extend(T.Item, { |
---|
729 | // private |
---|
730 | render : Ext.emptyFn, |
---|
731 | isFill : true |
---|
732 | }); |
---|
733 | Ext.reg('tbfill', T.Fill); |
---|
734 | |
---|
735 | /** |
---|
736 | * @class Ext.Toolbar.TextItem |
---|
737 | * @extends Ext.Toolbar.Item |
---|
738 | * A simple class that renders text directly into a toolbar |
---|
739 | * (with css class:<tt>'xtb-text'</tt>). Example usage: |
---|
740 | * <pre><code> |
---|
741 | new Ext.Panel({ |
---|
742 | tbar : [ |
---|
743 | {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1' |
---|
744 | ] |
---|
745 | }); |
---|
746 | </code></pre> |
---|
747 | * @constructor |
---|
748 | * Creates a new TextItem |
---|
749 | * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property |
---|
750 | * @xtype tbtext |
---|
751 | */ |
---|
752 | T.TextItem = Ext.extend(T.Item, { |
---|
753 | constructor: function(config){ |
---|
754 | if (Ext.isString(config)) { |
---|
755 | config = { autoEl: {cls: 'xtb-text', html: config }}; |
---|
756 | } else { |
---|
757 | config.autoEl = {cls: 'xtb-text', html: config.text || ''}; |
---|
758 | } |
---|
759 | T.TextItem.superclass.constructor.call(this, config); |
---|
760 | }, |
---|
761 | /** |
---|
762 | * Updates this item's text, setting the text to be used as innerHTML. |
---|
763 | * @param {String} t The text to display (html accepted). |
---|
764 | */ |
---|
765 | setText : function(t) { |
---|
766 | if (this.rendered) { |
---|
767 | this.el.dom.innerHTML = t; |
---|
768 | } else { |
---|
769 | this.autoEl.html = t; |
---|
770 | } |
---|
771 | } |
---|
772 | }); |
---|
773 | Ext.reg('tbtext', T.TextItem); |
---|
774 | |
---|
775 | // backwards compat |
---|
776 | T.Button = Ext.extend(Ext.Button, {}); |
---|
777 | T.SplitButton = Ext.extend(Ext.SplitButton, {}); |
---|
778 | Ext.reg('tbbutton', T.Button); |
---|
779 | Ext.reg('tbsplit', T.SplitButton); |
---|
780 | |
---|
781 | })(); |
---|