无法在现代工具包中从 Ext.create({xtype:'app-main'}) 创建视图
unable to create view from Ext.create({xtype:'app-main'}) in modern toolkit
我正在使用 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
我不太清楚 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>"
);
}
});
我正在使用 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
.
我不太清楚 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>"
);
}
});