Complete code:
1. Basic Tab
TabPanel.html:
[Html]
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Title> Form </title>
<Link rel = "stylesheet" type = "text/css" href = "ext4/resources/css/ext-all.css">
<Script type = "text/javascript" src = "ext4/ext-all.js"> </script>
<Script type = "text/javascript" src = "js/tabPanel. js"> </script>
</Head>
<Body>
<Div style = "display: none;">
<Div id = "tab2">
Data imported from the div of the page
</Div>
</Div>
</Body>
</Html>
TabPanel. js
[Javascript]
Ext. require (
'Ext. tab .*'
);
Ext. onReady (
Function (){
Ext. create (
'Ext. tab. Panel ',
{
RenderTo: Ext. getBody (),
ActiveTab: 0,
Width: 600,
Height: 300,
Plain: true,
Defaults :{
AutoScoll: true
},
Items :[
{
// Id: 'tab1 ',
Title: 'tabs-1 ',
Html: 'This is a common tab'
},{
Title: 'tab-2 ',
ContentEl: 'tab2'
},{
// Id: 'tab2 ',
Title: 'ajax tab ',
AutoLoad :{
Url: 'tabaction ',
Params :{
Data: 'parameters passed in from the Client'
},
Method: 'get'
}
},{
Title: 'event tab ',
Listeners :{
Activate: function (tab ){
Alert (tab. title + ': activate event triggered. ');
}
},
Html: 'tab with event ',
AutoLoad: false
},{
Title: 'unavailable tab ',
Disabled: true
}
]
}
);
}
);
: