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

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

dojo

Dojo选项卡作为自定义小部件,dojo,widget,Dojo,Widget,我已经创建了许多小部件，它们作为选项卡窗格加载到tabcontainer中。一切似乎都很好，除了我在使用自定义小部件和在标记中创建所有内容时得到不同的结果（选项卡内容没有占据整个页面，第三方小部件没有正常工作，等等）。这一切让我想到，我可能没有正确地创建我的小部件。诀窍似乎是它们不会被解释为内容窗格我正在使用Dojo1.3.2 例如，以下标记非常有效： <body class="soria" style="overflow-y: hidden;"> <!-- Cont

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

我正在使用Dojo1.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模板：

<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

从dijit.layout.ContentPane继承时遇到的问题是，我的小部件模板中的顶部div没有指定dojoAttachPoint=“containerNode”。这样做可以解决我遇到的“node is null”错误。我仍然有地图行为不正常的问题，但这似乎与dante暗示的选项卡最初不可见有关

更新：

我遇到的另一个错误（映射未按其应有的方式运行）是由于小部件的模板HTML在小部件HTML中的映射上方有项目，如我上面的第一个示例（map.HTML）所示。在我提供的第二个示例中，我去掉了额外的内容，这就解决了问题。

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

请澄清，问题是您的内容没有填充内容窗格？当你说“第三方小部件运行不正常”是什么意思？这是问题的一部分，是的。我使用的第三方小部件是ESRI的JavaScript API（）。我正在添加的地图表现不正常。我昨天开始玩我的自定义小部件，而不是从[dijit.\u Widget，dijit.\u Templated]继承，我现在尝试从[dijit.layout.ContentPane，dijit.\u Templated]继承。我也遇到了一些错误，但我刚刚开始使用这个选项。你有没有尝试过在独立于容器的页面上测试你的小部件？看看是否可以将其显示在固定大小的div中，如下所示：另外，您可能不希望在小部件标记模板中的任何位置使用domid属性（如id=“divMap”）。创建多个小部件实例将导致具有相同id的DOM节点；dojoAttachPoint是您所需要的全部。

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>

<!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>

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);
    }

});

<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>