Threaded View

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default TabPanel tab title editor

    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