PDA

View Full Version : How to hide Panels/Cards from TabBar?



Andrel
29 Oct 2010, 1:26 PM
Is there any way, to add Components to a TabPanel without having them listet in the TabBar?

Following Code:

mainPanel is my Main Panel.

news is a list which fetches news by JSONP and shows them in a list.
By clicking on a Listitem i want to slide to the full news.

When I do not add the news_item to the mainPanel Items, I am unable to scroll and when I add it, there seems no way to hide its Button in the tabBar.

Any Ideas?









Ext.regModel('newsItem', {
fields: ['Short', 'Long']
});

var news_data = new Ext.data.Store({
id: 'news_data',
model: 'newsItem',
autoLoad: true,
proxy: {
type: 'scripttag',
url: 'http://www.someurl.com/news/json',
reader: {
type: 'json'
}
}
});

var news = {
id: 'news',
xtype: 'list',
fullscreen: true,
scroll: 'vertical',
iconCls: 'more',
title: 'News',
layout: 'card',
tpl: [
'<tpl for=".">',
'<div class="newslist">',
' <h2>{Short}</h2>',
'</div>',
'</tpl>'
],
itemSelector: 'div.newslist',
singleSelect: true,
store: tabelle_data,
disclosure: {
handler: function(record, btn, index) {
myNewsItem = Ext.getCmp('news_item');
tpl = ' <div class="content">';
tpl+= ' <p>'+record.get('Long')+'</p>';
tpl+= '</div>';
tpl+= '<div style="height: 80px;"></div>';

myNewsItem.update(tpl);

mainPanel.setCard(myNewsItem, 'slide');
}
},
listeners: toolbarHandler
}

var news_item = {
xtype: 'panel',
id: 'news_item',
fullscreen: true,
scroll: 'vertical',
layout: 'card',
title: 'News',
html: 'News',
listeners: toolbarHandler
};

mainPanel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
cls: 'MainCard',
ui: 'light',
items: [
news,
news_item,
videos
]
});