Using Sencha ExtJS to customise an existing website or do a mashup

问题

I'm using ExtJS 4.2.1 to add customizations to a web site over which I have no design control. You could consider this to be like adding ExtJS components to another page as a mashup.

The problem is that when ExtJS starts up it adds CSS classes, such as x-body, to the <body> element of the DOM and this affects everything else on the page. I need to be able to stop it doing this while still allowing it to take effect on the ExtJS containers.

I know that I can use an IFrame to contain my ExtJS customization and isolate it from the page's DOM, but I found problems with performance with IFrames, and even rendering problems in Firefox and IE so need a different solution.

回答1:

In ExtJS 4.0.2 if you set scopeResetCSS:true the magic happens, but in ExtJS 4.2.1 I can't found the option.

I guess you have a couple ugly options:

Remove the styles from ExtJS stylesheet (a long and boring work)
Use Ext.Element and removeClass function to manually remove the class from each element http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls

回答2:

Upon further research, prompted by Aguardientico's answer, I found that is is possible to do this using Sass as described here however I didn't want to rebuild the ExtJS CSS so I added some code to do it at runtime as follows:

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

The idea is to remove x-body from the body element and add it back to any divs created by ExtJS as immediate children of the body. Because ExtJS adds new divs as required, e.g. for pick lists, it is also necessary to watch for them being created using the DOMNodeInserted event.

I call this code in my application's launch handler, but it could alternatively be at the start of the Ext.onReady handler.

Edit: My ExtJS application is in a container that is rendered to the body element like this:

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

but if you render to another DIV you will also need to add the x-body class to your custom container explicitly like this:

Ext.create("Ext.container.Container", {
    renderTo: "SomeOtherDiv",
    cls: "x-body",
    ...
});

来源：https://stackoverflow.com/questions/29933610/using-sencha-extjs-to-customise-an-existing-website-or-do-a-mashup

标签

extjs

mashup