2

我只是注意到这Ext.get('myElement').getAttribute('class')不适用于 IE8-。有没有人有一个优雅的选择（ExtJS 4.1.1 本机或补丁首选）？也许这个功能隐藏在框架的某个地方？

编辑

这是上下文。我暂时解决了这样的问题：

action.getAttribute('class') || action.dom.className

查看（网格）： 

{
    xtype: 'actioncolumn',
    items: [{
        icon: '/images/edit.png',
        iconCls: 'action-edit'
    }, {
        icon: '/images/delete.png',
        iconCls: 'action-delete'
    }]
}

控制器 ：

init: function () {
    this.control({
        'grid actioncolumn': {
            click: function (a, b, c, d, ev, record) {
                var action = Ext.get(ev.target);
                if (action.is('img')) {
                    action = action.getAttribute('class') || action.dom.className;
                    action = action.match(/action-(.+)/)[1];
                    this[action + 'Action'](record);
                }
            }
        }
    });
},

editAction: function (record) { 
    // ... 
},

deleteAction: function (record) { 
    // ... 
}
4

1 回答 1

3

从节点 ID 中删除 # ，它可能会起作用。

更新：我仍然不确定你到底想做什么。Ext.get返回Ext.dom.Element对象，它包装原生元素并提供一定程度的 DOM 抽象，但仍然是非常低级的工具。由于较旧的 IE 不支持“类”属性，您必须调用getAttribute('className')才能获得结果。

或者，您可以诉诸于使用标准的便捷方法hasCls，例如getStyle检查元素上的特定类和样式。要查找具有特定类的元素，有query方法。总而言之，我不明白为什么您需要获取在元素上定义的所有类的列表。

更新2：好的，现在我得到了你需要的东西。您的代码太复杂了，可以这样简化：

CSS：

.action-edit, .action-delete {
    width: 16px; /* Or whatever fits your bill */
    height: 16px;
}

.action-edit {
    background-image: url('/images/edit.png');
}

.action-delete {
    background-image: url('/images/delete.png');
}

看法：

{
    xtype: 'actioncolumn',
    items: [{
        iconCls: 'action-edit',
        action: 'edit'
    }, {
        iconCls: 'action-delete',
        action: 'delete'
    }]
}

控制器：

init: function() {
    this.control({
        'grid actioncolumn': {
            click: function(a, b, c, d, ev, record) {
                var target = Ext.get(ev.target);
                if (target && target.action) {
                    this[target.action + 'Action'].call(this, record);
                }
            }
        }
    });
}

或者可以以更官方支持的方式完成：

看法：

{
    xtype: 'actioncolumn',
    items: [{
        iconCls: 'action-edit',
        handler: function(grid, rowIndex) {
            this.fireEvent('editAction', grid.getStore().getAt(rowIndex));
        }
    }, {
        iconCls: 'action-delete',
        handler: function(grid, rowIndex) {
            this.fireEvent('deleteAction', grid.getStore().getAt(rowIndex));
        }
    }];
}

控制器：

init: function() {
    this.control({
        'grid actioncolumn': {
            editAction: this.editAction,
            deleteAction: this.deleteAction
        }
    });
}

显然视图事件处理代码可以进一步抽象，但这里的主要思想是你不应该害怕隐藏控制器不需要知道的视图复杂性。

于 2013-03-13T17:22:58.547 回答