PDA

View Full Version : Custom Advanced Tab



angel3m
25 Jul 2009, 2:36 AM
Hi

I'm new to Ext JS. Liked all your work and efforts guys. Its so nice.
I was looking for Tabs with scrolling option that i got on ur website in Advanced Tab
Now i want to customize it. Let say

1. On load selected Tab Should be 1st Tab.
2. My own custom Tab Names, without Numbers.
3. External HTML Content for each tab.

i tired to search in the forum, but did'nt get any solution for it. That's why i am posting it here.Please Help me in this

Thank you in Advance

andycramb
25 Jul 2009, 3:14 AM
1. On load selected Tab Should be 1st Tab. Done using actveTab
2. My own custom Tab Names, without Numbers. Done using title
3. External HTML Content for each tab. Done using contentEl which points to an id of an HTML element with your chosen mark up


var myTabs= new Ext.TabPanel({
height: 300
, width: 300
, padding: '5px'
, plain: true
, deferredRender: false
, activeTab: 0 // 1 answer
, items: [{ title: 'Contacts'//2 answer, contentEl: 'contacts'//3 answer }, { title: 'Conversations', contentEl: 'conversations'}]
});

angel3m
25 Jul 2009, 3:42 AM
Thnx for the Quick reply Andy
now, where i shud place / replce this code?

andycramb
25 Jul 2009, 4:47 AM
There could be quite a few answers to that question
I have made a few assumptions
Try this




Ext.onReady(function() {

Ext.QuickTips.init();

var myTabs= new Ext.TabPanel({
height: 300
, width: 300
, padding: '5px'
, plain: true
, renderTo: 'tabInHere'
, deferredRender: false
, activeTab: 0 // 1 answer
, items: [{ title: 'Contacts'//2 answer, contentEl: 'contacts'//3 answer }, { title: 'Conversations', contentEl: 'conversations'}]
});

});
<body>
<div id="tabInHere"></div>

<div id="'contacts" class="x-hide-display">
<p>hello</p>
</div>
</body>


API docs explain this as well
If you consistently want help I have found it best to show what you have done first
At the moment I have no context to your question
Hope the above helps

angel3m
25 Jul 2009, 5:53 AM
well, i didnt do much change
after downloading the example i changed in tabs-adv.js file and here is the code.
And there is no change in any other file.


/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 170,
tabWidth:175,
enableTabScroll:true,
width:648,
height:250,
defaults: {autoScroll:false},
activeTab: 0,
deferredRender: false,
//plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
while(index < 8){
addTab();
}
function addTab(){
tabs.add({
title: 'My Tab ' + (++index),
//iconCls: 'tabs',
html: '<br/>' + Ext.example.bogusMarkup,
closable:false
}).show();
}
});

angel3m
25 Jul 2009, 9:18 PM
ANY HELP PLZ???

:(

andycramb
26 Jul 2009, 12:32 AM
try this below
I have not had time to try it but you may need to call doLayout



Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 170,
tabWidth:175,
enableTabScroll:true,
width:648,
height:250,
defaults: {autoScroll:false},
activeTab: 0,
deferredRender: false,//remove comma
//plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
while(index < 8){
addTab();
}
function addTab(){
tabs.add({
title: 'My Tab ' + (++index),
//iconCls: 'tabs',
html: '<br/>' + Ext.example.bogusMarkup,
closable:false
}).show();//remove show
}

tabs.doLayout();//add this
});