0

ウィジェットをインスタンス化するときに「高さ」がどのように機能するかを理解しようとしています。なかなか行かないなぁ…

現時点では、次のような単純な HTML ページがあります。

</head>
<body class="claro"><div id="appContainer"></div></body>
</html>

CSS は次のようになります。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#appContainer {
    height: 100%;
}

私のアプリが起動すると、これが起こります（これは単純化されています）：

 // Create the "application" object, and places them in the right spot. 
 appContainer = new BorderContainer( {} , 'appContainer');

そのままにしておくと、アプリのサイズとすべてが適切になります。

** Q1: html、body、#appContainer の高さを指定する必要があるのはなぜですか?

で、〜がある：

 // Create the new BookingDojo application
 bookingDojo = new BookingDojo( { id: 'bookingDojo', region: 'center'  } );
 appContainer.addChild( bookingDojo );

そして最後に：

 appContainer.startup();

BookingDojo には次の CSS があります。

#bookingDojo {
   height: 100%;
}

.bookingDojo {
  height: 100%;
}

そして、このテンプレートを使用します：

templateString: '' + 
    '<div>' + 
    '  <div class="bookingDojo" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: \'headline\'">' + 

    '    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: \'center\', tabPosition: \'left-h\'">' + 
    '      <div data-dojo-type="hotplate.bd.Settings" data-dojo-props="title: \'Settings\'">Settings</div>' + 
    '      <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title: \'attempt\', tabPosition: \'top\'" data-dojo-attach-point="settingsTab">' + 
    '        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'One\'">ONE</div>' + 
    '        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'Two\'">TWO</div>' + 
    '      </div>' + 
    '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Two\'">Section Two</div>' + 
    '      <div data-dojo-type="hotplate.bd.Dashboard" data-dojo-props="title: \'Dashboard\'">Section One</div>' + 
    '    </div>'+ 
    '  </div>' + 
    '</div>',

ウィジェット内の class="bookingDojo" に注意してください。

** Q2: CSS から #bookingDojo または .bookingDojo を削除すると、アプリが正しくレンダリングされません。

つまり、高さ 0 で表示されるため、ダッシュボードを適切にレンダリングできないという問題もありますが、それは別の投稿を追加した別の (おそらく関連する) 話です。

** Q3: 「ウィジェットの高さ」の問題について誰か説明してくれませんか? ウィジェットには startup() が必要であることは承知しており、内部ウィジェットを作成して非表示にすると、resize() が必要になることも承知しています。しかし、ウィジェットを表示するのに何度も苦労していることに気付いたので (そして、CSS、doLayout、サイズ変更などを試してみました)、明らかに、それだけでは知る必要がありません。

どうもありがとう、

メルク。

4

1 に答える 1