Basic tab Toggle tab code in EXTJS4

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:

[HTML]

The code is as follows	Copy Code
<div class= "content" style= "height:150px"         <div id= "TabPanel"              <div style= "Display:none"                  <div id= "Onetab"                      <p> What this tab shows is reading to other HTML tags </p>                 </ Div>             </div>          </div>     </div>

[Js]

The code is as follows

Copy Code

1. Basic tabs var tabs1 = ext.createwidget (' TabPanel ', { Renderto: "TabPanel", Activetab:1,//Specify the Default active tab width:600, HEIGHT:120, Plain:true,//true indicates no background picture on the tab candidate (default is False) Enabletabscroll:true,//tab too many times, allow scrolling Defaults: {autoscroll:true}, Items: [{ ID: "TAB1", Title: ' Normal tab ', HTML: "It's just a very common tab." ", Items:[{xtype: ' button ', Text: ' Buttons '}], Closable:true//This tab can be turned off }, { ID: "TAB2", Title: ' Content to div ', Contentel: ' Onetab '//specifies which HTML element is read from the current tab body section }, { ID: "Tab3", Title: ' Ajax Tab ', AutoLoad: {url: ' ajaxtabcontent ', params: {data: Parameters passed from client}, method: ' Get '} }, { ID: "TAB4", Title: ' Event tab ', Listeners: {activate:handleactivate}, HTML: "tab with events." " }, { ID: "TAB5", Title: ' Do not use tab ', Disabled:true, HTML: "Unavailable tab, you can't see me." " }] }); Events triggered after clicking TAB4 function handleactivate (tab) { Alert (Tab.title + ': Activated event triggered. '); }

Let's look at the resulting tab effect: