Home/ Questions/Q 8266269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:05:49+00:00

I meet a headache problems, when I use dojo to develop a frontend UI.

  • 0

I meet a headache problems, when I use dojo to develop a frontend UI. I have google this problem for a long time. So does the mailist and bugtracker.

When I open a page with TabContainer and swith to a Tab, the DataGrid in the Tab didn’t properly displayed.Now I switch to another Tab and switch back again, the grid properly displayed.I implement this in Declarative dojo. Only one line javascript code.

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

situation is like this:
Open the page
https://i.stack.imgur.com/QGeid.png

switch to another Tab and siwtch back again
https://i.stack.imgur.com/OWQxR.png

code:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IF the grid si the only thing displayed in the tab, then you don’t need all these BorderContainers and ContentPanes, put the grid as directChild of the TabContainer.

    Otherwise, it is a famous problem, one way to solve this is to create the grid programmatically after the tab onLoad. Tha means basically connecting to tab onLoad event, and create the grid here.
    Another way to fix it is to play around with doLayout, isLayoutContainer, and specify the size of the parent widget also.

    With all of this you should find a suitable solution to your problem. If you want more guidance, I’d recommand joining irc freenode #dojo. There you’ll maybe find someone to guide you step by step 🙂

    • 0