PDA

View Full Version : Hide Tab depending on data combing back from a datastore?



Mthor
6 Oct 2009, 12:12 PM
I have a set of tabs in a tab panel. I have a store that gets me data back. I need to be able to hide(display:none;) a tab if the data returns true. I have tried many ways and cannot get this to work. I don't know if this is even possible. I can successfully hide a tab if I add

tabs.getTabEl('confrenceBridge').style.display = 'none';

below the store.load();

but i need this to all function depending on data returned to the page. all code is below. on the last set of tabs is where i have tried to hide and set display to none.


Ext.onReady(
function(){

var proxy = getExtProxy('AD/OUProperties')

var store = new Ext.data.Store({
proxy: proxy,
remoteSort: true,
reader: new Ext.data.XmlReader({
record: 'data',
id: '@id',
totalRecords: 'total'
}, [
{name: 'domain'}
])
});

Ext.QuickTips.init();
// set functions to hide a tab if the return data is true

var tabs = new Ext.TabPanel({
renderTo: 'tab1',
activeTab: 0,
frame:true,
layoutOnTabChange:true,
deferredRender:false,
items:[{
contentEl:'center1',
store:store,
id: 'myLocations',
dataIndex: 'domain',
layout:'fit',
title: 'My Locations',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'servCompress',
border:true,
loadMask:true
},
{
contentEl:'center2',
layout:'fit',
title: 'VoiceMail',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'advanced',
border:true,
loadMask:true

},{
contentEl:'center3',
cls:'hidetab',
layout:'fit',
title: 'Call Forwarding',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appExpand',
border:true,
loadMask:true
},
{
contentEl:'center4',
layout:'fit',
title: 'Office Communicator',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appBox',
border:true,
loadMask:true
},
{
contentEl:'center5',
layout:'fit',
title: 'Change Password',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'passwordChange',
border:true,
loadMask:true
},
{
contentEl:'center6',
layout:'fit',
store: store,
id: 'speedDials',
title: 'Speed Dials',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'speedDials',
border:true,
loadMask:true,
listners: function hideMyLocation (){
if (store('domain').getValue() == 'NorthFace') {
tabs.getTabEl('speedDials').style.display = 'none';
}
}
},
{
contentEl:'center7',
layout:'fit',
id: 'confrenceBridge',
title: 'Confrence Bridge',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'confBridge',
border:true,
loadMask:true
}]
});
store.load();
tabs.getTabEl('confrenceBridge').style.display = 'none';
});

Mthor
7 Oct 2009, 6:02 AM
I have been trying to read data directly from the store, but have not been successful. any ideas on how I can hide a tab depending on data coming from the store?

Mthor
8 Oct 2009, 8:07 AM
I have tried for a day now and still a no go, I have added the below code in a listner but usually I get undefined after the store.


listners: {
fn: function(){
if (store.get('domain') == 'NorthFace') {
tabs.getTabEl('speedDials').style.display = 'none';
}
}
}

the code below does hide a tab if I do it on load, but I need the tab to only hide depending on a data condition,


tabs.getTabEl('speedDials').style.display = 'none';

I have looked at examples that are trying this with json.store, but I am using xml .store


also I have altered the code below many times to retrieve the data from the store, this is where i get undefined

if (store.get('domain') == 'NorthFace')


any leads or help on this would be great!

thanks

Jack9
8 Oct 2009, 2:33 PM
Give the panel an id.


{
id: 'testTab',
contentEl:'center6',
layout:'fit',
store: store,
id: 'speedDials',
title: 'Speed Dials',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'speedDials',
border:true,
loadMask:true,
listners: function hideMyLocation ()
{
if (store('domain').getValue() == 'NorthFace') {
//tabs.getTabEl('speedDials').style.display = 'none';

//Ext.getCmp('testTab').setVisible(false); // was the first thing I tried
tabs.remove(Ext.getCmp('testTab'));
}
}
}

Mthor
9 Oct 2009, 6:20 AM
thanks for the reply.... I tried your suggestion and still no luck, I am getting the data back. in firebug I see my response. so I know that is all correct. I tried moving the listner into the store, but had no luck, I am going to try to add it to an onload function and see if that does it, any other help or suggestions is appreciated.

Mthor
9 Oct 2009, 7:47 AM
my new code is below, I have removed the function from the listener because I noticed this function was never getting called, so the function is in a var and I am calling the var after the load, once I did this I get an error saying store is not a function. any ideas on where to go from here,






