ExtJs4.2 Learning--ext.tab.panel Tab

1, the basic label of the container. Tabpanels can use exactly the same standard Ext.panel.Panel layout, but it also has special support for subcomponents (items) that are being managed using CardLayout layout manager, and is displayed as a separate label. First look at the official documents:

Let's take a look at a simple example:

var tabs = ext.create (' Ext.tab.Panel ', {
    	    width:400,
    	    height:400,
    	    renderTo:document.body,
    	    items: [{
    	        Title: ' Home ', HTML: ' Home ',
    	        itemId: ' Home '
    	    }, {
    	        title: ' Users ',
    	        HTML: ' users ',
    	        itemId: ' Users ',
    	        hidden:true
    	    }, {
    	        title: ' Tickets ',
    	        HTML: ' Tickets ',
    	        itemId: ' Tickets '
    	    }]
    	});

    	settimeout (function () {
    	    tabs.child (' #home '). Tab.hide ();
    	    var users = tabs.child (' #users ');
    	    Users.tab.show ();
    	    Tabs.setactivetab (users);
    	}, 1000);

2. Basic tab:

First we define a basic tab control, where each tab is different, and the body of the TAB key can be obtained in three ways:

1. Basic way: by defining the way of HTML and items.

2. Read other HTML information: by setting Contentel you can get additional HTML information for the current tab body.

3. Read service-side data: to obtain server-side data by defining autoload asynchronous methods.

In addition, each tab can be set whether it can be closed, when the tab entry event, and the tab is available, see the code:

Page HTML code:

 

The JS code is:


1. Basic tab var TABS1 = ext.createwidget (' TabPanel ', {renderto: "TabPanel", activetab:1,// Specifies the default active tab width:600, height:120, Plain:true,//true indicates that there is no background picture on the TAB candidate bar (default is false) en
        Abletabscroll:true,//When too many tabs, allow scrolling defaults: {autoscroll:true}, items: [{id: ' TAB1 ', Title: ' Normal tab ', HTML: "This is just a very common tab."
        ", items: [{xtype: ' button ', Text: ' button '}], Closable:true//This tab can be closed}, { ID: "TaB2", Title: ' Content to Div ', Contentel: ' Onetab '//Specify the current tab body section from which HTML element reads}, {I D: "Tab3", Title: ' Ajax Tab ', autoload: {url: ' ajaxtabcontent ', params: {data: Parameters passed from client}, method: ' G ET '}}, {id: "TAB4", Title: ' Event tab ', listeners: {activate:handleactivate}, HTML: "Tab with events."
        "}, {id:" TAB5 ", Title: ' Not tab ', Disabled:true,HTML: "Unavailable tab, you can't see me."
"
    }]
}); Event function handleactivate (tab) {alert (Tab.title + ': Activated Event trigger) triggered after TAB4 is clicked.
'); }
 

Finally, you can see the effect:



3. Operation Tab:

After the creation of the tab, we can use JS to manipulate it, such as dynamic new, delete, Insert tab, set the Activity tab, etc., we look at the specific implementation methods:

HTML code:


 

JS Full code:


Ext.onready (function () {//1. basic tab var TABS1 = ext.createwidget (' TabPanel ', {renderto: "TabPanel",                        Activetab:1,//Specifies the default active tab width:600, height:120, Plain:true,
    	    True indicates that there is no background picture on the TAB candidate bar (default is False) Enabletabscroll:true,//When too many tabs are allowed to scroll Defaults: {autoscroll:true}, items: [{id: "Tab1", Title: ' Normal tab ', HTM L: "It's just a very ordinary tab."
    	    ", items: [{xtype: ' button ', Text: ' button '}], Closable:true//This tab can be closed }, {id: "tab2", Title: ' Content to Div ', Contentel: ' Onetab '//specified the current tab body section from which HTML element reads}, {ID: "Tab3", Title: ' Ajax Tab ', autoload: {url: ' ajaxtabc Ontent ', params: {data: Parameters passed from client}, method: ' Get '}, {id: ' tab4 ', Title: ' Event tab '
    ,	        Listeners: {activate:handleactivate}, HTML: "tab with events." "}, {id:" TAB5 ", Title: ' Not tab ', Disabled:true, HTML:" not With the tab, you can't see me.
    	"
    	    }]
    	}); Event function handleactivate (tab) {alert (Tab.title + ': Activated Event trigger) triggered after TAB4 is clicked.
    	');

    	var index = 0; Add a tab ext.createwidget ("button", {text: "Add a Tab", Renderto: ' Content2 ', handler:fun
    	            Ction () {Tabs1.add ({title: ' new tab ' + (++INDEX), ID: "Newtab" + Index,
    	    HTML: ' tab text section ' + (index) + ' <br/><br/> ', closable:true});

    	}
    	});  Insert a tab ext.createwidget ("button", {text: "Insert new tab in position 2nd", Renderto: ' Content2 ', handler:
    	            function () {Tabs1.insert (2, {title: ' new tab ' + (++index),ID: "Newtab" + index, HTML: ' tab text section ' + (index) + ' <br/><br/> ', closable:t
    	    Rue});

    	}
    	}); Delete a tab ext.createwidget ("button", {text: "remove tab number 2nd), Renderto: ' Content2 ', handler:
    	    function () {tabs1.remove (2);

    	}
    	});
    	    Delete tab ext.createwidget with ID "tab1" ("button", {text: "delete tab with ID" Tab1 ", Renderto: ' Content2 ',
    	    Handler:function () {tabs1.remove ("tab1");

    	}
    	});
    	    Delete tab ext.createwidget with ID "tab1" ("button", {text: "Set the Third tab to active tab", Renderto: ' Content2 ',
    	    Handler:function () {tabs1.setactivetab (2);
	}
    	}); });
 

The final effect is: