Nested List toolbar adding a home button and edit back

[simondavies]

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]

Bump - Is there no whay to add another button to the Nestedlust toolbar on the right hand side???

[simondavies]

I seemed to have sorted this, the easy way: Doh!

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

Thanks

[myput]

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]

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]

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]

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]

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]

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]

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?