如何将Dojo原型集成到ICN中?

时间:2016-08-21 12:24:42

标签: javascript dojo navigator

我有一个模板(使用Dojo),如下所示: enter image description here

我使用IBM内容导航器的新功能将其集成到ICN中: enter image description here

请帮忙或举个例子。

任何帮助将不胜感激,谢谢。

- 我的代码如下:

原型代码------------------------- ------------ html page

<div class="leading-panel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
            <p>Danh sách thông tin<br/> <input id="stateSelect"></p>
            <p>Mã thông tin<br/> <input id="stateSelect2"></p>
</div><!--End .leading-panel-->

------------ Js page

require([
    "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"California", id:"CA"},
            {name:"Colorado", id:"CO"},
            {name:"Connecticut", id:"CT"},
            {name:"Delaware", id:"DE"}
        ]
    });

    var comboBox = new ComboBox({
        id: "stateSelect",
        name: "state",
        style:{width: "auto"},
        value: "California",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect").startup();

    var comboBox = new ComboBox({
        id: "stateSelect2",
        name: "state",
        style:{width: "auto"},
        value: "California",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect2").startup();
});

IBM内容导航器代码的新功能------------- .com.WebContent.testICNDojo.templates --- ICNFutureTest.html

<div class="ecmCenterPane">
    <!--  Please add your configuration pane -->
    <div class="wrapper" data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
        <div class="leading-panel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
            <p>Danh sách thông tin<br/> <input id="stateSelect"></p>
            <p>Mã thông tin<br/> <input id="stateSelect2"></p>
        </div><!--End .leading-panel-->
    </div>
</div>

-------------------------------------------- ------- .com.WebContent.testICNDojo --- ICNFutureTest.js

define([
    "dojo/_base/declare",
    "ecm/widget/layout/_LaunchBarPane",
    "dojo/text!./templates/ICNFutureTest.html",
    "dojo/store/Memory", 
    "dijit/form/ComboBox",
    "dojo/domReady!"
],
function(declare,
        _LaunchBarPane,
        template,
        Memory,
        ComboBox) {
    /**
     * @name testICNDojo.ICNFutureTest
     * @class 
     * @augments ecm.widget.layout._LaunchBarPane
     */
    return declare("testICNDojo.ICNFutureTest", [
        _LaunchBarPane
    ], {
        /** @lends testICNDojo.ICNFutureTest.prototype */

        templateString: template,

        widgetsInTemplate: true,

        postCreate: function() {
            this.inherited(arguments);

            //load js for template
            this.loadDataOfForm();
        },


        /**
         * My js-------
         */
        loadDataOfForm: function() {

            var stateStore = new Memory({
                data: [
                    {name:"Alabama", id:"AL"},
                    {name:"Alaska", id:"AK"},
                    {name:"American Samoa", id:"AS"},
                    {name:"Arizona", id:"AZ"},
                    {name:"Arkansas", id:"AR"},
                    {name:"Armed Forces Europe", id:"AE"},
                    {name:"Armed Forces Pacific", id:"AP"},
                    {name:"Armed Forces the Americas", id:"AA"},
                    {name:"California", id:"CA"},
                    {name:"Colorado", id:"CO"},
                    {name:"Connecticut", id:"CT"},
                    {name:"Delaware", id:"DE"}
                ]
            });

            var comboBox = new ComboBox({
                id: "stateSelect",
                name: "state",
                style:{width: "auto"},
                value: "California",
                store: stateStore,
                searchAttr: "name"
            }, "stateSelect").startup();

        }
        /*ect function ...*/
    });
});

1 个答案:

答案 0 :(得分:1)

你应该把它放在loadContent函数中。 loadContent是CustomFeature中的内置函数 - IBM Content Navigator,如:

&#13;
&#13;
  loadContent: function() {

   var stateStore = new Memory({
     data: [
       {name:"Alabama", id:"AL"},
       {name:"Alaska", id:"AK"},
       {name:"American Samoa", id:"AS"},
       {name:"Arizona", id:"AZ"},
       {name:"Arkansas", id:"AR"},
       {name:"Armed Forces Europe", id:"AE"},
       {name:"Armed Forces Pacific", id:"AP"},
       {name:"Armed Forces the Americas", id:"AA"},
       {name:"California", id:"CA"},
       {name:"Colorado", id:"CO"},
       {name:"Connecticut", id:"CT"},
       {name:"Delaware", id:"DE"}
     ]
   });

   var comboBox = new ComboBox({
     id: "stateSelect",
     name: "state",
     style:{width: "auto"},
     value: "California",
     store: stateStore,
     searchAttr: "name"
   }, "stateSelect").startup();
   this.logEntry("loadContent");

   if (!this.isLoaded) {
     this.isLoaded = true;
     this.needReset = false;
   }

   this.logExit("loadContent");
 },
&#13;
&#13;
&#13;