0

ExtJS 4.2.1 を使用して、デザインを制御できない Web サイトにカスタマイズを追加しています。これは、ExtJS コンポーネントを別のページにマッシュアップとして追加するようなものと考えることができます。

問題は、ExtJS の起動時にx-bodyなどの CSS クラスが DOM の <body> 要素に追加され、これがページの他のすべてに影響することです。ExtJS コンテナーで有効にしながら、これを停止できるようにする必要があります。

IFrame を使用して ExtJS のカスタマイズを格納し、それをページの DOM から分離できることはわかっていますが、IFrame のパフォーマンスに問題があり、Firefox と IE でのレンダリングの問題さえあるため、別の解決策が必要です。

4

2 に答える 2

1

ExtJS 4.0.2 では設定scopeResetCSS:trueすると魔法が起こりますが、ExtJS 4.2.1 ではオプションが見つかりません。

いくつかの醜いオプションがあると思います：

  1. ExtJS スタイルシートからスタイルを削除する (長くて退屈な作業)
  2. Ext.Element と removeClass 関数を使用して、各要素からクラスを手動で削除しますhttp://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls
于 2015-04-29T03:30:15.733 に答える
0

Aguardienticoの回答に促されてさらに調査したところ、ここで説明されているようにSassを使用してこれを行うことが可能であることがわかりましたが、ExtJS CSSを再構築したくなかったため、実行時に次のように実行するコードを追加しました:

var body = Ext.getBody();
// Remove the x-body cls from the body element
body.removeCls("x-body");
// Add x-body cls to any existing top-level ExtJs divs
body.select('>div').each(function(el) {
    if (el.hasCls("x-border-box")) {
        el.addCls("x-body");
    }
});
body.on("DOMNodeInserted", function(e, node) {
    // Add x-body cls to top-level ExtJs divs as they are created
    if (node.parentNode === body.dom) {
        if (Ext.fly(node).hasCls("x-border-box")) {
            Ext.fly(node).addCls("x-body");
        }
    }
});

body要素からx-bodyを削除し、ExtJS によって作成されたすべての div に body の直接の子として追加し直すという考え方です。ExtJS は必要に応じて新しい div を追加するため (ピック リストなど)、DOMNodeInsertedイベントを使用してそれらが作成されるのを監視する必要もあります。

このコードはアプリケーションのlaunchハンドラーで呼び出しますが、代わりにハンドラーの先頭に置くこともできExt.onReadyます。

編集: 私の ExtJS アプリケーションは、次のように body 要素にレンダリングされるコンテナー内にあります。

Ext.create("Ext.container.Container", {
    renderTo: Ext.getBody(),
    ...
});

ただし、別の DIV にレンダリングする場合は、次のようにx-bodyクラスをカスタム コンテナーに明示的に追加する必要もあります。

Ext.create("Ext.container.Container", {
    renderTo: "SomeOtherDiv",
    cls: "x-body",
    ...
});
于 2015-04-29T04:24:00.437 に答える