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

前一篇帖子讨论了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所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingpostCreatestartuponShow

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

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

（1）加载Test所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

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所在页面：

preambleconstructorcancelpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

4. 编程式，不设href

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

（1）加载Test所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingpostCreatestartuponShow

（2）调用Test refresh()

refreshcancelonDownloadStartonUnloaduncaught 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所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

（2）调用Test refresh()

refreshcancelonDownloadStartonUnloadonLoadonDownloadEnd

（3）设置一个新的href

cancelonDownloadStartonUnloadonLoadonDownloadEnd

（4）调用Test destroy()

destroyuninitializecanceldestroyRendering

（5）调用Test destroyRecursive()

destroyRecursiveonUnloaddestroyuninitializecanceldestroyRendering

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所在页面：

preambleconstructorcancelpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

（2）调用Test refresh()

refreshcancelonDownloadStartonUnloadonLoadonDownloadEnd

（3）设置一个新的href

cancelonDownloadStartonUnloadonLoadonDownloadEnd

（4）调用Test destroy()

destroyuninitializecanceldestroyRendering

（5）调用Test destroyRecursive()

destroyRecursiveonUnloaddestroyuninitializecanceldestroyRendering

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所在页面：

preambleconstructorcancelpostMixInPropertiesbuildRenderingcancelpostCreatestartup

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

refreshcancelonDownloadStartonShowonLoadonDownloadEnd

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所在页面：

preambleconstructorcancelpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

（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所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingcancelpostCreatestartup

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

refreshcancelonDownloadStartonShowonLoadonDownloadEnd

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所在页面：

preambleconstructorpostMixInPropertiesbuildRenderingcancelpostCreatestartuprefreshcancelonDownloadStartonShowonLoadonDownloadEnd

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

onShow

（3）调用tabcontainer removeChild()

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

destroyRecursiveonUnloaddestroyuninitializecanceldestroyRendering

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

（5）调用tabcontainer destroyDescendants()

onShowdestroyRecursiveonUnloaddestroyuninitializecanceldestroyRendering

参考文献：

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