Extjs Tabpanel
function createViewPort()
{
    new Ext.Viewport
    ({
        layout: 'border',    
        items: 
        [
         {        
            title: strTitle,
            iconCls:'icon-grid',
            region:'center',
            id:'tool-bar',
            collapsible: false,
            margins:'10 10 10 10',
            border:true,
            //height: 1000,
            items: [

                {
                xtype: 'tabpanel',
                id:'data-tab',
                //height: 700,
                height: sHeight,
                border:false,            
                resizeTabs:true,
                enableTabScroll:true,
                monitorResize:true,
                layoutOnTabChange:true,
                autoDestroy:true,
                activeTab: 0,
                border:false,
                minTabWidth:120                        
            }]        
        }

        ]
    });
}

function addTabstoTabPanel()
{
    var psePanel = new Ext.Panel({
        title: '<b>PSE Forms</b>',
        autoHeight:true,
        items:[{
                xtype:'grid',
                id:'psegrid',
                autoExpandColumn:1,
                autoScroll:true,
                store:store,
                width:sWidth - 25,                
                height:sHeight * 0.7,
                border:false,
                stripeRows: true,
                view: new Ext.grid.GridView({                    
                    emptyText: '<label class="QFontred">No Records Found</label>' 
                       }),
                cm: new Ext.grid.ColumnModel([
                    new Ext.grid.RowNumberer(),
                    {header: "Patient Event Forms", renderer:columnRenderer, width: 300, sortable: true,dataIndex: 'LABEL'},
                    {header: "Status", sortable: true, width: 100, sortable: true, dataIndex: 'STATUS'},
                    {header: "Last Modified Date/Time", sortable: true, width: 170, sortable: true, dataIndex: 'MOD_DATE'},
                    {header: "Last Modified By", width: 200, sortable: true,dataIndex: 'MOD_USER_NAME'},
                    {header: "Last Release Date", width: 150, sortable: true,dataIndex: 'RELEASE_DATE'},
                    {header: "Last Released By", width: 200, sortable: true,dataIndex: 'RELEASE_USER_NAME'}
                ])
            }]
        });    

    var esePanel = new Ext.Panel({
        title: '<b>ESE Forms</b>',        
        items:[{
                xtype:'grid',
                id:'esegrid',
                autoExpandColumn:1,
                autoScroll:true,
                store:store2,
                width:sWidth - 25,
                height:sHeight * 0.5,
                border:false,                                
                stripeRows: true,
                view: new Ext.grid.GridView({
                    emptyText: '<label class="QFontred">No Records Found</label>'
                }),
                emptyText: 'No Record found',
                cm: new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),
                {header: "Employee Event Forms", renderer:columnRenderer, width: 300, sortable: true,dataIndex: 'LABEL'},
                {header: "Status", sortable: true, width: 100, sortable: true, dataIndex: 'STATUS'},
                {header: "Last Modified Date/Time", sortable: true, width: 190, sortable: true, dataIndex: 'MOD_DATE'},
                {header: "Last Modified By", width: 200, sortable: true,dataIndex: 'MOD_USER_NAME'},
                {header: "Last Release Date", width: 150, sortable: true,dataIndex: 'RELEASE_DATE'},
                {header: "Last Released By", width: 200, sortable: true,dataIndex: 'RELEASE_USER_NAME'}
                ])
            }]
        });    

    var vsePanel = new Ext.Panel({
            title: '<b>VSE Forms</b>',            
            items:[{
                    xtype:'grid',
                    id:'vsegrid',
                    autoExpandColumn:1,
                    autoScroll:true,
                    store:store3,
                    width:sWidth - 25,
                    border:false,
                    height:sHeight * 0.5,
                    stripeRows: true,
                    view: new Ext.grid.GridView({                    
                        emptyText: '<label class="QFontred">No Records Found</label>'
                       }),
                    cm: new Ext.grid.ColumnModel([
                    new Ext.grid.RowNumberer(),
                    {header: "Visitor Event Forms", width: 300, sortable: true,dataIndex: 'LABEL', renderer:columnRenderer},
                    {header: "Status", sortable: true, width: 100, sortable: true, dataIndex: 'STATUS'},
                    {header: "Last Modified Date/Time", sortable: true, width: 170, sortable: true, dataIndex: 'MOD_DATE'},
                    {header: "Last Modified By", width: 200, sortable: true,dataIndex: 'MOD_USER_NAME'},
                    {header: "Last Release Date", width: 150, sortable: true,dataIndex: 'RELEASE_DATE'},
                    {header: "Last Released By", width: 200, sortable: true,dataIndex: 'RELEASE_USER_NAME'}
                    ])                
                }]
                //autoExpandColumn:'LABEL'
            });

    var tabPanel = Ext.getCmp('data-tab')
    tabPanel.add(psePanel);
    tabPanel.add(esePanel);
    tabPanel.add(vsePanel);
    tabPanel.setActiveTab(psePanel);
}

function loadData()
{
    var psegrid = Ext.getCmp('psegrid');
    var esegrid = Ext.getCmp('esegrid');
    var vsegrid = Ext.getCmp('vsegrid');
    psegrid.store.load();
    esegrid.store.load();
    vsegrid.store.load();
}

function columnRenderer(value, p, record)
{    
    return String.format('<a class=\'QFont\' href="javascript:getForm(\'{1}\', \'{2}\', \'{3}\', \'{4}\', \'{5}\', \'{6}\',\'{7}\',\'{8}\',\'{9}\');" title="Click here to customize the form">{0}</a>',value, vProject_ID, vEntity_ID, record.data.TYPE, record.data.CATEGORY_ID, record.data.OTID, record.data.LABEL, record.data.MOD_DATE, record.data.MOD_USER_NAME);
}

function addTab(){
    tabs.add({
        title: 'New Tab 1',
        iconCls: 'tabs',
        html: 'Tab Body 1' + '<br/><br/>',

        closable:true
    }).show();        
    var panel = new Ext.Panel({
    });
}

createViewPort();
addTabstoTabPanel();
loadData();
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License