救命啊！！extjs中布局---如何将html属性中的图片位于items中元素的上方

Question

如题：extjs Panel中items中的的组件如何位于html中元素的下方
var north=new Ext.Panel({
        border:false,
        region:"north",
        autoHeight: true,
        //把上面定义的BoxComponent作为Panel的内容
        html: "<div align=center><img src='images/maintitle3.jpg' width='100%' height='45' alt='登陆界面背景图片' /></div>",
        items:[top]
    });请问一下，如何使得items中的top位于html中元素的下方，默认的top是在上方的。
我想实现的是一个viewport
其中viewport中
            var port = new Ext.Viewport({
                layout: 'border',
                hidden: false,
                hideMode: "offsets",
                bodyStyle: "z-index:1000", //, east
//                margins: '60 60 60 60',
//                renderTo:'dyc_form',
                items: [north,center, south ]
            });请问这样该如何实现啊！

Answer 1

如图：我说的是top中有一个menu，但是如果按照这中布局的话：
            var port = new Ext.Viewport({
                layout: 'border',menu默认的会在html中图片的的上方。请问怎么样把menu放在图片的下方呢？？

Answer 2

var htmlPanel = new Ext.Panel({
border : false,
region : "north",
autoHeight : true,
// 把上面定义的BoxComponent作为Panel的内容
html : "<div align=center><img src='images/maintitle3.jpg' width='100%' height='45' alt='登陆界面背景图片' /></div>"
}) var north = new Ext.Panel({
border : false,
region : "north",
autoHeight : true,
items : [htmlPanel, top]
});

Answer 3

晕 上边的那个没去掉region 
var htmlPanel = new Ext.Panel({
border : false,
autoHeight : true,
// 把上面定义的BoxComponent作为Panel的内容
html : "<div align=center><img src='images/maintitle3.jpg' width='100%' height='45' alt='登陆界面背景图片' /></div>"
}) var north = new Ext.Panel({
border : false,
region : "north",
autoHeight : true,
items : [htmlPanel, top]
});

Answer 4

可以了，非常感谢:fanchuanzhidu