2

在 ExtJS 4 中，新特性是模型-视图-控制器架构。然而，ExtJs4 示例是为一些简化的案例制作的，因此违反了这种意识形态。

我创建了 MVC javascript 文件（控制器、视图、模型、存储）的标准层次结构。在视图文件中，我在某些时候有一个按钮。

如果您在线查看示例，通常是这样的代码：

 items: [
                    {
                        xtype: 'button',
                        styleHtmlContent: true,
                        text: 'Upload image',
                        flex: 1,
                        formBind: false,
            handler: function() {...}
            ...
                      }]

因此，即使是 ExtJS4 示例也“建议”将可执行部分放入表单定义中。虽然 MVC 确实要求所有操作都驻留在控制器 javascript 文件中。

另一个问题是表格中的操作列。下面是标准表配置中列的定义：

    xtype: 'actioncolumn',
     width: 50,
     fixed: true,
     altText: 'Actions',
      items: [
                  {
         icon: '/delete.png',
         tooltip: 'Delete',
         handler:function (grid, rowIndex,colIndex){
                ...}

问题是，这里的处理程序接受一些特定于网格的参数！

提醒一下，在 extjs 4 中，控制器文件的规范示例类似于

 Ext.define('MyApp.controller.mainController', {
 extend: 'Ext.app.Controller',

 onButtonClick: function(button, e, options) {
  //  alert("Button has been clicked "+button);
     // TODO which button?

},

init: function() {
    this.control({
        "button": {
            click: this.onButtonClick
        }
    });

}
});

我的问题是如何重新排列代码以便： 1. 删除处理程序：屏幕上任何按钮的指令 2. 将操作附加到控制器文件中的按钮，当然包括单独按钮的单独操作。3.对actioncolumn表列做同样的操作，成功识别出哪个行哪个列的哪个动作触发了（即完全把函数调用从“handler”转移到controller文件）。

提前致谢， 阿斯卡

4

1 回答 1

2

ExtJs 示例并非都是最新的 MVC 架构。更重要的是，MVC 不是强制设计——一些用户可能不喜欢使用它，所以展示没有 MVC 的示例仍然很重要。

您提出的几乎所有问题都在本文档教程中得到了解答。

With regards to 3: I think it is some misleading from your part. Although you do define `this.onButtonClick' in your controller, the called function will still get all the parameters, just like your button handler method would - the caller component is usually the first parameter delivered with each event. You can, of course, just define more specific selectors using actions or ids in your controller. Again see the link above for an example.

于 2012-07-09T14:36:32.760 回答