ExtJS - Dynamically add panel tabs

This piece of code demonstrates the ability to add content to the Ext.tab.Panel class at runtime.

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.1/classic/theme-neptune/resources/theme-neptune-all.css">
<div id="app">
</div>
<div id="command" style="margin-top: 10px">
</div>

JavaScript

Ext.ns('SM');

Ext.define('SM.store.Entity', {
	extend: 'Ext.data.Store',
  storeId: 'Entity',
  fields: [ 'id', 'name', 'description', 'type' ], // table, view, query, module, script, dictionary
  data: [
  	{ id: 1, name: 'User', description: 'User', type: 'table' },
    { id: 2, name: 'Roles', description: 'Security Roles', type: 'table' },
    { id: 3, name: 'Issue', description: 'Issues', type: 'table' },
    { id: 4, name: 'Supplier', description: 'Suppliers', type: 'table' },
    { id: 5, name: 'Enumeration', description: 'Meta service table', type: 'dictionary'}
  ],
  autoLoad: true,
  pageSize: 50,
  proxy: {
  	type: 'memory',
    reader: {
    	type: 'json'
    }
  }
});

Ext.define('SM.view.Main', {
	extend: 'Ext.tab.Panel',
	renderTo: 'app',
  items: [
  	{
    	xtype: 'form',
      title: 'Customer form',
      width: 300,
      bodyPadding: 10,
      items: [
      	{
        	xtype: 'textfield',
          fieldLabel: 'Project name'
        },
      	{
        	xtype: 'datefield',
          fieldLabel: 'Start date'
        },
        {
        	xtype: 'numberfield',
          minValue: 0,
          fieldLabel: 'Duration'
        }
      ]  
    }
  ]
});
var count = 0;
var tabPanel = Ext.create('SM.view.Main');
var gridPanel = function() {
  return Ext.create('Ext.grid.Panel', {
    title: 'Tab #',
    closable: true,
    store: Ext.create('SM.store.Entity'),
    columns: [
      { xtype: 'rownumberer' },
    	{ text: 'Name', dataIndex: 'name', flex: 1 },
      { text: 'Description', dataIndex: 'description', flex: 1 },
      { text: 'Type', dataIndex: 'type', width: 100 }
    ]
  });
};
var button = Ext.create('Ext.Button', {
	renderTo: 'command',
  text: 'Add a tab',
  handler: function() {
  	var grid = gridPanel();
  	grid.setTitle('Tab #' + (++count));
		tabPanel.add(grid);
    tabPanel.setActiveTab(grid);
  }
});