EXT JS Layout XHTML

I am trying to integrate ExtJS 2.0 with Java rich faces. I am trying to obtain a basic layout using Ext.Panel. So I have written a code like:

Ext.onReady(function() 
{

Ext.QuickTips.init();

var myBorderPanel = new Ext.Panel(
{
renderTo: document.body,
width: 700,
heig开发者_StackOverflowht: 500,
title: 'Border Layout',
layout: 'border',
items: 
[
{
    autoLoad:{url: 'panel.html', scripts:true},
    renderTo: document.body.footer, // a div by name footer
    title: 'South Region is resizable',
    region: 'south',     // position for region
    height: 100,
    split: true,         // enable resizing
    minSize: 75,         // defaults to 50
    maxSize: 150,
    margins: '0 5 5 5'
}]
});

 });'

The above code works fine. But in the above code if i use panel.xhtml instead of panel.html, it does not work.

If this is a repost I am sorry.

I got it working but without using autoLoad. I used contentEl and that works as a perfect alternative.