Question

我开始开发一个应用程序，但我不满意代码的样子。以下是我的问题：

我目前在主页上有几个表单，并且有很多代码嵌入，带有处理程序。例如：

      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() {

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

提前感谢您的回复。

Answer 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

Answer 2

那么，应该使用关于“如何”和“何时”控制器（在Ext JS MVC控制器意义上）的问题只能通过“它取决于”来回答。

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

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

直接在视图中使用处理程序也能完美地运行。和你一样，我并不特别关心这种风格，但它有效......而且工作代码从根本上讲是最重要的。

最终，Ext JS为您提供了一系列灵活性来实现您想要的功能，因此它将简化为最适合您的编码风格，组织标准等的风格。

EXT JS中的代码结构

2 个答案: