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 http://www.w3.org/TR/CSS21/sample.html) to the Panel’s body element (not the header, footer, etc.).

Specified the preventBodyReset as follows, problem solved.

new Ext.Viewport({
  layout: 'border',
  items:[{
    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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

You are commenting using your Google+ 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: