Javascript ExtJS MVC表单引用
我是Sencha ExtJS的新手。我刚刚开始创建一个MVC应用程序。目前,我正在尝试为该应用程序创建一个登录屏幕,但我无法从登录控制器获取对我的登录表单的引用。这是我的密码: app.jsJavascript ExtJS MVC表单引用,javascript,model-view-controller,extjs,extjs4.2,Javascript,Model View Controller,Extjs,Extjs4.2,我是Sencha ExtJS的新手。我刚刚开始创建一个MVC应用程序。目前,我正在尝试为该应用程序创建一个登录屏幕,但我无法从登录控制器获取对我的登录表单的引用。这是我的密码: app.js Ext.application({ name: 'Fleximanager', requires: [ ], controllers: [ 'Login' ], autoCreateViewport: true, init: f
Ext.application({
name: 'Fleximanager',
requires: [
],
controllers: [
'Login'
],
autoCreateViewport: true,
init: function() {
}
});
Viewport.js
Ext.define('Fleximanager.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Fleximanager.view.login.Flexilogin'
],
layout: 'fit',
items: [{
xtype:'flexilogin'
}]
});
Flexilogin.js
Ext.define('Fleximanager.view.login.Flexilogin', {
extend: 'Ext.panel.Panel',
xtype: 'flexilogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
id: 'flexilogin',
style: {background: '#8fc33a'},
items: [{
xtype:'panel',
title: 'Login',
frame: true,
width: 350,
height: 200,
layout: 'fit',
items: {
layout: 'anchor',
id: 'flexiloginform',
bodyPadding: 15,
defaultType: 'textfield',
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Register',
id: 'registerbtn',
action: 'register'
},{
text: 'Login',
id: 'loginbtn',
formBind: true,
}]
}
}]
});
以及控制器的Login.js
Ext.define('Fleximanager.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'Fleximanager.view.login.Flexilogin',
],
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
init: function(){
this.control({
'loginbtn': {
'click': function(){
console.log('click');
}
}
})
}
});
代码应该在您单击登录按钮后将“click”记录到控制台,但它什么也不做。有人能帮我吗
谢谢你的回答。只需像这样给你的按钮命名
{
text: 'Login',
id: 'loginbtn',
formBind: true,
name: 'login'
}
现在在控制器中,输入以下代码:
this.control({
'button[name="login"]': {
click: function(){
console.log('click');
}
}
})
这将满足您的需要。只需像这样给您的按钮命名
{
text: 'Login',
id: 'loginbtn',
formBind: true,
name: 'login'
}
现在在控制器中,输入以下代码:
this.control({
'button[name="login"]': {
click: function(){
console.log('click');
}
}
})
这将符合您的目的。问题在于如何引用按钮
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
正在创建要在控制器中使用的引用getter方法this.getLoginbtn
,但它不能在this.control中使用
this.control
中的字符串键是中定义的标识符。它搜索xtype/alias和itemId
this.control({
'flexilogin #loginbtn': {
^ xtype ^ itemId
请注意,您应该使用itemId
而不是id
,因为id
在页面上任何时候都必须是唯一的,itemId
在组件中应该是唯一的;像这样改变:
{
text: 'Login',
itemId: 'loginbtn',
^ replace id by itemId
formBind: true,
name: 'login'
}
问题在于如何引用按钮
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
正在创建要在控制器中使用的引用getter方法this.getLoginbtn
,但它不能在this.control中使用
this.control
中的字符串键是中定义的标识符。它搜索xtype/alias和itemId
this.control({
'flexilogin #loginbtn': {
^ xtype ^ itemId
请注意,您应该使用itemId
而不是id
,因为id
在页面上任何时候都必须是唯一的,itemId
在组件中应该是唯一的;像这样改变:
{
text: 'Login',
itemId: 'loginbtn',
^ replace id by itemId
formBind: true,
name: 'login'
}