Skip to content

September 26, 2011

ExtJS: note on using autoLoad

by Joe Kuan

Part of my web application is to construct a html document with embedded graph images. Once the document is created, a Panel component uses autoLoad property to load & display the content. However, the rendering inside the component is different to a browser displaying the html document. The ordered list tag < ol > is missing.

Here is what the problem looks like inside the panel:

After some investigation, I found that there is a config option in Panel, preventBodyReset. It stops the ExtJS CSS styles applying to the loaded html content.

Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel’s element, effectively applying css styles suggested by the W3C (see to the Panel’s body element (not the header, footer, etc.).

Specified the preventBodyReset as follows, problem solved.

new Ext.Viewport({
  layout: 'border',
    region: 'center',
    autoLoad: { url: url},
    padding: '8 10 5 10',
    border: true,
    bodyBorder: true,
    preventBodyReset: true, // important
    autoScroll: true

Here is the screenshot from the panel:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: