dijit.layout.ContentPane 中的标准方法/事件在不同情况下的调用

最新推荐文章于 2020-06-28 14:22:22 发布
最新推荐文章于 2020-06-28 14:22:22 发布
阅读量6.8k 收藏 3
点赞数
分类专栏： Dojo 文章标签： constructor function exception html firebug 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eengel/article/details/6595473
版权

前一篇帖子讨论了Dijit 传入参数处理机制，这儿就Dijit中最常用的一个组件dijit.layout.ContentPane，讨论一下dijit标准方法和事件的调用。

dijit.layout.ContentPane[1]包含有一系列的标准方法和事件，又有诸多参数可以设置不同的值来对这些方法/事件的调用施加影响，导致对它的使用看起来非常的纷繁复杂。这儿通过firebug的console输出，尝试查看一下不同情况下，到底dijit.layout.ContentPane的各方法/事件的调用顺序是什么样的。

 

下面定义了一个继承自dijit.layout.ContentPane的自定义dijit组件。在后面，会一一列举不同的实例化方式和配置，及其在相应情景下，各方法/事件的调用情况。时间有限，这儿没有对结果进行分析，只是单纯列出来了。

dojo.declare("Test", [ dijit.layout.ContentPane ], {

	preamble: function(){
		console.log("preamble");
		this.inherited(arguments);
	},
	
	constructor: function(){
		console.log("constructor");
	},

	postMixInProperties: function(){
		console.log("postMixInProperties");
		this.inherited(arguments);
	},

	buildRendering: function(){
		console.log("buildRendering");
		this.inherited(arguments);
	},
	
	postCreate: function(){
		console.log("postCreate");
		this.inherited(arguments);
	},
	
	startup: function(){
		console.log("startup");
		this.inherited(arguments);
	},
	
	cancel: function(){
		console.log("cancel");
		this.inherited(arguments);
	},
	
	destroy: function(){
		console.log("destroy");
		this.inherited(arguments);
	},
	
	destroyRecursive: function(){
		console.log("destroyRecursive");
		this.inherited(arguments);
	},
	
	destroyRendering: function(){
		console.log("destroyRendering");
		this.inherited(arguments);
	},
	
	refresh: function(){
		console.log("refresh");
		this.inherited(arguments);
	},
	
	uninitialize: function(){
		console.log("uninitialize");
		this.inherited(arguments);
	},
	
	onClose: function(){
		console.log("onClose");
		this.inherited(arguments);
	},
	
	onDownloadEnd: function(){
		console.log("onDownloadEnd");
		this.inherited(arguments);
	},
	
	onDownloadStart: function(){
		console.log("onDownloadStart");
		this.inherited(arguments);
	},
	
	onHide: function(){
		console.log("onHide");
		this.inherited(arguments);
	},
	
	onLoad: function(){
		console.log("onLoad");
		this.inherited(arguments);
	},
	
	onShow: function(){
		console.log("onShow");
		this.inherited(arguments);
	},
	
	onUnload: function(){
		console.log("onUnload");
		this.inherited(arguments);
	}
});

注意，除了constructor，别的方法都需要调用this.inherited(arguments)。

 

1. 声明式，不设href

<div dojoType="Test" title="Space">This is a customized content pane.</div>

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
postCreate
startup
onShow

2. 声明式，在html tag中设置href

<div dojoType="Test" title="Space" href=”/simple.do”>This is a customized content pane.</div>

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

3. 声明式，在Test constructor中设置href

<div dojoType="Test" title="Space">This is a customized content pane.</div>

constructor: function(){
	console.log("constructor");
	this.set("href", "/simple.do");
}

（1）加载Test所在页面：

preamble
constructor
cancel
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

4. 编程式，不设href

dojo.ready(function(){
	var test = new Test({}, dojo.byId("container"));
	test.startup();
});

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
postCreate
startup
onShow

（2）调用Test refresh()

refresh
cancel
onDownloadStart
onUnload
uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://localhost:8080/js/dojo-1.5.0/dojo/dojo.js.uncompressed.js :: anonymous :: line 10474" data: no]
注意，这儿没有设置href，refresh时就会出错。

 

5. 编程式，在new时设置href

dojo.ready(function(){
	var test = new Test({
        href: “/simple.do”
}, dojo.byId("container"));
	test.startup();
});

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

（2）调用Test refresh()

refresh
cancel
onDownloadStart
onUnload
onLoad
onDownloadEnd

（3）设置一个新的href

cancel
onDownloadStart
onUnload
onLoad
onDownloadEnd

（4）调用Test destroy()

