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

Thread: TabPanel tab title editor

  1. #11
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Vote Rating
    1271
      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
    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.

  2. #12

  3. #13
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Location
    Bangalore, India
    Posts
    121
    Vote Rating
    24
      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
    118
      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
  •