Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: TabPanel tab title editor

  1. #11
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Vote Rating
    1367
      0  

    Default

    Quote Originally Posted by Animal View Post
    The dblclick handling function needs to be broken out and poked into the host TabPanel as the property editTitle.
    Not sure on how to do this....
    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

  2. #12

  3. #13
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Location
    Bangalore, India
    Posts
    125
    Vote Rating
    29
      0  

    Default

    I needed to make the tab titles of vertical tabpanel editable and found this line was throwing an error:
    Code:
    var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);
    Replaced it with:
    Code:
    var item = Ext.getCmp(editor.boundEl.id.split(this.idDelimiter)[1]);

  4. #14
    Sencha User
    Join Date
    Mar 2010
    Location
    Amsterdam, Netherlands
    Posts
    7
    Vote Rating
    1
      0  

    Default

    I added a function wich allows you to show the editor by code

    Code:
    Ext.ns('Ext.ux');
    Ext.ux.TabTitleEditor = Ext.extend(Object, {
        init: function(c){
            c.on({
                render: this.onRender,
                destroy: this.onDestroy,
                single: true
            });
            
            c.editTab = function ( tabIndex ) {
                this.activate(tabIndex);
                
                var tab = this.getActiveTab();
                
                if( tab.titleEditable !== false){
                    this.titleEditor.startEdit(tab.tabEl, tab.title);
                }
            }
        },
        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;
            }
        }
    });

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

    Default

    You really should put editTab in the prototype instead of assigning it in the constructor. This makes every instance take up more space and makes the plugin harder to extend.

  6. #16
    Sencha Premium Member i.stojanovic's Avatar
    Join Date
    Oct 2010
    Location
    Kragujevac, Serbia
    Posts
    24
    Vote Rating
    1
      0  

    Default ExtJS 4

    How to apply this plugin on ExtJS 4?

    Thanks

  7. #17
    Sencha Premium Member sandeshdshetty's Avatar
    Join Date
    Nov 2011
    Location
    Bangalore India
    Posts
    9
    Vote Rating
    0
      0  

    Default Tab tile editor plugin

    Does above plugin works for extjs 4.1?
    I have tried above plugin extjs 4.1 but did not work.

Page 2 of 2 FirstFirst 12

Posting Permissions

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