destroy
uninitialize
cancel
destroyRendering


（5）调用Test destroyRecursive()

destroyRecursive
onUnload
destroy
uninitialize
cancel
destroyRendering


6. 编程式，在Test constructor中设置href

dojo.ready(function(){
	var test = new Test({}, dojo.byId("container"));
	test.startup();
});

constructor: function(){
	console.log("constructor");
	this.set("href", "/simple.do");
}

（1）加载Test所在页面：

preamble
constructor
cancel
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

（2）调用Test refresh()

refresh
cancel
onDownloadStart
onUnload
onLoad
onDownloadEnd

（3）设置一个新的href

cancel
onDownloadStart
onUnload
onLoad
onDownloadEnd

（4）调用Test destroy()

destroy
uninitialize
cancel
destroyRendering


（5）调用Test destroyRecursive()

destroyRecursive
onUnload
destroy
uninitialize
cancel
destroyRendering


7. 声明式，Test实例挂在TabContainer下，并在一开始隐藏。在Test constructor中设置href，preload为false

<div id="container" dojoType="dijit.layout.TabContainer" style="width:1000px;height:400px;">
	<div dojoType="dijit.layout.ContentPane" title ="22222" >2222</div>
	<div dojoType="Test" title="Space" preload="false">
		This is a customized content pane.
	</div>
</div>

constructor: function(){
	console.log("constructor");
	this.set("href", "/simple.do");
}

（1）加载Test所在页面：

preamble
constructor
cancel
postMixInProperties
buildRendering
cancel
postCreate
startup

（2）选中Test实例所在的tab

refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

8. 声明式，Test实例挂在TabContainer下，并在一开始隐藏。在Test constructor中设置href，preload为true

<div id="container" dojoType="dijit.layout.TabContainer" style="width:1000px;height:400px;">
	<div dojoType="dijit.layout.ContentPane" title ="22222" >2222</div>
	<div dojoType="Test" title="Space" preload="true">
		This is a customized content pane.
	</div>
</div>

constructor: function(){
	console.log("constructor");
	this.set("href", "/simple.do");
}

（1）加载Test所在页面：

preamble
constructor
cancel
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

（2）选中Test实例所在的tab

onShow

9. 声明式，Test实例挂在TabContainer下，并在一开始隐藏。在html tag中设置href，preload为false

<div id="container" dojoType="dijit.layout.TabContainer" style="width:1000px;height:400px;">
	<div dojoType="dijit.layout.ContentPane" title ="22222" >2222</div>
	<div dojoType="Test" title="Space" preload="false" href="/simple.do" >
		This is a customized content pane.
	</div>
</div>

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
cancel
postCreate
startup

（2）选中Test实例所在的tab

refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

10. 声明式，Test实例挂在TabContainer下，并在一开始隐藏。在html tag中设置href，preload为true

<div id="container" dojoType="dijit.layout.TabContainer" style="width:1000px;height:400px;">
	<div dojoType="dijit.layout.ContentPane" title ="22222" >2222</div>
	<div dojoType="Test" title="Space" preload="true" href="/simple.do" >
		This is a customized content pane.
	</div>
</div>

（1）加载Test所在页面：

preamble
constructor
postMixInProperties
buildRendering
cancel
postCreate
startup
refresh
cancel
onDownloadStart
onShow
onLoad
onDownloadEnd

（2）选中Test实例所在的tab

onShow


（3）调用tabcontainer removeChild()

（4）关闭Test实例所在的tab （点击tab上的X，或者调用tab container closeChild()）

destroyRecursive
onUnload
destroy
uninitialize
cancel
destroyRendering

这儿需要将Test的onClose注释掉。不然关闭tab功能将不起作用。


（5）调用tabcontainer destroyDescendants()

onShow
destroyRecursive
onUnload
destroy
uninitialize
cancel
destroyRendering


参考文献：

[1] Dojo Toolkit API, http://dojotoolkit.org/api/


