无法在现代工具包中从 Ext.create({xtype:'app-main'}) 创建视图

Question

我正在使用 sencha cmd 6.2 来创建移动友好的应用程序，当我加载登录表单并单击提交时，它不会创建视图。这是我的登录控制器代码

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

以及我的按钮处理程序登录视图

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

Main.js 是从 sencha generate app -ext.

创建的默认 js

Answer 1

我不太清楚 ext js 的现代工具包是如何工作的，但似乎如果你想移动到另一个视图，你必须删除以前的视图（最近）

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

然后像这样在 viewport 中添加一个新视图

Ext.Viewport.add(page);

这里是解决问题的 onLoginClick 的完整代码

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>"
                    );
        }
    });

无法在现代工具包中从 Ext.create({xtype:'app-main'}) 创建视图

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

extjs

extjs6-modern