Tab example in ExtJs

Simple tab where both the tabs have their content populated beforehand

by Rambabu Pudi

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/8/simple-tab-extjs-sencha -->
<title>Tab example in ExtJs</title>
<div id="tabs1">
    <div id="textDiv" class="x-hide-display">        
        this is static text.
    </div>
    <div id="buttons"></div>
</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;
    }

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'
                }
        }
    });
    
     // create the form panel
    Ext.create('Ext.form.Panel', {
        renderTo:'buttons',
        width : 480,
        id : 'panelId'
    });
    
    //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);
                    }
                }
            };
            Ext.getCmp('panelId').insert(button);
        });//each                                           
    });//load

    var tabs = Ext.widget('tabpanel', {
        renderTo: 'tabs1',
        width: 500,
        activeTab: 1,
        defaults :{
            bodyPadding: 10
        },
        items: [{
           ...