Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/ext/src/widgets/Toolbar.js @ 76

Revision 76, 17.9 KB checked in by djay, 12 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
Line 
1/*!
2 * Ext JS Library 3.4.0
3 * Copyright(c) 2006-2011 Sencha Inc.
4 * licensing@sencha.com
5 * http://www.sencha.com/license
6 */
7/**
8 * @class Ext.Toolbar
9 * @extends Ext.Container
10 * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
11 * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
12 * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
13 * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
14 * <p>Some items have shortcut strings for creation:</p>
15 * <pre>
16<u>Shortcut</u>  <u>xtype</u>          <u>Class</u>                  <u>Description</u>
17'->'      'tbfill'       {@link Ext.Toolbar.Fill}       begin using the right-justified button container
18'-'       'tbseparator'  {@link Ext.Toolbar.Separator}  add a vertical separator bar between toolbar items
19' '       'tbspacer'     {@link Ext.Toolbar.Spacer}     add horiztonal space between elements
20 * </pre>
21 *
22 * Example usage of various elements:
23 * <pre><code>
24var tb = new Ext.Toolbar({
25    renderTo: document.body,
26    width: 600,
27    height: 100,
28    items: [
29        {
30            // xtype: 'button', // default for Toolbars, same as 'tbbutton'
31            text: 'Button'
32        },
33        {
34            xtype: 'splitbutton', // same as 'tbsplitbutton'
35            text: 'Split Button'
36        },
37        // begin using the right-justified button container
38        '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
39        {
40            xtype: 'textfield',
41            name: 'field1',
42            emptyText: 'enter search term'
43        },
44        // add a vertical separator bar between toolbar items
45        '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
46        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
47        {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
48        'text 2',
49        {xtype: 'tbspacer', width: 50}, // add a 50px space
50        'text 3'
51    ]
52});
53 * </code></pre>
54 * Example adding a ComboBox within a menu of a button:
55 * <pre><code>
56// ComboBox creation
57var combo = new Ext.form.ComboBox({
58    store: new Ext.data.ArrayStore({
59        autoDestroy: true,
60        fields: ['initials', 'fullname'],
61        data : [
62            ['FF', 'Fred Flintstone'],
63            ['BR', 'Barney Rubble']
64        ]
65    }),
66    displayField: 'fullname',
67    typeAhead: true,
68    mode: 'local',
69    forceSelection: true,
70    triggerAction: 'all',
71    emptyText: 'Select a name...',
72    selectOnFocus: true,
73    width: 135,
74    getListParent: function() {
75        return this.el.up('.x-menu');
76    },
77    iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
78});
79
80// put ComboBox in a Menu
81var menu = new Ext.menu.Menu({
82    id: 'mainMenu',
83    items: [
84        combo // A Field in a Menu
85    ]
86});
87
88// add a Button with the menu
89tb.add({
90        text:'Button w/ Menu',
91        menu: menu  // assign menu by instance
92    });
93tb.doLayout();
94 * </code></pre>
95 * @constructor
96 * Creates a new Toolbar
97 * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
98 * @xtype toolbar
99 */
100Ext.Toolbar = function(config){
101    if(Ext.isArray(config)){
102        config = {items: config, layout: 'toolbar'};
103    } else {
104        config = Ext.apply({
105            layout: 'toolbar'
106        }, config);
107        if(config.buttons) {
108            config.items = config.buttons;
109        }
110    }
111    Ext.Toolbar.superclass.constructor.call(this, config);
112};
113
114(function(){
115
116var T = Ext.Toolbar;
117
118Ext.extend(T, Ext.Container, {
119
120    defaultType: 'button',
121
122    /**
123     * @cfg {String/Object} layout
124     * This class assigns a default layout (<code>layout:'<b>toolbar</b>'</code>).
125     * Developers <i>may</i> override this configuration option if another layout
126     * is required (the constructor must be passed a configuration object in this
127     * case instead of an array).
128     * See {@link Ext.Container#layout} for additional information.
129     */
130
131    enableOverflow : false,
132
133    /**
134     * @cfg {Boolean} enableOverflow
135     * Defaults to false. Configure <tt>true</tt> to make the toolbar provide a button
136     * which activates a dropdown Menu to show items which overflow the Toolbar's width.
137     */
138    /**
139     * @cfg {String} buttonAlign
140     * <p>The default position at which to align child items. Defaults to <code>"left"</code></p>
141     * <p>May be specified as <code>"center"</code> to cause items added before a Fill (A <code>"->"</code>) item
142     * to be centered in the Toolbar. Items added after a Fill are still right-aligned.</p>
143     * <p>Specify as <code>"right"</code> to right align all child items.</p>
144     */
145
146    trackMenus : true,
147    internalDefaults: {removeMode: 'container', hideParent: true},
148    toolbarCls: 'x-toolbar',
149
150    initComponent : function(){
151        T.superclass.initComponent.call(this);
152
153        /**
154         * @event overflowchange
155         * Fires after the overflow state has changed.
156         * @param {Object} c The Container
157         * @param {Boolean} lastOverflow overflow state
158         */
159        this.addEvents('overflowchange');
160    },
161
162    // private
163    onRender : function(ct, position){
164        if(!this.el){
165            if(!this.autoCreate){
166                this.autoCreate = {
167                    cls: this.toolbarCls + ' x-small-editor'
168                };
169            }
170            this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
171            Ext.Toolbar.superclass.onRender.apply(this, arguments);
172        }
173    },
174
175    /**
176     * <p>Adds element(s) to the toolbar -- this function takes a variable number of
177     * arguments of mixed type and adds them to the toolbar.</p>
178     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
179     * @param {Mixed} arg1 The following types of arguments are all valid:<br />
180     * <ul>
181     * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
182     * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
183     * <li>Field: Any form field (equivalent to {@link #addField})</li>
184     * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
185     * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
186     * Note that there are a few special strings that are treated differently as explained next.</li>
187     * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
188     * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
189     * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
190     * </ul>
191     * @param {Mixed} arg2
192     * @param {Mixed} etc.
193     * @method add
194     */
195
196    // private
197    lookupComponent : function(c){
198        if(Ext.isString(c)){
199            if(c == '-'){
200                c = new T.Separator();
201            }else if(c == ' '){
202                c = new T.Spacer();
203            }else if(c == '->'){
204                c = new T.Fill();
205            }else{
206                c = new T.TextItem(c);
207            }
208            this.applyDefaults(c);
209        }else{
210            if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
211                c = this.createComponent(c);
212            }else if(c.tag){ // DomHelper spec
213                c = new T.Item({autoEl: c});
214            }else if(c.tagName){ // element
215                c = new T.Item({el:c});
216            }else if(Ext.isObject(c)){ // must be button config?
217                c = c.xtype ? this.createComponent(c) : this.constructButton(c);
218            }
219        }
220        return c;
221    },
222
223    // private
224    applyDefaults : function(c){
225        if(!Ext.isString(c)){
226            c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
227            var d = this.internalDefaults;
228            if(c.events){
229                Ext.applyIf(c.initialConfig, d);
230                Ext.apply(c, d);
231            }else{
232                Ext.applyIf(c, d);
233            }
234        }
235        return c;
236    },
237
238    /**
239     * Adds a separator
240     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
241     * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
242     */
243    addSeparator : function(){
244        return this.add(new T.Separator());
245    },
246
247    /**
248     * Adds a spacer element
249     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
250     * @return {Ext.Toolbar.Spacer} The spacer item
251     */
252    addSpacer : function(){
253        return this.add(new T.Spacer());
254    },
255
256    /**
257     * Forces subsequent additions into the float:right toolbar
258     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
259     */
260    addFill : function(){
261        this.add(new T.Fill());
262    },
263
264    /**
265     * Adds any standard HTML element to the toolbar
266     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
267     * @param {Mixed} el The element or id of the element to add
268     * @return {Ext.Toolbar.Item} The element's item
269     */
270    addElement : function(el){
271        return this.addItem(new T.Item({el:el}));
272    },
273
274    /**
275     * Adds any Toolbar.Item or subclass
276     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
277     * @param {Ext.Toolbar.Item} item
278     * @return {Ext.Toolbar.Item} The item
279     */
280    addItem : function(item){
281        return this.add.apply(this, arguments);
282    },
283
284    /**
285     * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
286     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
287     * @param {Object/Array} config A button config or array of configs
288     * @return {Ext.Button/Array}
289     */
290    addButton : function(config){
291        if(Ext.isArray(config)){
292            var buttons = [];
293            for(var i = 0, len = config.length; i < len; i++) {
294                buttons.push(this.addButton(config[i]));
295            }
296            return buttons;
297        }
298        return this.add(this.constructButton(config));
299    },
300
301    /**
302     * Adds text to the toolbar
303     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
304     * @param {String} text The text to add
305     * @return {Ext.Toolbar.Item} The element's item
306     */
307    addText : function(text){
308        return this.addItem(new T.TextItem(text));
309    },
310
311    /**
312     * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
313     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
314     * @param {Object} config
315     * @return {Ext.Toolbar.Item} The element's item
316     */
317    addDom : function(config){
318        return this.add(new T.Item({autoEl: config}));
319    },
320
321    /**
322     * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
323     * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
324     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
325     * @param {Ext.form.Field} field
326     * @return {Ext.Toolbar.Item}
327     */
328    addField : function(field){
329        return this.add(field);
330    },
331
332    /**
333     * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
334     * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
335     * @param {Number} index The index where the item is to be inserted
336     * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
337     * inserted, or an array of buttons/configs.
338     * @return {Ext.Button/Item}
339     */
340    insertButton : function(index, item){
341        if(Ext.isArray(item)){
342            var buttons = [];
343            for(var i = 0, len = item.length; i < len; i++) {
344               buttons.push(this.insertButton(index + i, item[i]));
345            }
346            return buttons;
347        }
348        return Ext.Toolbar.superclass.insert.call(this, index, item);
349    },
350
351    // private
352    trackMenu : function(item, remove){
353        if(this.trackMenus && item.menu){
354            var method = remove ? 'mun' : 'mon';
355            this[method](item, 'menutriggerover', this.onButtonTriggerOver, this);
356            this[method](item, 'menushow', this.onButtonMenuShow, this);
357            this[method](item, 'menuhide', this.onButtonMenuHide, this);
358        }
359    },
360
361    // private
362    constructButton : function(item){
363        var b = item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
364        return b;
365    },
366
367    // private
368    onAdd : function(c){
369        Ext.Toolbar.superclass.onAdd.call(this);
370        this.trackMenu(c);
371        if(this.disabled){
372            c.disable();
373        }
374    },
375
376    // private
377    onRemove : function(c){
378        Ext.Toolbar.superclass.onRemove.call(this);
379        if (c == this.activeMenuBtn) {
380            delete this.activeMenuBtn;
381        }
382        this.trackMenu(c, true);
383    },
384
385    // private
386    onDisable : function(){
387        this.items.each(function(item){
388             if(item.disable){
389                 item.disable();
390             }
391        });
392    },
393
394    // private
395    onEnable : function(){
396        this.items.each(function(item){
397             if(item.enable){
398                 item.enable();
399             }
400        });
401    },
402
403    // private
404    onButtonTriggerOver : function(btn){
405        if(this.activeMenuBtn && this.activeMenuBtn != btn){
406            this.activeMenuBtn.hideMenu();
407            btn.showMenu();
408            this.activeMenuBtn = btn;
409        }
410    },
411
412    // private
413    onButtonMenuShow : function(btn){
414        this.activeMenuBtn = btn;
415    },
416
417    // private
418    onButtonMenuHide : function(btn){
419        delete this.activeMenuBtn;
420    }
421});
422Ext.reg('toolbar', Ext.Toolbar);
423
424/**
425 * @class Ext.Toolbar.Item
426 * @extends Ext.BoxComponent
427 * The base class that other non-interacting Toolbar Item classes should extend in order to
428 * get some basic common toolbar item functionality.
429 * @constructor
430 * Creates a new Item
431 * @param {HTMLElement} el
432 * @xtype tbitem
433 */
434T.Item = Ext.extend(Ext.BoxComponent, {
435    hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
436    enable:Ext.emptyFn,
437    disable:Ext.emptyFn,
438    focus:Ext.emptyFn
439    /**
440     * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
441     */
442});
443Ext.reg('tbitem', T.Item);
444
445/**
446 * @class Ext.Toolbar.Separator
447 * @extends Ext.Toolbar.Item
448 * A simple class that adds a vertical separator bar between toolbar items
449 * (css class:<tt>'xtb-sep'</tt>). Example usage:
450 * <pre><code>
451new Ext.Panel({
452    tbar : [
453        'Item 1',
454        {xtype: 'tbseparator'}, // or '-'
455        'Item 2'
456    ]
457});
458</code></pre>
459 * @constructor
460 * Creates a new Separator
461 * @xtype tbseparator
462 */
463T.Separator = Ext.extend(T.Item, {
464    onRender : function(ct, position){
465        this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
466    }
467});
468Ext.reg('tbseparator', T.Separator);
469
470/**
471 * @class Ext.Toolbar.Spacer
472 * @extends Ext.Toolbar.Item
473 * A simple element that adds extra horizontal space between items in a toolbar.
474 * By default a 2px wide space is added via css specification:<pre><code>
475.x-toolbar .xtb-spacer {
476    width:2px;
477}
478 * </code></pre>
479 * <p>Example usage:</p>
480 * <pre><code>
481new Ext.Panel({
482    tbar : [
483        'Item 1',
484        {xtype: 'tbspacer'}, // or ' '
485        'Item 2',
486        // space width is also configurable via javascript
487        {xtype: 'tbspacer', width: 50}, // add a 50px space
488        'Item 3'
489    ]
490});
491</code></pre>
492 * @constructor
493 * Creates a new Spacer
494 * @xtype tbspacer
495 */
496T.Spacer = Ext.extend(T.Item, {
497    /**
498     * @cfg {Number} width
499     * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
500     */
501
502    onRender : function(ct, position){
503        this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
504    }
505});
506Ext.reg('tbspacer', T.Spacer);
507
508/**
509 * @class Ext.Toolbar.Fill
510 * @extends Ext.Toolbar.Spacer
511 * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
512 * the right-justified button container.
513 * <pre><code>
514new Ext.Panel({
515    tbar : [
516        'Item 1',
517        {xtype: 'tbfill'}, // or '->'
518        'Item 2'
519    ]
520});
521</code></pre>
522 * @constructor
523 * Creates a new Fill
524 * @xtype tbfill
525 */
526T.Fill = Ext.extend(T.Item, {
527    // private
528    render : Ext.emptyFn,
529    isFill : true
530});
531Ext.reg('tbfill', T.Fill);
532
533/**
534 * @class Ext.Toolbar.TextItem
535 * @extends Ext.Toolbar.Item
536 * A simple class that renders text directly into a toolbar
537 * (with css class:<tt>'xtb-text'</tt>). Example usage:
538 * <pre><code>
539new Ext.Panel({
540    tbar : [
541        {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
542    ]
543});
544</code></pre>
545 * @constructor
546 * Creates a new TextItem
547 * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
548 * @xtype tbtext
549 */
550T.TextItem = Ext.extend(T.Item, {
551    /**
552     * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
553     */
554
555    constructor: function(config){
556        T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
557    },
558
559    // private
560    onRender : function(ct, position) {
561        this.autoEl = {cls: 'xtb-text', html: this.text || ''};
562        T.TextItem.superclass.onRender.call(this, ct, position);
563    },
564
565    /**
566     * Updates this item's text, setting the text to be used as innerHTML.
567     * @param {String} t The text to display (html accepted).
568     */
569    setText : function(t) {
570        if(this.rendered){
571            this.el.update(t);
572        }else{
573            this.text = t;
574        }
575    }
576});
577Ext.reg('tbtext', T.TextItem);
578
579// backwards compat
580T.Button = Ext.extend(Ext.Button, {});
581T.SplitButton = Ext.extend(Ext.SplitButton, {});
582Ext.reg('tbbutton', T.Button);
583Ext.reg('tbsplit', T.SplitButton);
584
585})();
Note: See TracBrowser for help on using the repository browser.