Developer Snippets - An Embodiment for Developers

<h1>How To: Make Tabs Reload and Evaluate Scripts</h1>
<!-- container for the existing markup tabs -->
<div id="renderTabs"></div>

    // First Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
		listeners: {
		tabchange: function(tabPanel,newTab){
			 var thisObj = newTab.getUpdater();
			 if(thisObj) thisObj.refresh();
		  }
	    },
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true} //Simple Page with JavaScript Code
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });

	// Second Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true}, //Simple Page with JavaScript Code
				listeners:{
					activate : function(tabpanel){
						tabpanel.getUpdater().refresh();
					}
				}
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });