除非调整浏览器窗口大小,否则dojo小部件不会呈现

时间:2014-12-19 11:12:42

标签: javascript html css dojo widget

除非调整浏览器(我正在使用Chrome)窗口或打开Developer工具,否则窗口小部件不会在TabContainer中呈现。我已经尝试过在早期线程中提供的解决方案,比如设置BorderContainer,TabContainer和ContentPanes的高度和宽度,但没有区别。以下是我的代码片段。对于附加点“步骤”我附加了某些数据。此选项卡“步骤”是问题所在。有解决方案吗以下是我的代码......

<div>
            <div data-dojo-type="dijit.layout.BorderContainer" 
                            data-dojo-props="design:'headline'"
                            style="width: 100%;height:100%;border:0">
                            <div class="shadow" data-dojo-type="dijit.layout.ContentPane" style="padding:0"
                                            data-dojo-props="region:'top'">
                                            <div data-dojo-type="dijit.layout.ContentPane" style="padding:0">
                                                            <span style="float:left;font-size:Medium">${tName}</span>
                                                            <div label="${saveLabel}" style="float:right" 
                                                                            data-dojo-type="dijit.form.Button"
                                                                            data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconSave'"
                                                                            data-dojo-attach-point="save"
                                                            ></div>
        <div label="Export" style="float:right" 
                                                                            data-dojo-attach-point="export"
                                                            ></div>
        <div label="Utilities" style="float:right"
          data-dojo-type="dijit.form.ComboButton"
          data-dojo-props="iconClass:'dijitIconFunction'"
          data-dojo-attach-point="utilityWizard">
          <div dojoType="dijit.Menu">
            <div dojoType="dijit.MenuItem" label="Add Parameters for sub step data reference"
              data-dojo-attach-point="paramWizard">
            </div>
          </div>
        </div>  
                                            </div>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region:'center'" style="height:100%;width:100%;padding:0">
      <div data-dojo-type="dijit.layout.TabContainer"
        data-dojo-attach-point="actionContainer"  style="height:100%;width:100%">

        <div data-dojo-type="dijit.layout.ContentPane"
          data-dojo-attach-point="widgetCont"   style="height:100%;width:100%" 
          title="Main" selected=true>
            Action Attributes</div>
        
        <div data-dojo-type="dijit.layout.ContentPane"
          data-dojo-attach-point="steps" style="height:100%;width:100%;padding:0"
          title="Steps">
          Action Substeps</div>

      </div>    
    </div>
  </div>
</div>

Before window resize After window resize

1 个答案:

答案 0 :(得分:2)

我调用了bordercontainer的resize方法,现在正在渲染! 为BorderContainer(bc)提供一个附加点名称,并在附加小部件的相应JS文件中,在启动后使用resize方法:

    resize: function () {
        this.bc.resize(arguments);
        this.inherited(arguments);
    }

这对我有用! :)