Как я могу добавить инструменты на вкладке Extjs TabPanel? - PullRequest
Новая
       6

Как я могу добавить инструменты на вкладке Extjs TabPanel?

5 голосов
/ 19 июля 2011

Как добавить кнопки (инструменты) в заголовок каждой вкладки в TabControl?

Я мог бы просто добавить инструменты в TabPanel, но я хочу добавить их во вкладки.

Изображение

Я тоже пробовал это, но безуспешно: 

      var lTabPanel = Ext.create('Ext.tab.Panel', {
      width: 400,
      height: 400,
      renderTo: document.body,
      items: [{
          title: 'Home',
          html: 'Home',
          itemId: 'home'
      }, {
          title: 'Users',
          html: 'Users',
          itemId: 'users',
          hidden: true
      }, {
          title      : 'Tickets',
          html       : 'Tickets',
          itemId     : 'tickets',
          tools:[{
            type:'gear',
            tooltip: 'Options',
            handler: function(event, toolEl, panel){
                // Some code.
            }
          }]

      }]
  });

Есть идеи?

Спасибо!

Ответы [ 2 ]

12 голосов
/ 20 июля 2011

Довольно тяжело на самом деле.

Если вы проверяете их исходный код, Ext.tab.Panel фактически использует Макет карты, и для каждой вкладки они использовали Ext.tab.Tab для создания кнопок вкладок.

Тогда, если вы проверите исходный код Ext.tab.Tab, он фактически расширяет Ext.button.Button, что является просто измененной кнопкой.

Так что, если вам нужно добавить инструменты, я боюсь, что лучший способ - это расширить Ext.tab.Tab и написать свои собственные кнопки вкладок. Возможно, вы захотите проверить, как они создают closeable кнопки в строке 233 из /src/tab/Tab.js.

(Ext-4.0.2a)

Приветствия

EDIT

Итак, мы знаем, Ext.tab.Tab расширяет Ext.button.Button, мы можем использовать этот факт, и я предложил это решение, проверьте это на скрипке: http://jsfiddle.net/uBxqY/4/

По сути, я расширил Ext.tab.Tab и изменил класс buttonWrapper, чтобы добавить стрелку css. Ничего особенного, все работает из коробки.

Также я переопределил функцию onClick, поэтому меню не будет расширено, когда пользователь нажмет на саму вкладку. Немного грязно, но работает (заимствовано prototype.onClick из Ext.button.Split.

Рабочий пример : http://jsfiddle.net/uBxqY/4/, или источник: 

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.'
    }]
});
0 голосов
/ 11 августа 2014

Спасибо, что поделились решением! Это мой способ (основываясь на вашем): 

Ext.define('CB.view.ux.TabMenu', {
  extend: 'Ext.tab.Tab',
  alias: 'widget.tabmenu',
  requires: [
    'Ext.button.Split'
  ],

  menuAlign: 'tl-bl?',

  constructor: function() {
    this.callParent(arguments);
    this.onClick = Ext.button.Split.prototype.onClick;
  },

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

    this.btnWrap.insertSibling({
      tag: 'a',
      cls: 'arrow-inside-tab',
      href: '#'
    }, 'after');

    this.btnWrap.addCls(['pdr10']);  //padding-right: 10px; to make some place for arrow

  }
});

CSS: 

.arrow-inside-tab {
  display: block;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 5px;
  right: 4px;
  background: url("../js/extjs/resources/ext-theme-classic/images/button/arrow.gif") 1px 0 no-repeat;
}
...