PDA

View Full Version : Nested List toolbar adding a home button and edit back



simondavies
10 Oct 2011, 3:45 AM
I have sorted out my nested list etc but I want to put a home button on the right hand side and have tried all the other methods I know but nothing.

For the Home button I would like to use the following:
{iconCls: 'home', iconMask: true, id: 'homeBtn'}

Also I would like to use an icon for the back button but still no luck on this either, my other ones use {iconCls: 'arrow_left', iconMask: true, id: 'backBtn'... etc

I can hide the toolbar generic one and add my own docked item one but I do not get the back button effect that the toolbar one uses etc.

Thanks

simondavies
18 Oct 2011, 8:18 AM
Bump - Is there no whay to add another button to the Nestedlust toolbar on the right hand side???

simondavies
18 Oct 2011, 8:54 AM
I seemed to have sorted this, the easy way: Doh!

toolbar: {
items: [{xtype: 'spacer'},{iconCls: 'home', iconMask: true, id: 'homeBtn'}]
},

Thanks

myput
27 Oct 2011, 7:42 AM
Hello simondavies,

you seems take the solution;
I research like you a button, in my nestedList, able to come back to the first page of the nestedList.
With your home button, it's working for you?
Can you show me the solution for that please ?

Thanks

simondavies
2 Nov 2011, 3:45 AM
Hi ya, sorry just back at work and getting through things, can you let me knwo what your after and code that your using and will have a look.

myput
2 Nov 2011, 5:26 AM
WPApp.views.DirectoryItemListContainer = new Ext.Panel ({
id: 'WPApp.views.DirectoryItemListContainer',
fullscreen: true,
layout: 'card',
items: [WPApp.views.DirectoryListItemPanel, WPApp.views.DirectoryDetailPanel],
});


WPApp.views.DirectoryNestedListPanel = Ext.extend(Ext.Panel,{
id: 'WPApp.views.DirectoryNestedListPanel',
items: [{
xtype: 'nestedlist',
id: 'nestedlist',
title: WPApp.config._DirectoryTitle,
store: WPApp.stores.DirectoryNestedListStore,
fullscreen: true,
singleSelect: true,
displayField: 'name',
useTitleAsBackText: false,
backText: ' ',
getItemTextTpl: function() {
var tplConstructor = loadURL(WPApp.config.host + WPApp.config.DirectoryTPL + 'DirectoryNestedListPanel.html');
return tplConstructor;
},
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
var DetailPanel = new Ext.Panel({
recordNode: item,
layout: 'fit',
items: [WPApp.views.DirectoryItemListContainer],
listeners: { beforeDestroy: function() { return false; } }
});
DetailPanel.update(itemData);
Ext.getStore(WPApp.stores.DirectoryItemListListStore).setId(itemData.idCategorie);
return DetailPanel;
},
listeners: {
afterrender: function() {
this.toolbar.remove(this.backButton);
this.backButton = new Ext.Button({
ui: 'plain',
iconMask: true,
useTitleAsBackText: false,
iconCls: 'arrow_left',
scope: this,
handler: this.onBackTap
});
this.toolbar.add(this.backButton);
},
scope: WPApp.views.DirectoryNestedListPanel
},
}]
});




Thanks, i have a nestedlist, and after a list in the detailPanel. i would like in the toolbar a home button like you... And if know how to hide the nestedList toolbar when i'm coming in the list.

Thanks by advance

simondavies
3 Nov 2011, 1:40 AM
to get my home button i placed the following code:

toolbar: {
componentCls: 'x-toolbar-dark',
items: [{xtype: 'spacer'},{iconCls: 'home', iconMask: true, id: 'homeBtn'}]
},

I placed my just after the "backText: ' '" like below:



backText: ' ',
toolbar: {

componentCls: 'x-toolbar-dark',
items: [{xtype: 'spacer'},{iconCls: 'home', iconMask: true, id: 'homeBtn'}]
},

then to have the hom ebutton working within the controller for this list i placed the following code:


var homeBtn = this.application.viewport.query('#homeBtn')[0];
homeBtn.setHandler(function(){
Ext.dispatch({
controller: 'app',
action: 'index',
historyUrl: '#app/index',
animation: {
type: 'fade',
reverse: true
},
});
});

Hope this helps?

With regards to your next question:

And if know how to hide the nestedList toolbar when i'm coming in the list.

Can you elaborate a bit more no this.

Thanks

myput
3 Nov 2011, 2:07 AM
Hum, i understand the method. But the function:



var homeBtn = this.application.Viewport.query('#homeBtn')[0];
homeBtn.setHandler(function(){
Ext.dispatch({
controller: WPApp.controllers.directoryController,
action: 'index',
historyUrl: '#app/index',
animation: {
type: 'fade',
reverse: true
},
});
});


