Comment puis-je ajouter des outils dans un onglet d'un Extjs TabPanel?

Assez difficile en fait.

Si vous vérifiez leur code source, Ext.tab.Panel est en fait à l'aide de la Carte de Mise en page et pour chaque onglet, ils ont utilisé Ext.tab.Tab pour faire les boutons de l'onglet.

Alors si vous consultez le code source de Ext.tab.Tab, c'est en fait l'extension de Ext.button.Button, qui est juste un bouton modifié.

Donc, si vous avez besoin d'ajouter des outils, j'ai peur que le meilleur moyen est d'étendre Ext.tab.Tab et écrire vos propres boutons de l'onglet. Vous pourriez vouloir vérifier la façon dont ils créent closeable boutons en ligne 233 de /src/tab/Tab.js.

(Ext-4.0.2 a)

Acclamations

MODIFIER

De sorte que nous savons Ext.tab.Tab est l'extension de Ext.button.Button, nous pouvons faire appel de ce fait, et je suis venu avec cette solution, vérifier, au violon: http://jsfiddle.net/uBxqY/4/

En gros, j'ai étendu Ext.tab.Tab, et modifié le buttonWrapper classe afin d'avoir la flèche css ajouté. Rien de compliqué, tout fonctionne hors de la boîte.

Aussi j'ai surdéfini la onClick fonction de sorte que le menu ne sera pas étendu lorsque l'utilisateur clique sur l'onglet lui-même. Un peu sale, mais il fonctionne (emprunté prototype.onClick de Ext.button.Split.

Exemple de travail: http://jsfiddle.net/uBxqY/4/, ou de la source:

Ext.define('Ext.ux.tab.Tab', {
    extend: 'Ext.tab.Tab',
    alias: 'widget.ux.menutab',
    requires: [
        //We just need the onClick from Split button
        'Ext.button.Split'
    ],

    /**
     * Menu align, if you need to hack the menu alignment
     */
    menuAlign: 'tl-bl?',

    constructor: function() {
        this.callParent(arguments);

        //Kind of harsh, we need the click action from
        //split button instead.
        //Or if you preferred, you can always override this
        //function and write your own handler.
        this.onClick = Ext.button.Split.prototype.onClick;
    },


    /**
     * Hack the default css class and add
     * some resonable padding so to make it looks
     * great :)
     */
    onRender: function() {
        this.callParent(arguments);

        //We change the button wrap class here! (HACK!)
        this.btnWrap.replaceCls('x-tab-arrow x-tab-arrow-right',
                               'x-btn-split x-btn-split-right')
                    .setStyle('padding-right', '20px !important');
    }
});

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    style: 'margin:10px;',
    defaults: {
        bodyStyle: 'padding:10px;'
    },
    plain: true,
    items: [{
        title: 'Split Tab',

        //tabConfig is taken up during tab formation
        tabConfig: {
            //We use our own custom tab!
            xtype: 'ux.menutab',
            menu: [{
                text: 'Menu item 1'
            },{
                text: 'Menu item 2'
            }]
        },
        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },{
        title: 'Normal Tab',
        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }]
});