繼續上一節...
1.Extjs5.0版Menu.
-將Extjs包引入MenuPage.html頁。
2.前段用Extjs的MVC框架
-在根目錄下創建app文件夾,文件夾下分別創建controller,model,store,view文件夾
-根目錄下創建app.js文件
-view文件夾下創建MainLayout.js文件
-controller文件夾下創建MainController.js文件
3.菜單頁面布局
-MainLayout.js代碼
Ext.define('ZZH.view.MainLayout', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainLayout',
layout: 'border',
initComponent: function () {
// 底部
var topPanel = Ext.create('Ext.panel.Panel', {
region: 'north',
split: false,
margins: '0 0 0 0'
});
// 左邊
var leftPanel = Ext.create('Ext.tab.Panel', {
layout: 'fit',
tabPosition: 'left',
region: 'west',
id: 'tabbar',
alias: 'tabbar',
width: 400,
items: [
{ title: '菜單1' },
{ title: '菜單2' },
{ title: '菜單3' },
{ title: '菜單4' },
{ title: '菜單5' },
{ title: '菜單6' },
{ title: '菜單7' }
]
});
//中心
var centerPanel = Ext.create('Ext.panel.Panel', {});
// 右側
var resultPanel;
this.items = [leftPanel, centerPanel, resultPanel];
this.callParent(arguments);
}
});
-MainController.js代碼
Ext.define('ZZH.controller.MainController', {
extend: 'Ext.app.Controller',
init: function (app) {
this.control({
});
},
views: ['MainLayout']
});
4.將MainLayout渲染到MenuPage.html里，並且加載地圖
-app.js代碼
-把app.js引用到MenuPage.html里
Ext.application({
name: 'ZZH',
appFolder: '../app',
controllers: [
'MainController'
],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
autoload: true,
items: [
{
xtype: 'mainLayout'
}
],
listeners: {
afterrender: {
fn: function (vp, eOpts) {
setTimeout('CreateSGWord()', 1);
}
}
}
});
}
});
-這里要注意的是CreateSGWord()函數，之前我們是在SkyMap.js文件中寫到取Object控件是
document.getElementById("TerraExplorerX").setAttribute("classid", "CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1");
但我們后來加了Iframe,結構變了，代碼也需要稍微改一下
SkyMap.js代碼
//頁面初始化函數
function CreateSGWord() {
window.parent.document.getElementById("TerraExplorerX").setAttribute("classid", "CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1");
window.parent.document.getElementById("TerraExplorerX").style.display = "block";
sgworld = document.createElement("object");
sgworld.id = "sg";
sgworld.classid = "CLSID:3a4f9197-65a8-11d5-85c1-0001023952c1";
sgworld.Open("http://xx.xx.xx.xx/xxx.FLY");
}
5.運行
6.這時我們注意到，當點擊菜單頁后，再點擊地圖時，地圖還是會給菜單覆蓋掉(真是令人頭疼哈)
-沒有關系，我們將MenuPage.html里的代碼改成如下。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../Scripts/ext-5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<script src="../Scripts/ext-5.0.0/ext-all.js"></script>
<script src="../app.js"></script>
<script src="../Scripts/SkyMap.js"></script>
<script type="text/javascript">
function Load() {
document.getElementById('btnhidden').focus(); //加載時，設置焦點
}
function MyFocus() {
if (document.all) {
window.document.onclick = new Function("return onClick(event);"); //當點擊MenuPage.html時，再次聚焦
} else {
window.document.body.setAttribute("onclick", "return onClick(event);");
}
}
function onClick(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target && target.id && target.id == "PanelBox") {
}
else {
if (target.tagName == 'INPUT') {
if (target.role == 'checkbox') {
document.getElementById('btnhidden').focus(); //當點擊checkbox的時候，再次聚焦
}
}
else { document.getElementById('btnhidden').focus(); }
}
}
</script>
</head>
<body onload="Load()" onclick="MyFocus()">
<input type="button" style="width:40px;z-index:-2;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);" id="btnhidden" />
</body>
</html>
7.再次運行，菜單就永遠不會消失啦。。^^
8.結束語
讓HTML控件在OBJECT控件之上，着實是讓我頭疼了一陣子，但還是解決了，相信有更好的辦法，
有更好的辦法，希望能告訴我，互相學習。。^^