Dojo在Dijit中的交互

最新推荐文章于 2021-07-05 03:29:10 发布

原创最新推荐文章于 2021-07-05 03:29:10 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #function #div #button #class #callback

Dojo 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了MainPanel在搜索平台实现中的作用，包括如何通过MainPanel控制效果页面板，以及不同Panel间的数据传递与方法调用机制。通过实例展示了如何在父类与子类间传递数据，以及如何在不同面板间进行参数传递，提供了实现复杂搜索功能的思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　结果页面板由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, 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!