EXT JS 中的代码结构答案

【问题标题】：Code structure in EXT JSEXT JS 中的代码结构
【发布时间】：2024-04-28 13:30:02
【问题描述】：

我开始开发一个应用程序，但我对代码的外观并不满意。这是我的问题：

我的主页上目前有一些表单，其中嵌套了很多代码，带有处理程序。例如：

      buttons: [{
            text: 'Submit',
            margin: '0 100 0 0',
            formBind: true,
            handler: function(){
                this.up('form').getForm().updateRecord();
                var record = this.up('form').getForm().getRecord();
                Ext.Ajax.request({
                    url: 'http://localholst/ext/test/login.php',
                    method: 'POST',
                    params: {
                        'username':record.Username,
                        'password':record.Password
                    },
                    success: function(response,options){
                        var info = Ext.JSON.decode(response.responseText);
                        alert(info.status);
                    }
                });
            }
        }]

这段代码运行良好，但我想知道是否有办法在其他地方编写它。在这种情况下，我应该将按钮声明为 View，还是有办法使用 Controller 来实现？

我的另一个问题很相似，但是关于这段代码：

 Ext.application({
  name: 'HelloExt',
  launch: function() {

所以基本上我对如何构建我的代码以及应该如何以及何时使用控制器有点迷茫。我希望这一切都有意义。

提前感谢您的回复。

【问题讨论】：

ajax 请求看起来应该属于数据存储。
@WiktorZychla 我不这么认为，我实际上创建了一个模型。我不需要存储多个条目，因此只需一个模型实例就足够了。但这实际上不是问题。

标签： javascript extjs model-view-controller

【解决方案1】：

您可以为您的按钮定义action 并使用control 方法处理控制器中的事件，该方法允许您将处理程序映射到通过组件查询选择的组件：

// view
Ext.define('Example.user.Edit', {
   extend: 'Ext.window.Window',
   alias: 'widget.useredit',
   buttons: [{
        text: 'Submit',
        margin: '0 100 0 0',
        formBind: true,
        action: 'add'
   }];

// controller:
Ext.define('Example.controller.User', {
   extend: 'Ext.app.Controller',
   init: function () {
      this.control({
       'useredit button[action=add]': {
            click : this.addUser
        }
     });
   } ...

来源：

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller-method-control

【讨论】：

感谢您的回复。这很有帮助。我对此部分有疑问：'useredit button[action=add]': {
@Andre：问题是什么？
我不了解选择器的工作方式，但我只是在文档中找到了答案。

【解决方案2】：

嗯，关于“如何”和“何时”使用控制器（在 Ext JS MVC 控制器的意义上）的问题只能由“取决于”来回答。

Wiktor 指出了一种将视图集成到控制器中的非常常见的方法。我个人建议使用“listen”而不是“控制”。在组件事件方面，它们完成相同的事情，但是如果您想集成其他事件域（甚至创建自己的事件域），listen 将为您提供更多的可扩展性。

其他人在哲学上讨厌 Ext JS 的“MVC”并选择使用类似Deft JS 的东西来创建中间“视图”控制器。

仍然让处理程序直接在视图中也可以正常工作。和你一样，我并不特别在意这种风格，但它确实有效……而且工作代码从根本上来说是最重要的。

最终，Ext JS 为您提供了很多灵活性来做您想做的事情，因此它会简单地归结为最适合您的编码风格、您的组织标准等的风格。

【讨论】：