EXT JS中的代码结构

Code structure in EXT JS

本文关键字：代码 结构 JS EXT      更新时间：2023-09-26

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

  • 我目前有几个窗体在我的主页上，有很多代码嵌套在，与处理程序。例如:

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

    这段代码工作得很好，但我想知道是否有一种方法可以在其他地方编写它。在这种情况下，我是否应该将按钮声明为视图，或者是否有一种方法可以通过控制器来实现?

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

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

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

提前感谢您的回复。

您可以为按钮定义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

好吧，关于"如何"answers"何时"控制器(在Ext JS MVC控制器的意义上)应该使用的问题只能回答"这取决于"。

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

其他人在哲学上讨厌 Ext JS的"MVC"，并选择使用像Deft JS这样的东西来创建中间的"视图"控制器。

并且仍然在视图中直接使用处理程序也可以很好地工作。和你一样，我不是特别喜欢这种风格，但它很管用……有效的代码才是最重要的。

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

相关文章：