How to get element class attribute with ExtJS 4.1.1 in a cross browser way?

Question

I just noticed that Ext.get('myElement').getAttribute('class') doesn't work with IE8-. Does anyone has an elegant alternative (ExtJS 4.1.1 native or patch prefered)? Maybe this feature is hidden somewhere in the framework?

---

Edit

Here is the context. I have temporarily fixed the issue like this :

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

View (grid) :

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

Controller :

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) { 
    // ... 
}

Answer 1

Drop # from the node id and it'll probably work.

UPDATE: I'm still not sure what exactly you're trying to do. Ext.get returns Ext.dom.Element object, which wraps native element and provides a certain level of abstraction from DOM but still is pretty much low-level tool. Since older IE doesn't support 'class' attribute you'll have to call getAttribute('className') to get the result.

Or you can resort to using standard convenience methods like hasCls and getStyle for checking particular classes and styles on an element. To find elements with particular class there's query method. All in all I fail to see why exactly you would need to get the list of all classes defined on an element.

UPDATE 2: OK, now I get what you need. Your code is way too complex, it can be simplified like this:

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

View:

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

Controller:

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

Or it can be done in more officially supported way:

View:

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

Controller:

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

Obviously the view event handling code can be further abstracted, but the main idea here is that you shouldn't be afraid of hiding view complexities Controller has no need to know about.