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