0

Dojo を使用してフロントエンド UI を開発すると、頭の痛い問題が発生します。私は長い間この問題をグーグルで調べてきました。メールリストとバグトラッカーも同様です。

TabContainer を使用してページを開き、タブに切り替えると、タブの DataGrid が正しく表示されませんでした。別のタブに切り替えて、もう一度元に戻すと、グリッドが正しく表示されます。これを Declarative dojo に実装します。1 行の JavaScript コードのみ。

<script>
    function imgFormatter(s) {
        return '<img src="' + s + '"/>';
    }
</script>

状況はこのようなものです: ページを開く http://i.stack.imgur.com/QGeid.png

別のタブに切り替えて、もう一度切り替えます http://i.stack.imgur.com/OWQxR.png

コード：

<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="tab1">
         tab1
    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="Hosts">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
            <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="url: dojo.config.api2Path + '/GangliaHostMetric', urlPreventCache:true, clearOnClose:true" data-dojo-id="gangliaHostSummaryStore"></div>
            <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="region: 'center', query : {}, store:gangliaHostSummaryStore" data-dojo-id="gangliaHostSummaryGrid">
                <thead>
                    <tr>
                        <th field="hostname">hostname</th>
                        <th field="load_report" width="300" formatter="imgFormatter">Load</th>
                        <th field="mem_report" width="300" formatter="imgFormatter">Memory</th>
                        <th field="network_report" width="300" formatter="imgFormatter">Network</th>
                        <th field="cpu_report" width="300" formatter="imgFormatter">CPU</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
4

1 に答える 1

1

グリッドがタブに表示される唯一のものである場合、これらすべての BorderContainers と ContentPanes は必要なく、グリッドを TabContainer の directChild として配置します。

それ以外の場合、これは有名な問題です。これを解決する 1 つの方法は、onLoad タブの後にプログラムでグリッドを作成することです。つまり、基本的にはタブの onLoad イベントに接続し、ここでグリッドを作成します。それを修正する別の方法は、doLayout、isLayoutContainer をいじって、親ウィジェットのサイズも指定することです。

これらすべてを使用して、問題に対する適切な解決策を見つける必要があります。さらに詳しいガイダンスが必要な場合は、irc freenode #dojo に参加することをお勧めします。そこで、あなたを一歩一歩導いてくれる人が見つかるかもしれません:)

于 2012-07-20T07:34:06.673 に答える