ext 布局

引用

Ext.BLANK_IMAGE_URL='scripts/ext/resources/images/default/tree/s.gif';
Ext.form.Field.prototype.msgTarget = 'side';
var mainPanel =new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
enableTabScroll : true,
margins: '0 4 5 0',//设置边距
items: [{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({ //实例化布局对象
layout:'border', //声明为border布局   
items:[
new Ext.BoxComponent({ //头布局
region:"north",
height:50,
el:"northDiv" 
}),
new Ext.BoxComponent({ //底布局 
region:"south",  
height:20,  
el:"southDiv" 
}), mainPanel,
new Ext.tree.TreePanel({
region:'west',
animate:true,//以动画形式伸展,收缩子节点 
title:"Extjs静态树",  
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root: new Ext.tree.AsyncTreeNode({ 
id:"root", 
text:"根节点",//节点名称 
expanded:true,//展开 
leaf:false,//是否为叶子节点
children:[{
text:'子节点一',
id : 'text1',
leaf:true,
href:'index2.html'
},{
id:'child2',
text:'子节点二',
leaf:true,
href : 'iframe.html'
},{
text:'is leaf',
href:'index2.html',
leaf:true
}]}),
//rootVisible: false,
        listeners: {
           click : function(node, e){
e.stopEvent();
if(node.isLeaf()){
loadPanel(node);
}
}
       }
})]  
});  
});
/**
* 向TabPanel组件中添加窗口或激活已经存在的窗口
* 并将指定资源加载进窗口
* @param node : 传入的Node节点
*/
var loadPanel = function(node) {
var id=node.id;//获取节点的id
var href = node.attributes.href;//获取节点中的href属性
var text = node.text;
var qtip = node.attributes.qtip;
var tab = mainPanel.getComponent(id);//获取指定id的组件对象
if(tab) {
mainPanel.setActiveTab(tab);
return;
}
tab = mainPanel.add(new Ext.Panel ({
id : id, //设置ID
title : text, //设置选项卡标题
tabTip : qtip,
region: 'center',
deferredRender: false,
activeTab: 0,
enableTabScroll : true,
margins: '0 4 0 0',//设置边距
html : '<iframe width=100% height=100% src=' + href + ' />'//,
//autoScroll: true,
//closable : true
}));
mainPanel.remove(mainPanel.getActiveTab());
mainPanel.setActiveTab(tab);
}