send me an error, white page.
in my controller, i have:



WPApp.controllers.directoryController = new Ext.Controller({


index: function(options) {
WPApp.views.Viewport.setActiveItem(WPApp.views.DirectoryPanel, options.animation);
},


});


What is the goal of the historyUrl ?
and can you see the problem?

My question was:
We can with your method modify the nestedList toolbar, then, i would like to know if we can hide the toolbar when we want ?
for example,
i have my normal nestedlist toolbar, and when i come in the detailPanel of the nestedlist, i have a list. When i go to an item of the list, i create a toolbar with title of the item, but unfortunatly, i have 2 toolbar ... The nestedList toolbar and the toolbar of the item ...
Is it possible to hide at the moment of itemTap list the nestedList toolbar ?

Thanks for your help :)

simondavies
3 Nov 2011, 7:47 AM
Not a problem,

For the homepage button I have the following within my Controller for say one of my views:


,
//--
groupsPage: function()
{
if ( ! this.groupsPageView){
this.groupsPageView = this.render({
xtype: 'groupsPage',
});
}

this.application.viewport.setActiveItem(this.groupsPageView);

var homeBtn = this.application.viewport.query('#homeBtn')[0];
homeBtn.setHandler(function(){
Ext.dispatch({
controller: 'app',
action: 'index',
historyUrl: '#app/index',
animation: {
type: 'fade',
reverse: true
},
});
});
},.....
//

What this does it connects my home button named: #homeBtn with the code in the toolbar, so it attaches the event to that toolbar button.

The function simply lest the site know what page to view and the animation used when the home button is clicked.

So the history url is basically saying on home button click open the index view, which is my home page.

Hope this helps.

With regards to your Toolbar hidden, there is a way by using the variable 'useToolbar:false', within the nestedlist code but from memory this will also hide it form the list views as well??

Another way woudl be to use css display:none; etc in your details view to target the toolbar, you coudl do this in the itme tap not sure unless I can recreate what your doing.

Si

myput
3 Nov 2011, 8:16 AM
Ok thanks for the answer.
I Added the button in my nestedList toolbar, and in the controller, added the function;
When i click on the button with an alert, it's okey i can see the alert but nothing after.

my controller:


Ext.regController('Directory', {

index: function(options) {
if ( ! this.indexView) {
this.indexView = this.render({
xtype: 'DirectoryIndex',
});
}
this.application.viewport.setActiveItem(this.indexView, options.animation);
var homeBtn = this.application.viewport.query('#homeBtn')[0];
homeBtn.setHandler(function(){
Ext.dispatch({
controller: 'Directory',
action: 'index',
historyUrl: '#Directory/index',
animation: {type: 'fade', reverse: true},
});
});
},

});


It's strange because i call the same view, the url is good ...
http://localhost:8888/App/#Directory/index

Can you see the problem?

simondavies
3 Nov 2011, 8:42 AM
The only difference I see with yours and mine is as follows:

Where you have:


index: function(options) {
if ( ! this.indexView) {
this.indexView = this.render({
xtype: 'DirectoryIndex',
});
}
this.application.viewport.setActiveItem(this.indexView, options.animation);

I would just have


index: function() {
if ( ! this.indexView) {
this.indexView = this.render({
xtype: 'index',
});
}
this.application.viewport.setActiveItem(this.indexView);

I do not have the "options" and "options.animations" and I also just have "index" where you have "DirectoryIndex"

This is all i can see at the mo.

myput
3 Nov 2011, 8:50 AM
yes that strange ;.. i can't call index because in my viewport, i have:


App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
xtype: 'TabBarMvc',
items: [
{
text: App.config._DirectoryTitle,
iconCls: App.config._DirectoryIconCls,
route: 'Directory/index',
},
{
text: App.config._SearchTitle,
iconCls: App.config._SearchIconCls,
route: 'Search/index',
}
]
}
]
});


Then it's that, Directory/index, i don't know why it doesn't work ...

simondavies
4 Nov 2011, 1:16 AM
All I have in my viewport is as follows:


App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide'
});
In my main app js file I have:



Ext.regApplication({
name: "App",
defaultUrl: 'app/index',
launch: function() {
this.viewport = new this.views.Viewport();
}
});



Hope this helps, otherwise if you want to pm or send a zip version of what it is your doing and I can try to have a look etc

Thanks

myput
4 Nov 2011, 1:28 AM
Yes i have the same ... Just in my Viewport i have 4 views in a bottom toolbar... I don't understand -_-

simondavies
4 Nov 2011, 2:33 PM
I believe I have solved the issue.


