Ext.js简单布局加静态树示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Ajax</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="portal.css" />
<script type="text/javascript" src="portal.js"></script>
<script type="text/javascript" src="myPortal/myPortal.js"></script>
<script type="text/javascript" src="myPortal/PortalDropZone.js"></script>
<script type="text/javascript" src="myPortal/PortalColumn.js"></script>
<script type="text/javascript" src="myPortal/PortalPanel.js"></script>
<script type="text/javascript" src="viewer/FeedPanel.js"></script>
<script type="text/javascript">
function exitLogin()
{
Ext.MessageBox.confirm("提示","是否要退出？",function(status){
if('yes'==status)
{
location.href="http://www.oschina.net";
//location.replace("http://www.baidu.com");
}
});
}
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
//renderTo:'toolbar',
autoWidth:true,
frame:true,
});
toolbar.add([{
xtype:'tbspacer',width:30
},{
text:'系统管理', iconCls:'1.gif',handler:function(){
toolbar.enable();
}
},'-',{
text:'系统帮助', icon:'1.gif',handler:function(){
toolbar.enable();
}
},{
text:'不知道了', iconCls:'1.gif',handler:function(){
toolbar.disable();
}
},{
xtype:'textfield',
label:'我的Label',
hideLabel:true,
width:150
},'->',
'<a href="#">管理员</a> 您好，欢迎登陆!!!',
,{
xtype:'tbspacer',width:10
},{
label:'系统退出',
icon:'close.gif',handler:exitLogin
},{
xtype:'tbspacer',width:50
}]);
var pnNorth=new Ext.Panel({
id:'pnNorth',
autoWidth:true,
heigth:100,
frame:true,
//split:true,//显示分隔条
region:'north',
bbar: toolbar,
html:'<h1 style="margin-left:1cm;font:normal 25px tahoma, arial, sans-serif, 宋体;">XXXXXXXXX平台</h1>'
});
var pnBottom = new Ext.Panel({
id:'pnBottom',
height:25,
autoWidth:true,
split:true,//显示分隔条
frame:true,
region:'south',
//html:'<div><div style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;">Power By: <span style="color:blue">XXXXXXXXXX平台</span> </div><div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;"> 版权所有：Rayn</div></div>'
//html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
html:'<div align="center">Power By: <span style="color:blue">XXXXXXXX平台</span> 版权所有：Rayn E-mail:<span style="color:red">[email protected]</span></div>'
});
var tree = Ext.create('Ext.tree.Panel', {
title: '人员用户管理',
icon:'1.gif',
dockedItems: [{
xtype: 'toolbar' ,
items: [
{ xtype: 'button', text: '修改' },
{ xtype: 'button', text: '更新' },
{ xtype: 'button', text: '确定' }
]
}],
fbar: [
{ type: 'button', text: '你要弄啥？' }
],
lbar: [{ xtype: 'button', text: '靠侧栏按钮' }],
root:{
text: '人员用户管理',
expanded: true,
icon:'1.gif',
scope:this,
children: [{
id:'r1',
text: '管理员',
icon:'1.gif',
url:'http://www.oschina.net',
leaf: true
}, {
text: '系统用户',
icon:'1.gif',
id:'r2',
url:'http://www.baidu.com',
leaf: true
}, {
text: '角色管理',
children: [{
id:'r3',
text: '研发部门',
leaf: true
},{
id:'r4',
text: '测试部门',
leaf: true
},{
id:'r5',
text: '销售部门',
leaf: true
},{
text: '运行保障部门',
leaf: true
}]
},{
text:'用户日志管理',
iconCls:'',
children:[{
text:'操作日志',
leaf:true
},{
text:'操作日志',
leaf:true
},{
text:'操作日志',
leaf:true
}]
}]
}
});
tree.addListener('itemclick',function (view, record, item, index, e){
//alert(record.raw.url + "------" + record.raw.id + "------" + record.raw.leaf);
var url = 'http://www.baidu.com';
if(record.raw.leaf){
e.stopEvent();
var n = pnCenter.getComponent(item.id + 1);
if(!n) {
n = pnCenter.add({
id:item.id + 1, //item.id + 1, //pnCenter.items.length + 1,
title: record.raw.text,
closable:true,
loadMask:true,
icon:record.raw.icon,
autoWidth:true,
autoHeight:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+ url + '" />'
}).show();
}
pnCenter.setActiveTab(n);
}
});
//设置树的点击事件
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = pnCenter.getComponent(node.id);
if (!n) {
var n = pnCenter.add({
'id' : node.id,
'title' : node.text,
closable:true,
html : '我是"'+node.text+'"'
});
}
pnCenter.setActiveTab(n);
}
}
var a = Ext.create('Ext.panel.Panel',{
id:'a',
title:'菜单管理',
icon:'1.gif',
width:'190',
split: true,
minWidth: 130,
align:'center',
collapsible: true,
floatable: false,
layout: 'accordion',
animCollapse: true,
items:[{
title: 'Sencha Blog',
image:'1.gif',
url: 'http://feeds.feedburner.com/extblog'
},{
title: 'Sencha Blog',
url: 'http://feeds.feedburner.com/extblog'
},{
title: 'Sencha Blog',
url: 'http://feeds.feedburner.com/extblog'
}],
listeners: {
scope: this,
'click':function(){
alert('liu');
}
}
});
var pnWest=new Ext.Panel({
id:'pnWest',
title:'菜单项',
width:200,
margins:'0 5 0 3',
heigth:'fit',
split:true,//显示分隔条
region:'west',
layout:'accordion',
collapsible:true,
items: [
tree
,a
,{
title:'系统设置',
border:false,
icon:'1.gif',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
}]
});
var pnSub1=new Ext.Panel({
height:300,
columnWidth:.3,
html:'这是子panle1'
});
var pnSub2=new Ext.Panel({
height:300,
columnWidth:.7,
html:'这是子panle2'
});
var pn=new Ext.Panel({
id:'pn',
title:'Tab标签测试拆分',
icon:'1.gif',
width:800,
layout:'column',
authHeight:true,
items:[
pnSub1,
pnSub2
]
});
var pnCenter=new Ext.TabPanel({
region:'center',
activeTab:0,
deferredRender:false,
resizeTabs:true, // turn on tab resizing
items:[{
title:'Tab标签测试1',
authHeight:true,
closable:false,//是否可关闭
html:'这里显示所收邮件。。。'
},{
title:'Tab标签测试2',
authHeight:true,
closable:true,//是否可关闭
loadMask:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
},
pn
]
});
var vp=new Ext.Viewport({
layout:"border",
renderTo:'app-msg',
layoutConfig:{
animate:true
},
items:[
pnNorth,
pnWest,
pnCenter,
pnBottom
]
});
});
</script>
</HEAD>
<BODY>
<span id="app-msg" style="display:none;"></span>
</BODY>
</HTML>
Ext.js布局加树以及TabPanel示例