Nested List toolbar adding a home button and edit back

[simondavies]

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]

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]

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]

Yes i have the same ... Just in my Viewport i have 4 views in a bottom toolbar... I don't understand -_-

[simondavies]

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]

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]

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]

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]

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]

yep oki thanks