慢游
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dijit.layout.ContentPane--dojo学习
weixin_30706691的博客
12-03 280
Content Pane是一个最基础的布局组件，概念上，这就象一个装内容的盒子，一个Content Pane象一个iframe,但是它还包括额外的设计功能，自适应当前的皮肤，以及实现widgets的 属性。 使用方法：你可以直接使用content pane，但通常情况下，你应该把content pane放在一个布局容器中 ，例如：一个tabbed layout。 Href:...
dojox/app应用中使用dijit/layout/ContentPane时上下文丢失
weixin_30343157的博客
08-23 129
dojo一直是我最喜欢的javascript库。最近在开发项目时使用了dojox/app来构建项目，并使用dojox/mvc进行数据绑定。但是当我使用dijit/layout/ContentPane来加载内容时，href指定的页面模板中出现了上下文丢失的现象：国际化资源变量nls是undefined。但是我明明在config.json中定义视图时指定了nls的，而且其他页面模板中都能正常使...
奇怪dijit.layout.ContentPane渲染失败
weixin_33890526的博客
09-28 95
2019独角兽企业重金招聘Python工程师标准>>> ...
dijit.layout.ContentPane href加载页面后，被加载页脚本不执行的解决办法
earthhour的专栏
06-04 2653
使用dijit/layout/ContentPane的href属性加载页面时，被加载页的dojo代码、javascript代码都不被执行 test.html: var s= new dijit.Dialog({ title:"测试页" }).show(); 解决办法，使用dojox/layout/ContentPane：
DOJO之dojox/layout/ContentPane关闭问题：teardown is not a function
azy_08的专栏
10-17 2223
本人初学
dojo 树形列表 dijit.tree
03-14
在实际开发中，这些例子可以帮助理解dijit.tree的使用方法，并根据需求进行扩展。例如，可以通过自定义模板来改变节点的显示方式，使用`dojo/on`模块监听节点点击事件，或者使用Dojo的`dojo/aspect`模块来增强功能。...
水经注离线谷歌卫星地图加载服务中间件调用示例 For ArcGIS JS API.docx
06-25
【水经注离线谷歌卫星地图加载服务中间件调用示例 For ArcGIS JS API】是一种技术方案，它允许在没有互联网连接的情况下使用ArcGIS API for JavaScript加载和展示谷歌卫星地图。这个中间件能创建一个本地服务器，...
Arcgis API for Javascript 3.5版离线本地部署方法-中文.docx
12-04
在某些情况下，开发者可能需要在没有网络连接或者需要内部网络隔离的情况下使用这个API。本文将详细介绍如何进行ArcGIS API for JavaScript 3.5版的离线本地部署。 首先，你需要访问Esri中国的官方网站，下载最新...
ArcGis-javaScript最全的中文API.docx
09-30
ArcGIS JavaScript API是一种强大的地理信息系统（GIS）开发工具，允许开发者使用JavaScript语言在Web应用程序中集成GIS功能。本指南旨在提供详细的中文API文档，帮助开发者快速上手使用ArcGIS JavaScript API。 ...
iframe父页面获取子页面参数的方法.docx
01-13
需要注意的是，这种方法只适用于同源策略允许的情况下，即父页面和子页面必须在同一域名下。如果它们位于不同的源，那么由于浏览器的安全限制，你将无法直接访问子页面的DOM。在这种情况下，可以使用`postMessage`和...
dojo学习笔记（六）－ ContentPane
懒散狂徒的专栏
07-23 2746
 实现功能：在一个容器里点击一个链接，在另外一个容器中显示这个链接所指向页面的内容。                    dojo.require("dojo.widget.ContentPane");        var links = null, display = null;        dojo.addOnLoad(init);        function init(){    
dijit_使用Dijit组件框架创建丰富的用户界面
cuyi7076的博客
06-28 635
什么是Dijit？ 发展有关此主题的技能 此内容是用于提高技能的渐进知识路径的一部分。 请参阅Dojo开发入门 Dijit是Dojo Toolkit的丰富组件的用户界面库。 这些组件完全可以主题化，可以使用HTML样式的标签进行声明，也可以使用JavaScript进行编程。 本节简要介绍了Dijit，介绍了Dijit必须提供的组件，并介绍了现成的各种主题。 丰富的用户界面组...
使用Dijit实现界面组件化开发
Dojo中文博客
01-19 5055
对于组件化的软件工程设计，很多开发人员都比较熟悉。组件化的设计适合于复杂的软件系统和团队协作开发。把软件系统划分成若干个组件，组件之间通过预先定义好的接口和协议进行通讯和协作，共同完成整个软件系统的职责。团队中的开发人员可以各自负责不同的组件。组件化的思想在桌面应用和Web应用后台开发中比较流行，相关的技术和实践都比较成熟。而在Web应用的前端部分，组件化一直进展得比较缓慢。这其中的原因有很多，最主要的是Web应用的前端在开始的时候比较简单，没有组件化和设计的必要。随着Ajax应用的流行，Web前端部分越发
ArcGIS API For JavaScript 开发（三）使用小部件设计页面框架
Zippy2016的博客
02-06 518
其实上一个的鹰眼、比例尺、图例等都是小部件；这篇文章主要是页面布局设计，dojo提供了非常多的小部件，从功能的角度可以分为3大类：表单小部件、布局小部件和应用小部件。 表单小部件于HTML中的表单部件。 布局小部件主要有3类，主要在dijit中： 面板：盛放和显示大块的内容，包括文本、图片、图表以及其他小部件。类的小部件有ContentPane、FloatingPane和Expan...
不见光就死的ContentPane：原因及解决之道
沧海一粟 —— 技术随手记
08-01 6184
dijit.layout.TabContainer是非常好用的一款tab组件，而创建每个tab的内容，最常用的就是dijit.layout.ContentPane。ContentPane 可以设置href，载入一块独立的html内容。每次在一个TabContainer中创建多个t
dojo ContentPane 加载子html，无法执行里面的js代码（dojo加载html页面后不执行js代码）
u014786330的博客
04-10 350
今天写Dojo页面， 使用Tabcontainer 造了几个tab， 然后把ContentPane添加进去， 本想某些tab点击之后去加载子页面(html页面)，但是加载完子html页面后里面的js不执行。 然后用 iframe加载，handleAS: html 但是得到的只是字符串， tab里面并不会以页面的形式显示子html， 找了好久，终于知道了原因。 Conte...
Dojo的TabContainer控件切换标签事件的编写方法
技术流
12-15 5939
Dojo的TabContainer是常用的Dojo的控件，切换标签时常常需要触发一些自定义的事件，但是Dojo本身居然没有提供OnSwitch的事件，让人火大。研究了半天，搞定了。 首先找到TabContainer控件以及其中需要捕捉切换的标签的Dijit对象，如：                  中的dbTab标签， var tabContainer =
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过属性查询地图服务中的信息</title> <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css"> <!-- <link rel="stylesheet" type="text/css" href="./css/esri.css" /> --> <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/themes/calcite/dijit/calcite.css"> <script src="https://js.arcgis.com/3.41/"></script> <script> require(["esri/map", //加载地图组件 "dojo/dom", "dojo/on", "esri/InfoTemplate", "esri/graphic", "esri/geometry/Point",//加载点对象组件 "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Extent",//加载范围组件 "esri/layers/FeatureLayer", //加载FeatureLayer地图组件 // "esri/dijit/FeatureTable", "esri/layers/WebTiledLayer", //加载切片地图组件 "esri/layers/ArcGISDynamicMapServiceLayer",//加载动态地图组件 "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "dojo/domReady!" ], function (Map, dom, on, InfoTemplate, Graphic, Point, SimpleMarkerSymbol,Extent, FeatureLayer, WebTiledLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, UniqueValueRenderer, Query, QueryTask, Color, GeoJsonLayer) { //初始化地图容器 // map = new Map("map", { logo: false, slider: false }, {zoom: 8}); map = new Map("map", { center: [109.33789 , 29.57985], basemap: "satellite", zoom: 10, sliderStyle: "small", logo: false }); // 创建底图 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap,0); // 创建动态图层 var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://116.62.63.94:6080/arcgis/rest/services/sanhuxiangtest/MapServer"); map.addLayer(dynamicLayer,99); }) </script> </head> <body class="tundra"> <div id="map" style="width:900px; height:580px; border:1px solid #000;"></div> 类别名称:<input class="nm" type="text"> </body> </html>
最新发布
07-15
这段代码是一个简单的HTML页面，用于通过属性查询地图服务中的信息。以下是代码的主要部分： 1. 引入必要的CSS和JavaScript库：代码中使用了ArcGIS API for JavaScript的版本3.41，并引入了其他必要的库文件。 2. 初始化地图：使用`new Map("map", options)`创建一个地图容器，其中`options`包含了地图的一些设置，例如中心点、底图、缩放级别等。 3. 创建底图和动态图层：使用`new ArcGISTiledMapServiceLayer(url)`创建一个底图，以及使用`new ArcGISDynamicMapServiceLayer(url)`创建一个动态图层。这些图层可以通过URL指定，以加载地图数据。 4. 将图层添加到地图上：使用`map.addLayer(layer, index)`方法将底图和动态图层添加到地图上。`index`参数可选，用于指定图层的显示顺序。 在页面中还有一个输入框，用于输入类别名称。您可以在页面加载完成后，通过属性查询来过滤地图服务中的信息。 请注意，该代码使用的是ArcGIS API for JavaScript版本3.x，而不是最新版本的4.x。如果您要使用最新版本的API，请相应地修改代码。另外，确保替换URL和其他参数以适应您自己的地图服务和需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值