我已经思考了一段时间这个问题，但是似乎无法想出一个合理的解决方案。我想要做的是在视图中为文本字段/其值创建getter/setter。我知道首选的Ext JS方法是在控制器内使用引用并以此获取它，但这对我来说不太符合面向对象的设计思想。我还需要封装这些getter和setter，因为如果getter返回undefined，我想输出一条消息。我想做的是创建自己的getter/setter或以某种方式覆盖默认的getter/setter。以下是我考虑实现这一点的几种方法。
我想我可以使用
这个方法可行，我意识到这是一个非常苛刻的事情，但在控制器中使用getter并不合适。如果将其放在Window中，会更符合面向对象的设计思想。然而，如果我将其放在Window中，我相信我的唯一选择就是依赖于ID或在Window的initComponent中手动创建textfield——这需要保存一个引用，在那里，但这似乎有点低效……因为我还需要调用doLayout。
再次强调，我希望在Window中具有getter/setter，并寻找一种快速引用它的方法，类似于控制器引用对象的方式。我相信主要答案将是使用ids并在Window中调用Ext.ComponentQuery.query('#loginUserInput')，但我想知道是否有其他更好的方法……比如重写自动生成的getter/setter或添加一个简单的getter/setter来获取输入的值。
从Sencha论坛跨发。 编辑 我想我之前表达不够清楚。更普遍地说，我想将所有与我的视图相关的内容存储在视图本身中，而不是将它们都放在控制器中，这包括像getter/setter这样的内容。其中一个getter/setter恰好是loginUserInput getter。
使用模型是一个有趣的想法，但我觉得这对于单例值来说会增加很多开销。我基本上正在寻找类似于Java中的setters/getters 在LoginWindow视图中...希望它也和Java一样简单。
将其包含（封装）在视图中使控制器变得更加简洁，如果我删除了视图，它的函数也会被删除，因此我不必去控制器中搜寻函数...我所要担心的只是移除引用（应该很少）。
我想我可以使用
config {}，但这似乎只适用于我想定义的变量。然后我想以某种方式使用id，但社区似乎对此持不同意见。这导致了我的当前解决方案... 封装。以下是我的代码：
LoginWindow
Ext.define('MyApp.view.LoginWindow', {
extend: 'Ext.window.Window',
alias: 'widget.loginWindow',
autoShow: true,
closable: false,
border: 0,
plain: true,
allowBlank: false,
title: "Enter your username",
modal: true,
config: {
buttons: [{
text: "Ok"
}],
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
id: 'loginUserInput',
name: 'loginUserInput',
msgTarget: 'under',
validator: function(value) {
if (Ext.isEmpty(value)) {
return "You need to enter a username.";
}
return true;
}
}]
},
constructor: function(config) {
this.callParent(config);
},
getButton: function() {
console.log('here');
}
});
我的控制器
Ext.define('MyApp.controller.Chat', {
extend: 'Ext.app.Controller',
requires: [
'Views.ChatModule.view.LoginWindow'
],
refs: [{
ref: 'loginWindow',
selector: 'loginWindow',
xtype: 'loginWindow',
autoCreate: true
}, {
ref: 'loginUserInput',
selector: '#loginUserInput'
}],
init: function() {
// The events controller oversees
this.control({
'loginWindow button[text="Ok"]': {
'click': this.onSubmitLoginWindow
}
});
},
getLoginUserInputValue: function() {
var loginUserInput = this.getLoginUserInput();
if (loginUserInput) {
var username = loginUserInput.getValue();
if (username) {
console.log(username);
} else {
console.warn("username is undefined");
}
}
console.warn("loginUserInput is undefined");
},
onSubmitLoginWindow: function(button, event, eOpts) {
this.getLoginUserInputValue();
}
});
这个方法可行，我意识到这是一个非常苛刻的事情，但在控制器中使用getter并不合适。如果将其放在Window中，会更符合面向对象的设计思想。然而，如果我将其放在Window中，我相信我的唯一选择就是依赖于ID或在Window的initComponent中手动创建textfield——这需要保存一个引用，在那里，但这似乎有点低效……因为我还需要调用doLayout。
再次强调，我希望在Window中具有getter/setter，并寻找一种快速引用它的方法，类似于控制器引用对象的方式。我相信主要答案将是使用ids并在Window中调用Ext.ComponentQuery.query('#loginUserInput')，但我想知道是否有其他更好的方法……比如重写自动生成的getter/setter或添加一个简单的getter/setter来获取输入的值。
从Sencha论坛跨发。 编辑 我想我之前表达不够清楚。更普遍地说，我想将所有与我的视图相关的内容存储在视图本身中，而不是将它们都放在控制器中，这包括像getter/setter这样的内容。其中一个getter/setter恰好是loginUserInput getter。
使用模型是一个有趣的想法，但我觉得这对于单例值来说会增加很多开销。我基本上正在寻找类似于Java中的setters/getters 在LoginWindow视图中...希望它也和Java一样简单。
将其包含（封装）在视图中使控制器变得更加简洁，如果我删除了视图，它的函数也会被删除，因此我不必去控制器中搜寻函数...我所要担心的只是移除引用（应该很少）。