以下是js文件代码,文件名为borderLayout.js:
Ext.onReady(function(){
     
    var border=Ext.create("Ext.Viewport",{
layout:{type:'border'},
renderTo:Ext.getBody(),
items:[
{
region:'north',
collapsible: true,
title:'North',
split:true,
height:80,
html:'<h1>这是north</h1>'
},
{
region:'center',
collapsible: true,
title:'center',
height:100,
html:'<h1>这是center</h1>'
},
{
region:'west',
id:'west',
collapsible:true,
title:'west',
split:true,
width:200,
height:50,
},
{
region:'south',
collapsible:true,
title:'south',
split:true,
width:100,
html:'<h1>这是border的南边</h1>'
},
{
region:'east',
collapsible:true,
title:'est',
split:true,
width:200,
html:'<h1>这是border的东边</h1>'
}
]

});
    var tree=Ext.create("Ext.tree.Panel",{
     renderTo:'west',
     root:{test:"图片",
           children:[{text:"风景"},{test:"人物"}]
   }
    });
   border.show();
});以下是html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>hello world 示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="./borderLayout.js"></script>
</head>
<body>
</body>
</html>
样子可以显示,但是树却显示在west的下部,如何让它在west的顶部了?EXjts4.0

解决方案 »

  1.   

     Ext.onReady(function(){
              var tree=Ext.create("Ext.tree.Panel",{
         region:"west",//左边功能菜单
        border:0,
       title:"功能菜单",
    rootVisible: false,
            useArrows: true,
            frame: true,
        collapsible: true,
            width: 225,
            floatable: false,
            split: true,
            margins:'0 0 0 0 0',
            minWidth: 175
    ,
         root:{test:"图片",
               children:[{text:"风景"},{test:"人物"}]
       }
        });
          
        var border=Ext.create("Ext.Viewport",{
    layout:{type:'border'},
    renderTo:Ext.getBody(),
    items:[
    {
    region:'north',
    collapsible: true,
    title:'North',
    split:true,
    height:80,
    html:'<h1>这是north</h1>'
    },
    {
    region:'center',
    collapsible: true,
    title:'center',
    height:100,
    html:'<h1>这是center</h1>'
    },
    tree,
    {
    region:'south',
    collapsible:true,
    title:'south',
    split:true,
    width:100,
    html:'<h1>这是border的南边</h1>'
    },
    {
    region:'east',
    collapsible:true,
    title:'est',
    split:true,
    width:200,
    html:'<h1>这是border的东边</h1>'

    ] });
       border.show();
    });
    直接把Tree放到Viewport的Item里面就好了