Ext.onReady(
function(){

var proxy = getExtProxy('PortalWeb/GetUser')

var store = new Ext.data.Store({
proxy: proxy,
remoteSort: true,
reader: new Ext.data.XmlReader({
record: 'VMailUser',
id: '@id',
totalRecords: 'total'
}, [
{name: 'select',mapping: '@select'},
{name: 'domain'}
])
});

var hidePanel = function (){
if (store('domain').getValue() == 'NorthFace') {
//tabs.getTabEl('speedDials').style.display = 'none';
tabs.remove(Ext.getCmp('speedDials'));
}
};

Ext.QuickTips.init();
// set functions to hide a tab if the return data is true

var tabs = new Ext.TabPanel({
renderTo: 'tab1',
activeTab: 0,
frame:true,
layoutOnTabChange:true,
deferredRender:false,
items:[{
contentEl:'center1',
id: 'myLocations',
layout:'fit',
title: 'My Locations',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'servCompress',
border:true,
loadMask:true
},
{
contentEl:'center2',
layout:'fit',
title: 'VoiceMail',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'advanced',
border:true,
loadMask:true

},{
contentEl:'center3',
cls:'hidetab',
layout:'fit',
title: 'Call Forwarding',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appExpand',
border:true,
loadMask:true
},
{
contentEl:'center4',
layout:'fit',
title: 'Office Communicator',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appBox',
border:true,
loadMask:true
},
{
contentEl:'center5',
layout:'fit',
title: 'Change Password',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'passwordChange',
border:true,
loadMask:true,
cls:'displayNone'
},
{
contentEl:'center6',
layout:'fit',
id: 'speedDials',
title: 'Speed Dials',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'speedDials',
border:true,
loadMask:true
},
{
contentEl:'center7',
layout:'fit',
id: 'confrenceBridge',
title: 'Confrence Bridge',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'confBridge',
border:true,
loadMask:true
}]
});
store.load();
hidePanel();
//tabs.getTabEl('confrenceBridge').style.display = 'none';
//tabs.remove(Ext.getCmp('speedDials'));
});

Jack9
9 Oct 2009, 9:27 AM
Ext.onReady(function(){

Ext.QuickTips.init();

// var proxy = getExtProxy('PortalWeb/GetUser')

// var store = new Ext.data.Store({
// proxy: proxy,
// remoteSort: true,
// reader: new Ext.data.XmlReader(
// {
// record: 'VMailUser',
// id: '@id',
// totalRecords: 'total'
// },[
// {name: 'select',mapping: '@select'},
// {name: 'domain'}
// ])
// ,listeners:{
// load:function(){
// showhidePanel(tabs,speedDialsTab,false,5); // This hides
// //showhidePanel(tabs,speedDialsTab,true); // This unhides
// }
// }
// });

var speedDialsTab = new Ext.Panel({
//contentEl:'center6',
//layout:'fit',
id: 'speedDials',
title: 'Speed Dials',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'speedDials',
border:true,
loadMask:true
});

// set functions to hide a tab if the return data is true
var tabs = new Ext.TabPanel({
activeTab: 0,
frame:true,
layoutOnTabChange:true,
//deferredRender:true,
height:500,
items:[
new Ext.Panel({
//contentEl:'center1',
//layout:'fit',
id: 'myLocations',
title: 'My Locations',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'servCompress',
border:true,
loadMask:true
}),
new Ext.Panel({
//contentEl:'center2',
//layout:'fit',
title: 'VoiceMail',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'advanced',
border:true,
loadMask:true
}),
new Ext.Panel({
//contentEl:'center3',
//layout:'fit',
cls:'hidetab',
title: 'Call Forwarding',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appExpand',
border:true,
loadMask:true
}),
new Ext.Panel({
//contentEl:'center4',
//layout:'fit',
title: 'Office Communicator',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'appBox',
border:true,
loadMask:true
}),
new Ext.Panel({
//contentEl:'center5',
//layout:'fit',
title: 'Change Password',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'passwordChange',
cls:'displayNone',
border:true,
loadMask:true
}),
speedDialsTab, // Here is the tab
new Ext.Panel({
//contentEl:'center7',
//layout:'fit',
id: 'confrenceBridge',
title: 'Confrence Bridge',
autoScroll:true,
bodyStyle:'background-color:#dfe8f6;',
iconCls:'confBridge',
border:true,
loadMask:true
})
]
});
tabs.render('content');
//store.load();
//showhidePanel(tabs,speedDialsTab,false); // Uncomment this to start hidden, dont need an index
//showhidePanel(tabs,speedDialsTab,true,5); // Uncomment this to reveal again
});

function showhidePanel(tabs,speedDialsTab,visible,index){
if(visible){
tabs.insert(index,speedDialsTab);
}else{
tabs.remove(speedDialsTab);
}
tabs.doLayout();
};


