Tab example in ExtJs - Dynamic Content

Simple tab - one tab static content, the other one has dynamic content

by redoak2000

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<!-- corresponding blog at http://blog.jardalu.com/2013/6/10/simple-tab-dynamic-content-extjs-sencha -->
<title>Tab example (dynamic content) in ExtJs</title>
<div id="tabs1"></div>

CSS

body {
    padding: 50px 20px 0 20px;
}

JavaScript

Ext.require(['Ext.data.*', 'Ext.tab.*']);

function createFakeData(count) {
    var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe'];
    var lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias'];
    var data = [];
    for (var i = 0; i < count; i++) {
        var firstNameId = Math.floor(Math.random() * firstNames.length);
        var lastNameId = Math.floor(Math.random() * lastNames.length);
        var name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
        data.push([name]);
    }
    return data;
}

function loadButtons(store, panel) {
    //create the buttons          
    store.load(function () {
        store.each(function (records) {
            var button = {
                xtype: 'button',
                text: records.get('Name'),
                margin: '10 10 10 10',
                listeners: {
                    click: function () {
                        Ext.Msg.alert('Hello', "You selected " + this.text);
                    }
                }
            };
            panel.add(button);
        }); //each                                           
    }); //load

    panel.doLayout();
}

Ext.onReady(function () {
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: ['Name']
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
            type: 'memory',
            data: createFakeData(10),
            reader: {type: 'array'}
        }
    });

    var tabs = Ext.widget('tabpanel', {
        renderTo: 'tabs1',
        width: 500,
        activeTab: 0,
        defaults: {
            bodyPadding: 10
        },
        items: [{
            title: 'Text',
            html: 'static content'
        }, {
            title: 'Dynamic Buttons',
            items: [],
            listeners: {
                activate: function (tab) {
                    if (tab.items.length == 0) {
                        var panel =...