MainPanel.html
<div class="ecmWorkTabs" style="padding: 0; border: 0; background-color: transparent; width: 100%; height: 100%;">
<div data-dojo-type="dijit.layout.StackContainer" data-dojo-attach-point="stackContainer">
<div data-dojo-type="com.itccxx.widget.dm.searchuse.searchplatform.SearchPlatform" data-dojo-props='showNavigation: false,showPagination: true,searchBarName: "unifySearch"' ></div>
</div>
</div>
在MainPanel中，指定了Navigation与SearchBar的内容，其中SearchBar在Json数据中配置，对应于unifySearch
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._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!
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。