Here's a unit test without a store. This works. So use your store.load() then in the listener do what you want after load()

Mthor
9 Oct 2009, 10:54 AM
thanks for the reply I addded what you suggested, and that all works. But I need to to happen depending on data from the store, so when the page loads it reads the store and then hides a tab because of the condition being returned in the store.

in this piece of code


if (store('storeID').getValue() == 'NorthFace') {
//tabs.getTabEl('speedDials').style.display = 'none';
tabs.remove(Ext.getCmp('speedDials'));
}

I am calling this after the store is loaded, and when I call that, I get store is not a function. I think if I can call data directly from the xml store then I can hide the tab with the first piece of code you gave me. I am going to continue to work with the last example you gave me and see if I can wrap my head around that, thanks for the help. but just not there yet.

Jack9
9 Oct 2009, 12:09 PM
,listeners:{
load:function(){
if(showCondition){
showhidePanel(tabs,speedDialsTab,false,5); // This unhides
}

if(hideCondition){
showhidePanel(tabs,speedDialsTab,true); // This hides
}
}
}
If you dont understand this, I can't help you any further.

Mthor
9 Oct 2009, 12:27 PM
JAck thank you for your reply, I do understand the code you posted and I know how to use it, so I can hide a tab on load. but I have to specify the tab. I will have a user admin page so the user will be selecting what will be showing, My Only problem now is retrieving data from the store the if(statement) will read. If I could read data from the store, even a local store for testing. then I can hide the tab panels thanks to your help.

So the only issue at hand is to get the domain from the store. if my domain == 'NorthFace' then speeddials tab will not show. so basicly I need a function to get data from the store so I can set a condition depending on that data. I have learned how to hide the panels onload. but they will need to be hidden only if the data returned is correct.

I hope that makes sense. your code has helped me alot to move forward. thanks

Mthor
13 Oct 2009, 6:08 AM
solved this issue, thanks for the help. solution below


Ext.onReady(
function () {

Ext.QuickTips.init();

var proxy = getExtProxy('PortalWeb/GetUser')

var xmlReader = new Ext.data.XmlReader({
record: 'VMailUser',
id: '@id',
totalRecords: 'total'
},
[{
name: 'domain',
convert: function (v, n) {
return Ext.DomQuery.selectValue('domain', n.parentNode);
}
}])

var store = new Ext.data.Store({
id: 'ID',
proxy: proxy,
remoteSort: true,
reader: xmlReader
});

var hidePanel = function () {
if (Ext.DomQuery.selectValue('domain', store.reader.xmlData) == 'NorthFace') {
// tabs.getTabEl('speedDials').style.display = 'none';
tabs.remove(Ext.getCmp('speedDials'));
alert('Tab removed')
}
};

var callForwardingTab = new Ext.Panel({
contentEl: 'center1',
id: 'myLocations',
layout: 'fit',
title: 'My Locations',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'servCompress',
border: true,
loadMask: true
});

var voiceMailTab = new Ext.Panel({
contentEl: 'center2',
layout: 'fit',
title: 'VoiceMail',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'advanced',
border: true,
loadMask: true
});

var myLocationsTab = new Ext.Panel({
contentEl: 'center3',
layout: 'fit',
title: 'Call Forwarding',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'appExpand',
border: true,
loadMask: true
});

var officeCommunicatorTab = new Ext.Panel({
contentEl: 'center4',
layout: 'fit',
title: 'Office Communicator',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'appBox',
border: true,
loadMask: true
});

var changePasswordTab = new Ext.Panel({
contentEl: 'center5',
layout: 'fit',
title: 'Change Password',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'passwordChange',
border: true,
loadMask: true,
cls: 'displayNone'
});

var speedDialsTab = new Ext.Panel({
contentEl: 'center6',
layout: 'fit',
id: 'speedDials',
title: 'Speed Dials',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'speedDials',
border: true,
loadMask: true
});

var confrenceBridgeTab = new Ext.Panel({
contentEl: 'center7',
layout: 'fit',
id: 'confrenceBridge',
title: 'Confrence Bridge',
autoScroll: true,
bodyStyle: 'background-color:#dfe8f6;',
iconCls: 'confBridge',
border: true,
loadMask: true
});

var tabs = new Ext.TabPanel({
renderTo: 'tab1',
store: store,
activeTab: 0,
frame: true,
layoutOnTabChange: true,
items: [
myLocationsTab, voiceMailTab, callForwardingTab, officeCommunicatorTab, changePasswordTab, speedDialsTab, confrenceBridgeTab]
});
store.load({
callback: hidePanel
});
tabs.getTabEl('confrenceBridge').style.display = 'none';
//tabs.remove(Ext.getCmp('speedDials'));
});