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 は 'class' 属性をサポートしていないgetAttribute('className')ため、結果を取得するには呼び出す必要があります。

hasClsまたは、 やのような標準の便利なメソッドを使用getStyleして、要素の特定のクラスやスタイルをチェックすることもできます。特定のクラスの要素を見つけるには、queryメソッドがあります。全体として、要素で定義されたすべてのクラスのリストを正確に取得する必要がある理由がわかりません。

更新 2 : OK、必要なものを入手しました。コードが複雑すぎるため、次のように簡略化できます。

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

明らかに、ビュー イベント処理コードはさらに抽象化できますが、ここでの主な考え方は、Controller が知る必要のないビューの複雑さを隠すことを恐れてはならないということです。

于 2013-03-13T17:22:58.547 に答える