Center Tabs Creation

CenterTabs.js

Ext.define("AlliBilli.view.main.center.Center", {
  extend: "Ext.tab.Panel",
  requires: ["Ext.ux.TabReorderer"],
  xtype: "reorderable-tabs",
  region: "center",
  activeTab: 0,
  width: "100%",
  header: false,

  plugins: {
    tabreorderer: true,
  },

  defaults: {
    bodyPadding: 10,
    scrollable: true,
    closable: true,
  },

  items: [
    {
      title: "Think Special",
      iconCls: 'fas fa-cat',
      html:
        "The tabs in this example are reorderable. Drag any tab to change the order.",
      reorderable: false,
      closable: false
    },
    {
      title: "Shout At Me",
      reorderable: false,
      iconCls: 'far fa-clock',
      
      closable: false
    },
    {
      title: "Tab 3",
      
    },
    {
      title: "Non Reorderable",
      html: "I can't be moved",
      reorderable: true
    },
    {
      title: "Tab 4",
      reorderable: true
    },
  ],

  dockedItems: {
    dock: "bottom",
    xtype: "toolbar",
    items: [
      {
        text: "Add a Tab",
        glyph: 43,
        listeners: {
          click: "onAddTabClick",
        },
      },
    ],
  },
});

/*
Ext.define('AlliBilli.view.main.center.Center', {
    extend: 'Ext.grid.Panel',
    xtype: 'tabpanel',
    region: "center",
    activeTab: 0,
    width: "64%",
  
    requires: [
        'AlliBilli.store.Personnel'
    ],

   items: [
      {
        title: "Think Speical",
        layout: "fit",
        iconCls: "think",
        closable: false,
        listeners: {
          activate: function (tab) {

          },
        },
      },
      {
        title: "Shout At Me",
        layout: "fit",
        iconCls: "feedback",
        closable: false,
        items: [],
        listeners: {
          activate: function (tab) {
            
          },
        },
      },
    ],

});*/