在 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文件)。
提前致谢, 阿斯卡