oop - 分机 JS 4 : Getters and setters in view

Question

这个问题我想了很久，似乎想不出一个合理的解决办法。我想做的是在我看来为文本字段/它的值创建 getters/setters。我意识到首选的 Ext JS 方式是在 Controller 中使用引用并以这种方式获取它，但我觉得这不是很面向对象。我还必须包装这些 getter 和 setter，因为如果 getter 返回未定义，我想输出一条消息。我想做的是创建我自己的 getter/setter 或以某种方式覆盖默认的 getter/setter。以下是我想实现的一些方法。

我想我可以使用 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');
    }
});

MyController

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

这行得通，我意识到这是一件非常挑剔的事情，但在 Controller 中使用 getter 感觉不对。我觉得如果它在 Window 中，它会更面向对象。但是，如果我把它放在窗口中，我相信我唯一的选择是依靠 id 或在窗口的 initComponent 中手动创建文本字段——这将涉及保存那里的文本字段的引用，但这似乎有点低效...因为我也必须调用 doLayout。

重申一下，我希望在 Window 中有 getters/setters，我正在寻找一种引用它的快速方法，类似于 Controller 引用对象的方式。我相信主要的答案是使用 id 并在窗口中调用 Ext.ComponentQuery.query('#loginUserInput')，但我想知道是否有更好的方法在那里...比如覆盖自动生成的 getter/setter 或为输入值添加一个简单的 getter/setter。

来自 Sencha forums 的交叉帖子.

编辑

我想我有点不清楚我想要什么。作为更笼统的陈述，我不想在 Controller 中塞满与我的 View 相关的所有内容，而是想将它们全部存储在 View 本身中，其中包括 getter/setter 之类的东西。这些 getter/setter 之一恰好是 loginUserInput getter。

使用模型是一个有趣的想法，但我觉得这对于单例值来说会是一大堆开销。我基本上是在寻找类似 Java 的 setters/getters 的东西在 LoginWindow View 中...希望像(或接近)Java 一样简单。

在 View 中包含(封装)它的想法使 Controller 更简洁，如果我删除 View ，我也会删除它的函数，所以我不必去寻找函数 Controller ...我只需要担心删除引用(应该是最小的)。

Answer 1

我认为您正在寻找的“面向对象”方式是使用表单的 Ext.data.Model。如果您查看 Ext.form.Basic您有方法来操作模型(称为记录)，还可以获取具有 View 值的对象。所以你需要:

1. 创建表单时，使用 loadRecord() 将表单绑定(bind)到模型。
2. 在您需要的任何时候，使用 getValues() 检索表单字段的值。
3. 提交表单时，使用 getRecord() 和 getValues() 同步您的记录。

---

Ext.define('MyApp.model.Login',{
  fields : [{
    name: 'username',
    type: 'string'
  },{
    name: 'password',
    type: 'string'
  }]
});

Ext.define('MyApp.controller.Login',{
  ...
  refs : [{
    selector: 'window form',
    ref: 'formPanel'
  }],
  ...
  openForm : function() {
    //load your form and then bind the new record
    var formPanel = this.getFormPanel(), //Ext.form.Panel
        form = formPanel.getForm(); //Ext.form.Basic

    form.loadRecord(Ext.create('MyApp.model.Login'));

  },
  save : function() {
    //get the values in the view
    var form = this.getFormPanel().getForm(),
        vals = form.getValues(),
        record = form.getRecord();

    console.log(vals); //see the object representation of your view here
    record.set(vals); //update your model

    //do whatever you need with your model

  }
  ...
});

当您需要保存表单数据时，这是一个很好的例子。在登录中，我认为您可以直接使用 getValues() 而无需将其绑定(bind)到 Ext.data.Model。