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
    118
      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 - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    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
    118
      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 - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    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
    118
      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,093
    Vote Rating
    56
      0  

    Default

    nice
    Lead Trainer / Sencha Specialist
    Community And Learning Systems

    Lead Architect
    DigitalTickets.net

  9. #9
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,418
    Vote Rating
    1271
      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
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Vote Rating
    59
      0  

    Default

    The dblclick handling function needs to be broken out and poked into the host TabPanel as the property editTitle.

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
  •