CQ ExtJS Styles Not Applying
I'm attempting to add ExtJS controls to some of our authoring pages, but running into trouble when it comes to the default CQ CSS styles for the ExtJS components. If i simply create a new ExtJS component and render it to the body, everything looks fine because it is added to a div with an id of "CQ". However if i render it to a specific div in my template, the styles won't be applied because they only apply to elements under the "CQ" div. For example -
With JS:
new CQ.form.RichText({ width: 400, bodyPadding: 10, renderTo: 'editor' });Which generates this HTML:
<body> <div id="editor"> <div id="ext-comp-1234" class="x-panel"> ... </div> </div> <div id="CQ"> <!-- Autogenerated components or "renderTo: CQ.Ext.getBody()" --> </div> </body>
The "ext-comp-1234" component won't have the "x-panel" class applied because it is defined -
#CQ .x-panel { ... }The only way i've found around this issue is to hardcode a "CQ" div around my entire template, but this doesn't seem like a good idea as i don't know the original purpose of that div. Is there a better way to accomplish this?
Thanks
