Button click navigate to another view

Question

I have a button and when ever the user clicks it, i need to show a different view/page (navigate to a different view).

For example, Screen A, has a button, and when i click on that button, i need to navigate to Screen B.

my code is as follows;

onLoginSuccess : function(){
Ext.create('Ext.container.Viewport', {

                    items: [
                    {
                        xtype: 'screenb'
                    }
                    ]
                });
}

but, what hapence is that, When i click on the Button in Screen A, i navigate to Screen B and also Screen A appears on Screen B. I need to get rid of Screen A (after the user clicks the button and show only screen B)

===================== UPDATE 2 =======================================

Ext.define('Proj.view.loca.Person' ,{
    extend: 'Ext.form.Panel', 
    alias : 'widget.person',

    items: [

            {
        xtype: 'textfield',
        fieldLabel: 'Name',
        name: 'name'
    }, {
        xtype: 'textfield',
        fieldLabel: 'School',
        name: 'school'
      }],
    buttons: [{
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                    Ext.create('Ext.container.Viewport', {

                    items: [
                    {
                        xtype: 'screenb'
                    }
                    ]
                });

                    },
                    failure: function(form, action) {
                    // Navigate to some other view
                    }
                });
            }
        }
    }]
});

Izhaki · Accepted Answer · 2012-07-04T16:08:21.993

2

I think the best way to achieve this is using a card layout.

Here is roughly how it's done:

Ext.application({
    name: 'BS',

    appFolder: 'app',

    refs:
    [{
        ref: 'viewport',
        selector: 'viewport'
    }],

    launch: function() {

        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [{
                xtype: 'panel',
                id: 'panel1',
            },{
                xtype: 'panel',
                id: 'panel2',        
            }]
        });
    },


    onLoginSuccess : function() {
        this.getViewport().getLayout().setActiveItem(1);        
    }

});

edited Jul 04 '12 at 16:08

answered Jul 04 '12 at 12:38

Izhaki

23,372
9
69
107

Isn't there any other way i could do it, because i will have to change my entire code to make the above changes :S – Sharon Watinsan Jul 04 '12 at 12:41
There might be, but you'll have to provide more of your app/controller/view code for us to help. – Izhaki Jul 04 '12 at 13:15
1

Well, you'll have to change some code I believe - you are rendering a viewport from the button handler of a panel. I'm not sure how come the form panel is displayed (was there another viewport in the app launch?), but if it's rendered it is in the document body already when you add the viewport to it. Regardless, I would argue that it is a good and standard practice to create the viewport upon app launch. I doubt anyone has ever created the viewport like you did. – Izhaki Jul 04 '12 at 13:37
I have a viewport in the app launch. I am new to Extjs, can you tell what should i do to navigate from one view to another ? – Sharon Watinsan Jul 04 '12 at 13:59
That's why you have the problem - you create 2 viewports. I honestly think my original answer is the right way to go about it - create two panels within your viewport, and just do `getLayout.setActiveItem(1)` when you want to navigate to the other panel. – Izhaki Jul 04 '12 at 14:37
but i don't understand what `onLoginSuccess : function() {` is. who calls this method ? – Sharon Watinsan Jul 04 '12 at 14:43
The handler of your submit button, like in the code you have provided. You should have `this.application` in scope, so just call `this.application.onLoginSuccess()` – Izhaki Jul 04 '12 at 14:46
My handler button is in another View, called `Person`. And what you have given here is the app.JS file. So can i access the handler button from App.JS ? – Sharon Watinsan Jul 04 '12 at 14:48
Your controller has `this.application` referring to your application object. – Izhaki Jul 04 '12 at 14:50
Is there an example/sample code, that shows this. I am a bit confused :S – Sharon Watinsan Jul 04 '12 at 14:53
I added the code `onLoginSuccess()` as shown in your example to my App.JS , both `panel1` and `panel2` gets displayed when the app is launched. – Sharon Watinsan Jul 04 '12 at 14:58
And the layout set to `card`? – Izhaki Jul 04 '12 at 15:17
I have to add it. After adding, the `onLoginSuccess()` which is in the app.js is not called. Therefore the 2nd panel is not displayed. It is going to the `success: function(form, action) { ...` block but not to the `onLoginSuccess()` on the app.js – Sharon Watinsan Jul 04 '12 at 15:36
The `onLoginSuccess()` should be called from your button handler. Does it? – Izhaki Jul 04 '12 at 15:38
Call this.application.onLoginSuccess() from the `success` function of your `form.submit`; Just make sure the scope is that of the controller. – Izhaki Jul 04 '12 at 15:57
It says `this.getViewport is not a function`. – Sharon Watinsan Jul 04 '12 at 16:02
And you have the `refs` defined in your app? What does `console.log(this)` shows if you put it as the first line of onLoginSuccess()? – Izhaki Jul 04 '12 at 16:07
yes i have added them in the `app.js` file. When i `console.log(this)` i get `Object { name="Proj", appFolder="app", controllers={...}, more...}` . There's whole lot of info in it. – Sharon Watinsan Jul 04 '12 at 16:13
1

That's odd. you console log shows the application object, so your scope is fine. Could be a typo. Anyway, try putting `this.vp = Ext.create('Ext.container.Viewport', {.....` ,and then replcae `this.getViewport()` with `this.vp`. – Izhaki Jul 04 '12 at 16:30

Button click navigate to another view

1 Answers1