[地图SkyLine二次开发]框架(4)
继续上一节...
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控件之上，着实是让我头疼了一阵子，但还是解决了，相信有更好的办法，
有更好的办法，希望能告诉我，互相学习。。^^
[地图SkyLine二次开发]框架(4)的更多相关文章
- [地图SkyLine二次开发]框架(1)
项目介绍: 项目是三维地理信息系统的开发,框架MVC4.0 + EF5.0 + Extjs4.2 + SkyLine + Arcgis,是对SkyLine的二次开发. 项目快结束了,先给大家看一眼效果 ...
- [地图SkyLine二次开发]框架(5)完结篇
上节讲到,将菜单悬浮到地图上面,而且任何操作都不会让地图把菜单盖住. 这节带大家,具体开发一个简单的功能,来了进一步了解,这个框架. 1.想菜单中添加按钮 -上节定义的mainLayout.js文件里 ...
- [地图SkyLine二次开发]框架(2)
上节讲到,地图加载. 但我们可以发现,当没有页面布局的情况下,<OBJECT>控件,没有占满整个屏幕,这里我们就要用到Extjs的功能了. 这节要讲的是用Extjs为<OBJECT& ...
- [地图SkyLine二次开发]框架(3)
上节将显示我们地图的OBJECT控件,布了一下局,但地图没有进行加载. 这是因为我们要在另一个页面,对OBJECT控件进行地图加载,并且得到该控件的sgworld,以便对其进行我们想要的开发. 这里, ...
- [地图SkyLine二次开发]关于IE内存限制问题(1G)
相信很多人也遇到过同样的问题,地图加载中,IE占用的内存一直增加,到了1G多一些的时候,IE就崩溃了. 在网上查阅了一番,有很多结果,下面归纳一下: a).64bit的IE最多可达到4G的内存,但Sk ...
- Skyline 7 版本TerraExplorer Pro二次开发快速入门
年底了,给大家整理了一下Skyline 7版本的二次开发学习初级入门教程,献给那些喜欢学习的年轻朋友. 我这整理的是Web控件版本的开发示例,里面页面代码保存成html,都可以直接运行的. 测试使用的 ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 12.二次开发及应用
目 录 第十二章 二次开发及应用... 2 12.1 项目配制... 3 12.2 引用相关组件... 4 12.3 构建主程序... 5 ...
- php后台开发（二）Laravel框架
php后台开发(二)Laravel框架 为了提高后台的开发效率,往往需要选择一套适合自己的开发框架,因此,选择了功能比较完善的Laravel框架,仔细学来,感觉和Python语言的框架Django非常 ...
- Silverlight开源框架SL提供便捷的二次开发银光框架
Silverlight开发框架SilverFrame欢迎咨询 基于Silverlight4.0开发,兼容Silverlight 5.0,SQLServer2005数据库.WCF: 本框架有清爽的前端界 ...
随机推荐
- Centos Samba 服务器 iptables 和 SElinux 设置
1.安装samba服务器 # yum install samba 2.配置 # vi /etc/samba/smb.conf security = user (100行左右) 在Share Defin ...
- 微信接口php
官方提供的SDK只有一个文本消息功能,我们将所有消息的消息类型及事件响应都整理了进来,并且加入日志记录,代码如下: 更新日志: 2013-01-01 版本1.0,包含Token验证及基本消息接口的收发 ...
- Caffe + Ubuntu 14.04 64bit + 无CUDA（linux下安装caffe（无cuda）以及python接口）
安装Caffe指导书 环境: Linux 64位 显卡为Intel + AMD,非英伟达显卡 无GPU 一. 安装准备工作 1. 以管理员身份登录 在左上角点击图标,搜索terminal(即终端),以 ...
- Database cannot be started in this edition of SQL Server" error when restoring a Microsoft Dynamics CRM database
处理办法:http://support.microsoft.com/kb/2567984
- linux环境下学习使用pro*c/c++工具
1.proc是oracle用来预编译嵌入SQL语句的c程序. 2.如何使用proc工具 在Linux环境下,首先确保gcc编译器正常使用,安装oracle数据库或者客户端,一般就会默认安装pro*c/ ...
- winfrom 文字滚动
winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...
- C语言-Hello, world
你好, 世界 --1-- 语言的编写准备 1.1 C语言源文件的编译执行过程 1.2 常见文件的拓展名 1.3 常用的命令行指令 1.4 环境及运行方法 --2--编写代码 2.1练习 --3-- ...
- AngularJS过滤器
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...
- sqlite嵌入式数据库C语言基本操作(1)
sqlite嵌入式数据库C语言基本操作(1) :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0, ...
- SpringMVC框架下的异常处理
在eclipse的javaEE环境下:导包.... 1. 在 @ExceptionHandler 方法的入参中可以加入 Exception 类型的参数, 该参数即对应发生的异常对象 2. @Excep ...