PDA

View Full Version : problem to hide and show a toolbar



myput
23 Nov 2011, 8:43 AM
Hello,

I have a problem with my panel.
When i call a view by a button, i have a container with a list and a detailPanel.
i have a TopBar in my container for the list.
And i have a toolbar for the detailPage of the list.
but i don't know how to hide / show the toolbar. When i hide it, there is a white space of the toolbar and the new toolbar don't go up.

this is the code of the container:


App.views.DirectoryDetailPanelSuggestionsToolbar = new Ext.Toolbar ({
dock : 'top',
items: [{
text: 'back',
handler: function() {......}
}],
});


App.views.DirectoryDetailPanelSuggestionsDetailCardContainer = new Ext.Panel ({
fullscreen: true,
layout: 'card',
items: [
App.views.SuggestionsDetailPanel,
]
});


App.views.DirectoryDetailPanelSuggestionsList = new Ext.List ({
layout: 'fit',
fullscreen: true,
itemTpl: loadURL(App.config.host + App.config._DirectoryTPL + 'DirectoryList.html'),
store: App.stores.DirectoryListStore,
listeners: {
itemtap: function(view, index) {
.......
},
},
});


App.views.DirectoryDetailPanelSuggestions = new Ext.Panel ({
fullscreen: true,
scroll: 'vertical',
layout: 'card',
dockedItems: [App.views.DirectoryDetailPanelSuggestionsToolbar],
items: [App.views.DirectoryDetailPanelSuggestionsList, App.views.DirectoryDetailPanelSuggestionsDetailCardContainer]
});


This is the detailPanel:


App.views.SuggestionsDetailPanelToolbar = new Ext.Toolbar ({
dock : 'top',
items: [{
text: '',
handler: function() {...}
}],
});


App.views.SuggestionsDetailPanel = new Ext.Panel ({
fullscreen: true,
dockedItems: [App.views.SuggestionsDetailPanelToolbar],
layout: 'card',
});


In my controller, i have:


tapDetailListSuggestions: function(param) {
record = param.data;
App.views.DirectoryDetailPanelSuggestionsToolbar.hide();

App.views.SuggestionsDetailPanelToolbar.setTitle(record.name);
App.views.DirectoryDetailPanelSuggestions.setActiveItem(App.views.DirectoryDetailPanelSuggestionsDetailCardContainer, {type: 'flip'});
},

backToListSuggestions: function() {
App.views.DirectoryDetailPanelSuggestionsToolbar.show();
App.views.DirectoryDetailPanelSuggestions.setActiveItem(App.views.DirectoryDetailPanelSuggestionsList);
},


and i'm trying to hide App.views.DirectoryDetailPanelSuggestionsToolbar when i'm comming to the detailPage and have only the toolbar App.views.SuggestionsDetailPanelToolbar.

I would like to do a doLayout, but i don't know what to update... It makes me some bugs

I don't know where is the problem...

Thanks for help

mitchellsimoens
23 Nov 2011, 11:31 AM
After you show/hide a docked item like a toolbar, you must execute the doComponentLayout on the Panel.

myput
23 Nov 2011, 11:34 AM
yes i tried App.views.DirectoryDetailPanelSuggestionsToolbar.doComponentLayout(); without success...
i tried too App.views.DirectoryDetailPanelSuggestionsToolbar.doLayout();
and


App.views.DirectoryDetailPanelSuggestions.doComponentLayout();Nothing ...

myput
24 Nov 2011, 5:33 AM
Okey, i found the solution with hide and show the panel dockedItems and not the toolbar.
In the controller:

In itemTap:


App.views.DirectoryDetailPanelSuggestions.dockedItems.items[0].hide();
App.views.DirectoryDetailPanelSuggestions.doComponentLayout();


In BacktoList:


App.views.DirectoryDetailPanelSuggestions.dockedItems.items[0].show();
App.views.DirectoryDetailPanelSuggestions.doComponentLayout();