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!