Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: TabPanel tab title editor

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    127
      0  

    Default TabPanel tab title editor

    Here is a small plugin that allows inline editing of the titles of the panels in a TabPanel on dblclick.
    Code:
    Ext.ns('Ext.ux');
    Ext.ux.TabTitleEditor = Ext.extend(Object, {
        init: function(c){
            c.on({
                render: this.onRender,
                destroy: this.onDestroy,
                single: true
            });
        },
        onRender: function(c){
            c.titleEditor = new Ext.Editor(new Ext.form.TextField({
                allowBlank: false,
                enterIsSpecial: true
            }), {
                autoSize: 'width',
                completeOnEnter: true,
                cancelOnEsc: true,
                listeners: {
                    complete: function(editor, value){
                        var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);
                        item.setTitle(value);
                    },
                    scope: this
                }
            });
            c.mon(c.strip, {
                dblclick: function(e){
                    var t = this.findTargets(e);
                    if(t && t.item && !t.close && t.item.titleEditable !== false){
                        this.titleEditor.startEdit(t.el, t.item.title);
                    }
                },
                scope: c
            });
        },
        onDestroy: function(c){
            if(c.titleEditor){
                c.titleEditor.destroy();
                delete c.titleEditor;
            }
        }
    });
    Ext.preg('tabtitleedit', Ext.ux.TabTitleEditor);
    Usage example:
    Code:
    new Ext.TabPanel({
        height: 200,
        width: 300,
        activeTab: 0,
        items: [{
            title: 'Tab 1'
        },{
            title: 'Tab 2'
        },{
            title: 'Tab 3'
        }],
        plugins: ['tabtitleedit'],
        renderTo: Ext.getBody()
    });
    Last edited by Condor; 5 Oct 2009 at 6:32 AM. Reason: Added titleEditable config option for panels

  2. #2
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061
    Vote Rating
    19
      0  

    Default

    What if I only want some tab titles editable?


  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    127
      0  

    Default

    I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.

  4. #4
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061
    Vote Rating
    19
      0  

    Default

    Quote Originally Posted by Condor View Post
    I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.
    Exactly.

  5. #5
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    3
      0  

    Default

    Quote Originally Posted by Condor View Post
    Here is a small plugin that allows inline editing of the titles of the panels in a TabPanel on dblclick.
    A small suggestion to have a single event on the tabpanel monitor title changes by the editor (additions in bold):

    Quote Originally Posted by Condor View Post
    Code:
    Ext.ns('Ext.ux');
    Ext.ux.TabTitleEditor = Ext.extend(Object, {
        /**
         * @event tabtitleedit
         * Fires when the title of a tab has been edited
         * @param {Ext.TabPanel} tabpanel The containing Ext.TabPanel itself
         * @param {Ext.Panel} panel The Ext.Panel that had the title changed
         * @param {Mixed} value The new value
         * @param {Mixed} startvalue The old value before the edit
         */
    
        init: function(c){
            c.addEvents({
                tabtitleedit:    true
            });
            c.on({
                render: this.onRender,
                destroy: this.onDestroy,
                single: true
            });
        },
        onRender: function(c){
            c.titleEditor = new Ext.Editor(new Ext.form.TextField({
                allowBlank: false,
                enterIsSpecial: true
            }), {
                autoSize: 'width',
                completeOnEnter: true,
                cancelOnEsc: true,
                listeners: {
                    complete: function(editor, value, startvalue){
                        var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);
                        item.setTitle(value);
                        this.fireEvent('tabtitleedit', this, item, value, startvalue);
                    },
                    scope: this
                }
            });
            c.mon(c.strip, {
                dblclick: function(e){
                    var t = this.findTargets(e);
                    if(t && t.item && !t.close && t.item.titleEditable !== false){
                        this.titleEditor.startEdit(t.el, t.item.title);
                    }
                },
                scope: c
            });
        },
        onDestroy: function(c){
            if(c.titleEditor){
                c.titleEditor.destroy();
                delete c.titleEditor;
            }
        }
    });

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    127
      0  

    Default

    Quote Originally Posted by BitPoet View Post
    A small suggestion to have a single event on the tabpanel monitor title changes by the editor
    Do you really need that event if the panels already fire 'titlechange' events (which you could bubble to the tabpanel)?

  7. #7
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    3
      0  

    Default

    Thinking about it from different angles, that's a good question. I've got a case here where it's really handy (I've got to differentiate between 'normal' title changes and title edits), but that's probably not something occurring very often and that can be added with a simple createSequence and another complete listener.

  8. #8
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,098
    Vote Rating
    57
      0  

    Default

    nice
    Senior Sencha Trainer / Sencha Specialist

    ExtJs Developer since 0.2.2 - Champion of the 1 developer licence.

  9. #9
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,025
    Vote Rating
    1334
      0  

    Default

    Is there a way to initiate the editing via code and not just the dbl click? I'd like to add a tab and have it automatically start the editing. I tried using the startEdit() function and it would add the textarea but as an item to the tab panel not the tab title.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  10. #10
    Sencha - Community Support Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,747
    Vote Rating
    80
      0  

    Default

    The dblclick handling function needs to be broken out and poked into the host TabPanel as the property editTitle.
    Longtime Sencha engineer. Now surplus to requirements apparently...

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •