dojo小部件不会渲染，除非浏览器窗口被调整大小 [英] dojo widget doesn't render unless browser window is resized

问题描述

除了浏览器（我正在使用Chrome）窗口被调整大小或开发者工具打开之外，该小部件不会在TabContainer中呈现。我已经尝试了在早期线程中提供的解决方案，例如设置BorderContainer，TabContainer和ContentPanes的高度和宽度，但没有任何区别。以下是我的代码片段。附加点步骤我附加某些数据。此选项卡步骤是问题。任何解决方案？以下是我的代码...

The widget does not get rendered in the TabContainer unless the browser(I'm using Chrome) window is resized or Developer tool is opened. I have tried the solutions provided on earlier threads like setting the height and width of the BorderContainer, TabContainer and ContentPanes but there is no difference. The following is my code snippet. To the attachpoint "steps" I'm attaching certain data. This tab "Steps" is the problem. Any solution? Below is my code...

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

推荐答案

我调用了bordercontainer的resize方法，现在它呈现！
向BorderContainer（bc）提供一个附加点名称，在附加窗口小部件的对应的JS文件中，启动后使用resize方法：

I called the resize method of bordercontainer and now it's rendering! Provide an attachpoint name to the BorderContainer (bc), and in the corresponding JS file from where you are attaching the widget, use the resize method after startup:

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

这对我有用！ ：）

这篇关于dojo小部件不会渲染，除非浏览器窗口被调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！