unable to create view from Ext.create({xtype:'app-main'}) in modern toolkit

Question

I am using sencha cmd 6.2 for creating mobile friendly app, when i load login form and click submit it doesnot create view. here is my code for login controller

onLoginClick: function (button, event, options) {
            var x = Ext.create("park.view.main.Main");
            console.log(x);
            x.show();
}

and my login view for button handler

{
                xtype: 'button',
                text: 'Login',
                iconAlign: 'right',
                iconCls: 'x-fa fa-angle-right',
                ui: 'confirm',
                handler: 'onLoginClick'
}

Main.js is the default js which is create from sencha generate app -ext.

Answer 1

I dont know clearly how modern toolkit for ext js work but it seem like if you want to move to another view, you have to remove previous view (recent)

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);

then add a new view in viewport like this

Ext.Viewport.add(page);

here is full code of onLoginClick to work around

onLoginClick: function (button, event, options) {
    // This would be the ideal location to verify the user's credentials via
    // a server-side lookup. We'll just move forward for the sake of this example.


    clientId = Ext.getCmp('companyCode').getValue();
    username = Ext.getCmp('username').getValue();
    var password = Ext.getCmp("password").getValue();
    var user = new loginDTO(username, password, clientId);
    Ext.Ajax.request({
        url: sessionStorage.getItem("base_url") + 'login',
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'CLIENT-ID': clientId},
        params: Ext.JSON.encode(user),
        success: function (conn, response, options, eOpts) {
            var result = Ext.JSON.decode(conn.responseText);
            console.log(result.code);
            console.log(result.message);
            if (result.code == "200") {
                tokenDATA = Ext.JSON.decode(result.data);
                sessionStorage.setItem("clientId", clientId);
                sessionStorage.setItem("token", tokenDATA);
                clientId = Ext.getCmp('companyCode').getValue();
                var x = Ext.create("park.view.main.Main");
                console.log(x);
                Ext.getCmp("loginform").destroy();
                var page = Ext.getCmp("mainView");
                Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);

                Ext.Viewport.add(page);

            } else if (result.code == "401") {
                Ext.Msg.alert("<p class='errorMessageHeader'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i>  Login Unsuccessful</p>", "<p class='errorMessage'>" + result.message + "</p>"
                        );

            }

        },
        failure: function (conn, response, options, eOpts) {
            Ext.Msg.alert("<p class='errorMessageHeader'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i>  Login Unsuccessful</p>", "<p class='errorMessage'>Please try again with valid credential</p>"
                    );
        }
    });