iframe-proxy | Sunbelt Computer Software

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<html>

<head>

<title>Ext.Element</title>

<style>

body{

background-color:#aeaeae;

}

#container{

background-color:#ccc;

}

</style>

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

Ext.onReady(function () {

// a very basic TabPanel instantiation and render

var tabs = new Ext.TabPanel({

renderTo: Ext.getBody(),

activeTab: 0,

items: [{

title: 'Tab 1',

html: 'A simple tab'

},{

title: 'Tab 2',

html: 'Another one'

}]

});

/* 2)

// some more Tab options

// "disabled": unavailable tab

// "closable": whether a user can close the tab

var simpleTab = {

title : 'Simple tab',

id : 'simpleTab',

html : 'Your first tab!'

};

var closableTab = {

title : 'I am closable',

html : 'Please close when done reading.',

closable : true

};

var disabledTab = {

title : 'Disabled tab',

id : 'disabledTab',

html : 'Peekaboo!',

disabled : true,

closable : true

};

// enableTabScroll: for when there are more tabs than horiz. space

// note: defaultType for TabPanel items is Panel

var tabPanel = new Ext.TabPanel({

activeTab : 0,

id : 'myTPanel',

enableTabScroll : true,

items : [

simpleTab,

closableTab,

disabledTab,

]

});

new Ext.Window({

height : 300,

width : 400,

layout : 'fit',

items : tabPanel

}).show();

// Managing Tab Items

// can use add(), remove(), insert(), inherited from Ext.Container

var tPanel = Ext.getCmp('myTPanel');

tPanel.add({

title : 'New tab',

id : 'myNewTab'

});

// set Active Tab by id

tPanel.setActiveTab('myNewTab');

// enable/disable inline

Ext.getCmp('disabledTab').enable();

// hide tabs with utility method

Ext.getCmp('myTPanel').hideTabStripItem('disabledTab');

// Ext.getCmp('myTPanel').unHideTabStripItem('disabledTab');

*/ // end 2)

/* 3)

// Another Tab initialization example

Ext.QuickTips.init();

new Ext.Viewport({

layout : 'fit',

title : 'Exercising scrollable tabs',

items : {

layout: 'fit',

title: 'Tabs',

items: {

xtype: 'tabpanel',

activeTab: 0,

id: 'myTPanel',

enableTabScroll: true,

items: [

{

title: "First tab!"

}

]

}

});

// anonymous function to render out lots of tabs

(function(num){

for (var i = 1; i <= 30; i++) {

var title = "Long tab title # " + i;

Ext.getCmp('myTPanel').add({

title : title,

html : 'Hi, i am tab ' + i,

tabTip : title,

closable : true

});

}

}).defer(500);

*/ // end 3)

});

</script>

</head>

<body>

</body>

</html>

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

tab-panel-example.html

tab-panel-example.html

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

tab-panel-example.html

Latest commit

History

tab-panel-example.html

File metadata and controls