Question

我创建了许多小部件，这些小部件作为tabcontainer中的选项卡窗格加载。一切似乎都运行良好，除了我在使用我的自定义小部件时得到不同的结果而不是在标记中创建所有内容（标签内容不占用整个页面，第三方小部件行为不正常等）。这一切都让我觉得我可能没有正确地创建我的小部件。诀窍似乎是它们不被解释为contentpanes。

我正在使用dojo 1.3.2。

例如，以下标记效果很好：

<body class="soria" style="overflow-y: hidden;">
    <!-- Container for whole page -->
    <div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
        <!-- Header container -->
        <div dojoType="dijit.layout.ContentPane" region="top">
            Title
        </div>
        <!-- Left side -->
        <!--<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true" style="width:100%; background-color: #F0F8FF;">-->
        <div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
            <div style="text-align: center;">
                <!-- address -->
                <span id="addressInstructions">Address Contents</span>
            </div>
        </div>
        <!-- Tabs -->
        <div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
            <div dojoType="dijit.layout.ContentPane" id="tab1" title="map">
                <p>Change map to:</p>
                <div id="divMapList"></div>
                <div style="padding: 10px 10px 10px 10px;">
                    <div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
                Some text in here.
            </div>
        </div>
    </div>
</body>

查看生成的HTML代码，我可以看到该选项卡本身具有以下类：“dijitContentPane dijitTabPane dijitTabContainerTop-child dijitTabContainerTop-dijitContentPane dijitVisible”。

以下是我的一个自定义小部件的HTML：

<div>
    <div style="text-align: center; padding: 5px 5px 5px 5px;">
        <div>${i18nStrings.mapChangeMap}:</div>
        <div dojoAttachPoint="divMapSelection"></div>
        <div style="padding: 10px 10px 10px 10px;">
            <div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
        </div>
    </div>

这是自定义小部件JS的一部分（如果需要，我可以提供更多代码）：

dojo.declare("xxxx.Widget.Map", [dijit._Widget, dijit._Templated],
{
    //Specify the path of the HTML file that sets the look of the widget
    templatePath: dojo.moduleUrl("xxxx", "widget/templates/Map.html"),

    //The strings used to populate standard text. Populated in postMixInProperties
    i18nStrings: null,

    //The widget's root div identifier. Value overwritten in postMixInProperties
    id:"tabMap",

    //The tab's title. Value overwritten in postMixInProperties
    title: "",

    //True to activate the tab. False otherwise.
    activate: false,

    //The map & current layer
    map: null,
    currentLayer: null,

    //Sets up some basic properties
    postMixInProperties: function() {
        this.inherited(arguments);
        var _1 = dojo.i18n.getLocalization("dijit", "loading", this.lang);
        this.loadingMessage = dojo.string.substitute(this.loadingMessage, _1);
        this.errorMessage = dojo.string.substitute(this.errorMessage, _1);
        if (!this.href && this.srcNodeRef && this.srcNodeRef.innerHTML) {
            this.isLoaded = true;
        }
        this.i18nStrings = dojo.i18n.getLocalization("IndyVIP","applicationStrings");
        this.title = this.i18nStrings.mapTabTitle;
    },
</div>

我通过创建窗口小部件将小部件添加到容器中，然后将其作为子项添加到tabcontainer。

这会导致以下类分配给我的选项卡：“dijitTabPane dijitTabContainerTop-child dijitVisible”。

有谁知道我做错了什么？

谢谢！

Emmster

更新：我决定尝试继承dijit.layout.ContentPane＆amp; dijit._Templated。我仍然遇到问题，但主要的一点是，如果我将我的小部件添加到TabContainer，我在dojo.js.uncompressed.js的第4467行上得到错误“node is null”，但该选项卡似乎工作很好，如果它是活动标签开始。如果我将窗口小部件添加到仅包含窗口小部件的页面，则可以正常工作而不会出现错误。

请参阅下面的代码，它给出了预期的结果，但导致一个“节点为空”错误。 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test</title>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            useXDomain: true,
            debugAtAllCosts: true,
            baseUrl: './',
            modulePaths: {IndyVIP: 'js'}
        };
    </script>
    <link rel="Stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/soria/soria.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("IndyVIP.Widget.Map");
        dojo.addOnLoad(init);
        function init() {
            var tab = new IndyVIP.Widget.Map({title: 'Map'});
            var tabContainer = dijit.byId('tabs');
            tabContainer.addChild(tab);
        }
    </script>
</head>
<body class="soria" style="overflow-y: hidden;">
    <!-- Container for whole page -->
    <div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
        <!-- Header container -->
        <div dojoType="dijit.layout.ContentPane" region="top">
            Title
        </div>
        <!-- Left side -->
        <div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
            <div style="text-align: center;">
                <!-- address -->
                <span id="addressInstructions">Address Contents</span>
            </div>
        </div>
        <!-- Tabs-->
        <div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
            <!-- uncommenting the following results in map not acting the way it should -->
            <!--
            <div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
                Some text in here.
            </div>-->
        </div>
    </div>
</body>
</html>

Map.js：

dojo.provide("IndyVIP.Widget.Map");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");

dojo.declare("IndyVIP.Widget.Map", [dijit.layout.ContentPane, dijit._Templated],
{
    map: null,

    //Specify the path of the HTML file that sets the look of the widget
    templatePath: dojo.moduleUrl("IndyVIP", "widget/templates/Map.html"),

    //The tab's title. Value overwritten in postMixInProperties
    title: "",

    widgetsInTemplate: true,

    startup: function() {
        this.map = new esri.Map('divMap');
        dojo.connect(this.map, 'onLayerAdd', this, this.onLayerAdd);
        var layer = new esri.layers.ArcGISTiledMapServiceLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
        this.map.addLayer(layer);
    },

    onLayerAdd: function() {
        //Create symbol
        var lineColor = new dojo.Color('black');
        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,lineColor,1);
        var pointColor = new dojo.Color('red');
        var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,12,lineSymbol,pointColor);

        //Create point
        var x = 4.92;
        var y = 50.625;
        var point = new esri.geometry.Point(x,y,this.map.spatialReference);

        //Create template
        var template = new esri.InfoTemplate('A title','Some content');

        //Create graphic
        var graphic = new esri.Graphic(point,pointSymbol,null,template);

        //Add graphic to map
        this.map.graphics.clear();
        this.map.graphics.add(graphic);
    }

});

最后，这是小部件的HTML模板：

<div>
    <div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>

到目前为止，我非常感谢你的所有建议。我觉得我错过了一些基本的东西，但我无法弄明白。

Emmster

Answer 1

从dijit.layout.ContentPane继承时遇到的问题是我的widget模板中的顶级div没有指定dojoAttachPoint =“containerNode”。这样做可以解决我收到的“node is null”错误。我仍然遇到地图表现不正常的问题，但这似乎与丹特提示最初看不到的标签有关。

更新：我遇到的另一个错误（地图不能正常运行）是由于小部件的模板HTML在小部件HTML中具有地图上方的项目，如上面的第一个示例（map.html）。在我提供的第二个例子中，我把那些额外的东西拿出来，这解决了问题。

Answer 2

继承ContentPane并在根节点上具有dojoAttachPoint =“containerNode”似乎是选项卡必需的。这有助于我解决类似的问题。

Dojo选项卡作为自定义小部件

2 个答案: