Dojo在Dijit中的交互

前端之家收集整理的这篇文章主要介绍了Dojo在Dijit中的交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  结果页面板由MainPanel统一控制,方便重用,先看效果


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!

猜你在找的Dojo相关文章