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

时间:2017-02-04 20:52:55

标签: extjs extjs6-modern

我正在使用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。

1 个答案:

答案 0 :(得分:0)

我不清楚如何为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>"
                    );
        }
    });