Firstly please find below the code i added to get this to work:

Your DirectoryController.js File:



Ext.regController('Directory', {


index: function(options) {
if ( ! this.indexView) {
this.indexView = this.render({
xtype: 'DirectoryIndex',
});
}
this.application.viewport.setActiveItem(this.indexView, options.animation);
var homeBtn = this.application.viewport.query('#homeBtn')[0];
homeBtn.setHandler(
function(){
Ext.redirect('Search/index');
});
},


});



Your DirectoryIndexView.js file


App.views.DirectoryIndex = Ext.extend(Ext.NestedList, { title: App.config._DirectoryTitle,
store: App.stores.DirectoryIndexStore,
fullscreen: true,
singleSelect: true,
displayField: 'name',
useTitleAsBackText: false,
backText: '',
getItemTextTpl: function() {
var tplConstructor = loadURL(App.config.host + App.config.DirectoryTPL + 'DirectoryIndex.html');
return tplConstructor;
},
listeners: {
afterrender: function() {
this.toolbar.remove(this.backButton);
this.backButton = new Ext.Button({
ui: 'plain',
iconMask: true,
useTitleAsBackText: false,
iconCls: 'arrow_left',
scope: this,
handler: this.onBackTap
});
this.toolbar.add(this.backButton);
},
scope: App.views.DirectoryIndex,
},
toolbar: {
componentCls: 'x-toolbar-dark',
items: [{xtype: 'spacer'},{iconCls: 'home', iconMask: true, id: 'homeBtn'}],
},



});
Ext.reg('DirectoryIndex', App.views.DirectoryIndex);




Now the issue I believe is that as you have it on your main controller/home section your already on the home page. (index.html#Directory/index) so in my earlier code that you tried and said that you got it to register an Alert but not goinb back is because to go home I was calling 'Directory/index' within my Ext.redirect('Directory/index') and as we are already on this page its got nowhere else to go.

I tested this by simply putting another page/view call within the Ext.redirect and it worked fine and opened the search section up. (see above I have used the 'search/index' in the Ext.redirect code)

try this and you will see the home page works.

so what you need to do is if you want to call the Directory/index in the code then you need to some how reset it so it loads the first data list from the nested view.

Hoep this helps

myput
7 Nov 2011, 12:41 AM
:D Hum yes exactly, thanks, the method works fine :).

Yes it's that, i look for a method able to initialize again my view in fact.
It's for this reason, i found a solution, consist to destroy the view:


listeners: {
deactivate: function(this.indexView) {
this.indexView.destroy();
}
},


But it doesn't work for the moment, i can't implement it... And how to initialize the view again.
do you know?

simondavies
10 Nov 2011, 1:24 AM
Hi myput sorry not been intouch, been working on other projects at mo and busy, have you solved this issue yet? Otherwise I will have a look

Thanks

myput
10 Nov 2011, 1:48 AM
Hey, thanks :) no problem,

No i'm trying to remake the application without extern scripts etc ... and for the moment, i have an MVC application with my views but i have a problem for load html and views in render ... I don't know why for the moment.



App.views.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport',
fullscreen: true,
layout: 'card',
dockedItems: [
new Ext.TabPanel({
fullscreen: true,
layout: "card",
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'fade'
},
defaults: {
scroll: 'vertical'
},
items: [
{
title: App.config._HomeTitle,
iconCls: App.config._HomeIconCls,
controller: 'Home',
action: 'index'
},{
title: App.config._DirectoryTitle,
iconCls: App.config._DirectoryIconCls,
controller: 'Directory',
action: 'index',
}
],
listeners: {
cardswitch: function(tabPanel, newCard, oldCard, index, animated) {
if(newCard.controller && newCard.action){
Ext.dispatch({
controller: newCard.controller,
action: newCard.action,
historyUrl: newCard.controller+"/"+newCard.action,
animation: {type:'slide',direction:'left'}
});
}
}
}
})
]
});


and the controller for example Home



Ext.regController('Home', {


index: function(options) {
this.indexView = this.render({
xtype: 'App.views.homeView',
listeners: {
deactivate: function() {
App.views.homeView.destroy();
}
}
});
this.application.viewport.setActiveItem(this.indexView, null);
}

});


when i put an alert before this.indexView = this.render({, the alert is displayed, but i can't display html in this.indexView

I don't know why for the moment ... :(

simondavies
10 Nov 2011, 1:01 PM
Have not had chance to look at this but I suggest as its a new try and error that you post another thread, then others can see this and also helps :-), send a link when done so I can pick it up as well.

Thanks

myput
14 Nov 2011, 12:07 AM
:)yep oki thanks