Dojo在Dijit中的交互
结果页面板由MainPanel统一控制，方便重用，先看效果
UnifySearch.html的关键代码
<div class="ecmUnifySearch" style="left: 0px; top: 0px; padding: 0px"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="container" style="padding: 0px"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "top"' style="padding: 0;"> <div style=" height:40px; text-align:left;margin-left:50px;"> <span style="height:70;font-size:22px; vertical-align:middle;">${resourceBundle.searchPlatformLabel}</span> <span data-dojo-type="dijit.form.TextBox" type="text" data-dojo-attach-point="inputBox" value="" trim="true" required="true" style="width:400px;height:35px;"></span> <span data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSearch1" data-dojo-attach-event="onClick: _onSearch"> ${resourceBundle.basicSearchButton} </span> <span data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSearch2" data-dojo-attach-event="onClick: _onAdvancedSearch"> ${resourceBundle.advancedSearchButton} </span> </div> </div> </div> </div>
UnifySearch.js中关键代码
_onSearch : function(event) { this.logger.debug("_onSearch"); var searchObj = this._buildSearchObject(); // TODO: process the event object console.dir([ "searchObj", searchObj ]); this.onSearch(searchObj); }, onSearch : function(event) { // Just for callback },
值得注意的是，这里有两个onSearch（）方法，其不同之处在于一个有前缀下划线，一个没有。那么这两个方法有什么区别呢？ _onSearch()方法是unifySearch内部使用的方法，而onSearch()是对外（也可以称作对上层提供的接口）提供的方法，这样
降低了不同模块之间的耦合性。
由于在MainPanel.html页面中，包含了SearchPlatform.html，当unifySearch中onSearch()方法调用时，SearchPlatform中的
onSearch()方法也随之调用。为什么SearchPlatform中的onSearch()方法会被调用呢？因为unifySearch页在点击Button时，会触发onClick事件，调用_onSearch()方法，_onSearch()方法又调用类中的onSearch（）方法，SearchPlatform（见下面代码）页通过dojo.connect()监听了toolbar中的onSearch()方法，所以unifySearch中的onSearch()方法调用时，SearchPlatform中的onSearch()
方法就会被自动调用。
下面看SearchPlatform.js的关键代码
postCreate : function() { this.inherited(arguments); if (searchBar) { this.container.addChild(searchBar, 1); this.searchBar = searchBar; dojo.connect(searchBar, "onSearch", this, this.onSearch); } }, onSearch : function(event) { this.logger.debug("onSearch--->"); this.executeSearch(event); }, executeSearch : function(searchObj) { this.pagination.onPaging(searchObj); }, onPageChange : function(event) { this.logger.debug("onPageChange"); dojo.forEach( event.items, function(item) { var dijit = new com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultItem(item); dijit.setData(item); dojo.connect(dijit, "onShowDetail", this, this._onShowDetail); this.resultListNode.appendChild(dijit.domNode); //widget.setIndex(index); }, this); },
由上面代码可以看到，onSearch()方法，又跑到pagination页面中的onPaging()方法中去。这是因为我们所有对数据的查询操作，都是从分页模块进行处理的，所以分页模块是我们整个模块中重中之重的一部分。
上面的内容是在不同的Panel内，父类调用子类的方法，方法的监听内容（也可以理解为方法的传递、调用），关于不同Panel间方法的传递，还有另外一种：broadcastEvent，在稍后我们将做简单介绍。下面，我们先介绍在子类中如何使用父类的方法。
看上面的代码，SearchPlatform中onPageChange()方法中的dijit.setData(item)方法，此方法是SearchPlatform.html中用来传递给子页面resultItem.html．因为resultListNode是镶嵌在SearchPlatform页面中的，html代码如下（请结合onPageChange方法查看）：
<div class="ecmSearchPlatform" style="padding: 0"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="container" style="padding: 0px 0px 2px 0px;"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "top"' data-dojo-attach-point ="navigationPane" style="padding: 0"> <div data-dojo-type="com.itccxx.common.dijit.searchlist.Navigation" data-dojo-attach-point ="navigation" data-dojo-attach-event="onFolderChange: onFolderChange"></div> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "client"'> <div data-dojo-attach-point="resultListNode" tabindex="0"> </div> </div> <div data-dojo-type="com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultView" data-dojo-props='layoutAlign: "right", splitter:true' data-dojo-attach-point="resultView"></div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "bottom"' data-dojo-attach-point="paginationPane" style="padding: 0"> <div data-dojo-type="com.itccxx.common.dijit.searchlist.Pagination" data-dojo-attach-point="pagination" data-dojo-attach-event="onPageChange: onPageChange"></div> </div> </div> </div> 因为resultItem.html是嵌套在searchPlatform页面中的，所以调用searchPlatform中的dijit.setData()时，子页面resultItem中会直接调用
setData()方法，如下所示，而不用在父类中监听子类的方法（）
setData : function(data) { this.resultTitle.innerHTML = data.fileName; this.resultDocDate.innerHTML = data.validDate; this.data = data; }
上面我们已经介绍了如何在父页面与子页面之间传递数据，接下来我们再说一下如何在两个不同的面板中进行参数传递，还是看searchPlatform中的代码，
<div data-dojo-attach-point="resultListNode" tabindex="0"/> <div data-dojo-type="com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultView" data-dojo-props='layoutAlign: "right", splitter:true' data-dojo-attach-point="resultView"/> 上面两段div分别对应着两个不同的面板，分别是结果集与结果集的详细信息，这两个内容属于兄弟节点，我们如何在这两个页面间传递数据呢？
这就用到了我们上面提到的broadcastEvent()方法。话不多说，以例为证。
showResult : function(result) { this.logger.debug(); this.broadcastEvent("ShowResultViewDetail", { result : result }); } showResult是resultItem中Button触发时响应的方法，该方法通过broadcaseEvent向外广播一个事件，在其它页面中，只要捕获到ShowResultViewDetail方法，就可以将
参数传递到所需要的页面中，我们看ResultView中的方法。
handleShowResultViewDetail : function(event){ var item = event.payload.result; this.setData(item); }
MainPanel.html
UnifySearch.html的关键代码
<div class="ecmUnifySearch" style="left: 0px; top: 0px; padding: 0px"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="container" style="padding: 0px"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "top"' style="padding: 0;"> <div style=" height:40px; text-align:left;margin-left:50px;"> <span style="height:70;font-size:22px; vertical-align:middle;">${resourceBundle.searchPlatformLabel}</span> <span data-dojo-type="dijit.form.TextBox" type="text" data-dojo-attach-point="inputBox" value="" trim="true" required="true" style="width:400px;height:35px;"></span> <span data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSearch1" data-dojo-attach-event="onClick: _onSearch"> ${resourceBundle.basicSearchButton} </span> <span data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSearch2" data-dojo-attach-event="onClick: _onAdvancedSearch"> ${resourceBundle.advancedSearchButton} </span> </div> </div> </div> </div>
UnifySearch.js中关键代码
_onSearch : function(event) { this.logger.debug("_onSearch"); var searchObj = this._buildSearchObject(); // TODO: process the event object console.dir([ "searchObj", searchObj ]); this.onSearch(searchObj); }, onSearch : function(event) { // Just for callback },
值得注意的是，这里有两个onSearch（）方法，其不同之处在于一个有前缀下划线，一个没有。那么这两个方法有什么区别呢？ _onSearch()方法是unifySearch内部使用的方法，而onSearch()是对外（也可以称作对上层提供的接口）提供的方法，这样
降低了不同模块之间的耦合性。
由于在MainPanel.html页面中，包含了SearchPlatform.html，当unifySearch中onSearch()方法调用时，SearchPlatform中的
onSearch()方法也随之调用。为什么SearchPlatform中的onSearch()方法会被调用呢？因为unifySearch页在点击Button时，会触发onClick事件，调用_onSearch()方法，_onSearch()方法又调用类中的onSearch（）方法，SearchPlatform（见下面代码）页通过dojo.connect()监听了toolbar中的onSearch()方法，所以unifySearch中的onSearch()方法调用时，SearchPlatform中的onSearch()
方法就会被自动调用。
下面看SearchPlatform.js的关键代码
postCreate : function() { this.inherited(arguments); if (searchBar) { this.container.addChild(searchBar, 1); this.searchBar = searchBar; dojo.connect(searchBar, "onSearch", this, this.onSearch); } }, onSearch : function(event) { this.logger.debug("onSearch--->"); this.executeSearch(event); }, executeSearch : function(searchObj) { this.pagination.onPaging(searchObj); }, onPageChange : function(event) { this.logger.debug("onPageChange"); dojo.forEach( event.items, function(item) { var dijit = new com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultItem(item); dijit.setData(item); dojo.connect(dijit, "onShowDetail", this, this._onShowDetail); this.resultListNode.appendChild(dijit.domNode); //widget.setIndex(index); }, this); },
由上面代码可以看到，onSearch()方法，又跑到pagination页面中的onPaging()方法中去。这是因为我们所有对数据的查询操作，都是从分页模块进行处理的，所以分页模块是我们整个模块中重中之重的一部分。
上面的内容是在不同的Panel内，父类调用子类的方法，方法的监听内容（也可以理解为方法的传递、调用），关于不同Panel间方法的传递，还有另外一种：broadcastEvent，在稍后我们将做简单介绍。下面，我们先介绍在子类中如何使用父类的方法。
看上面的代码，SearchPlatform中onPageChange()方法中的dijit.setData(item)方法，此方法是SearchPlatform.html中用来传递给子页面resultItem.html．因为resultListNode是镶嵌在SearchPlatform页面中的，html代码如下（请结合onPageChange方法查看）：
<div class="ecmSearchPlatform" style="padding: 0"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="container" style="padding: 0px 0px 2px 0px;"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "top"' data-dojo-attach-point ="navigationPane" style="padding: 0"> <div data-dojo-type="com.itccxx.common.dijit.searchlist.Navigation" data-dojo-attach-point ="navigation" data-dojo-attach-event="onFolderChange: onFolderChange"></div> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "client"'> <div data-dojo-attach-point="resultListNode" tabindex="0"> </div> </div> <div data-dojo-type="com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultView" data-dojo-props='layoutAlign: "right", splitter:true' data-dojo-attach-point="resultView"></div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='layoutAlign: "bottom"' data-dojo-attach-point="paginationPane" style="padding: 0"> <div data-dojo-type="com.itccxx.common.dijit.searchlist.Pagination" data-dojo-attach-point="pagination" data-dojo-attach-event="onPageChange: onPageChange"></div> </div> </div> </div> 因为resultItem.html是嵌套在searchPlatform页面中的，所以调用searchPlatform中的dijit.setData()时，子页面resultItem中会直接调用
setData()方法，如下所示，而不用在父类中监听子类的方法（）
setData : function(data) { this.resultTitle.innerHTML = data.fileName; this.resultDocDate.innerHTML = data.validDate; this.data = data; }
上面我们已经介绍了如何在父页面与子页面之间传递数据，接下来我们再说一下如何在两个不同的面板中进行参数传递，还是看searchPlatform中的代码，
<div data-dojo-attach-point="resultListNode" tabindex="0"/> <div data-dojo-type="com.itccxx.widget.dm.searchuse.searchplatform.dijit.ResultView" data-dojo-props='layoutAlign: "right", splitter:true' data-dojo-attach-point="resultView"/> 上面两段div分别对应着两个不同的面板，分别是结果集与结果集的详细信息，这两个内容属于兄弟节点，我们如何在这两个页面间传递数据呢？
这就用到了我们上面提到的broadcastEvent()方法。话不多说，以例为证。
showResult : function(result) { this.logger.debug(); this.broadcastEvent("ShowResultViewDetail", { result : result }); } showResult是resultItem中Button触发时响应的方法，该方法通过broadcaseEvent向外广播一个事件，在其它页面中，只要捕获到ShowResultViewDetail方法，就可以将
参数传递到所需要的页面中，我们看ResultView中的方法。
handleShowResultViewDetail : function(event){ var item = event.payload.result; this.setData(item); }
通过broadcastEvent 和 handleXxxXxx就可以进行不同页面间交互了,是不是很High!