![Ext JS後臺框架示例]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css"/>
<link rel="stylesheet" type="text/css" href="extjs/packages/icon.css"/>
<script src="extjs/ext-all-debug.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Ext.onReady(function(){
/**
* 主體面板
* */
var centerPanel = Ext.create('Ext.tab.Panel', {
region:'center',
items:{
title:'首頁',
html:'不可關閉的默認首頁頁面'
}
});
/**
* 樹形菜單
* */
var menuTree = Ext.create('Ext.tree.Panel', {
region:'west',
title:'菜單導航',
layout:'fit',
width:180,
root: {
expanded: true,
collapsed:true,
text:'菜單',
children: [{
text:'會員中心',
url:'http://www.163.com',
leaf:true,
iconCls:'icon-User'
}, {
text:'文章列表',
leaf:true,
url:'http://www.59code.com',
iconCls:'icon-Book'
}, {
text:'圖片倉庫',
leaf:true,
url:'http://www.sina.com.cn',
iconCls:'icon-Image'
}, {
text:'個人資料',
leaf:true,
url:'http://www.csdn.net',
iconCls:'icon-Vcard'
}, {
text:'系統設置',
leaf:true,
url:'http://www.baidu.com',
iconCls:'icon-Cog'
}]
}
});
/**
* 綁定樹形菜單點擊事件，點擊樹形菜單，在主區域打開對應面板。
* 如果是已經打開的面板，使該面板取得焦點
* */
menuTree.on('itemclick', function( item, record, item, index, e, eOpts ){
if(!record.data.leaf){
return;
}
var title = record.data.text;
var iconCls = record.data.iconCls;
var href = record.data.url;
// 檢測是否已經打開，如已打開，則直接展示該面板
var opened = centerPanel.items.items;
for(var i = 0; i < opened.length; i++){
if(opened[i].title == title){
opened[i].show();
return;
}
}
// 該面板尚不存在，創建該面板並展示
centerPanel.add({
title: record.data.text,
closable:true,
iconCls:record.data.iconCls,
html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='" + href + "'></iframe>"
}).show();
});
// 創建應用
Ext.create('Ext.panel.Panel', {
plugins: 'viewport', // 自適應瀏覽器窗口
layout:'fit',
border:false,
items: {
xtype:'panel',
layout:'border',
items:[{
region:'north',
height:80,
border:false,
bodyStyle:{
backgroundColor:'#095f93',
lineHeight:'80px',
fontWeight:'bold',
fontSize:'30px',
color:'#fff',
paddingLeft:'20px'
},
html:'Ext JS 5.0後臺框架示例'
}, menuTree, centerPanel]
}
});
});
</script>
</head>
<body>
</body>
</html>
