dojo stackcontainer contains custom widget that us

问题:

I'm working on a website with different pages, but all loaded once, so no rest calls anymore, except for ajax fetching data, not for new pages.

I'm not that familiour with dojo, so I guess that this approach is good (please correct me if I'm wrong):

Make a menu and a stackContainer containing each page as a contentPane. Since I don't want to put all my code and layout in index.html, I decided to create a custom widget for every page. On one page, I want to put a datagrid, so my customWidget has a declarative container for a datagrid, which is filled up with data by an ajax-call.

Problem is: my datagrid is created, but not visible when I go to that contentPane of my stackContainer.

<div id="menu" data-dojo-type="dijit/Menu">
    <div id="first_page_menu" data-dojo-type="dijit/MenuItem">First page</div>
    <div id="second_page_menu" data-dojo-type="dijit/MenuItem">Second page</div>
</div>


<div data-dojo-type="dijit/layout/StackContainer" id="stackContainer">
    <div data-dojo-type="dijit/layout/ContentPane" title="first page" id="first_page_cp">
        content
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="second page" id="second_page_cp">
        <div data-dojo-type='myWidget/pageWithDatagrid'></div>
    </div>
</div>

<script>
require([
    "dojo/dom",
    "dijit/registry",
    "dijit/Menu",
    "dijit/MenuItem",
    "dojo/parser",
    "dojo/ready",
    "dijit/form/Button",
    "dijit/form/TextBox",
    "myWidget/pageWithDatagrid",
    "dijit/form/DateTextBox", "dojo/date/locale",   "dijit/layout/StackContainer", "dijit/layout/StackController", "dijit/layout/ContentPane"
], function(dom, registry, Menu, MenuItem, parser, ready, Button, TextBox, pageWithDatagrid){

    var showPage = function(event){
        var cpId = event.target.id.replace('menu_text','cp');
        var stackContainer = registry.byId('stackContainer');
        stackContainer.selectChild(cpId);
    };
    // Register click on menu to show corresponding page in stackcontainer
    var registerMenuHandlers = function(){
        var stackContainer = registry.byId('stackContainer');
        dojo.forEach(stackContainer.getChildren(), function(menu){
            registry.byId(menu.id.replace('contentpane','menu')).on('click', showPage);
        });
    };

    parser.parse();

    ready(function(){
       registerMenuHandlers();
    });
});

This is my pageWithDatagrid.js:

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_OnDijitClickMixin",
"dijit/_WidgetsInTemplateMixin",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dijit/form/Button",
"dijit/form/TextBox",
"dijit/form/DateTextBox", "dojo/date/locale"
], function(declare, _WidgetBase, _TemplatedMixin, _OnDijitClickMixin, _WidgetsInTemplateMixin, template, DataGrid, Memory, ObjectStore) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _OnDijitClickMixin], {
            templateString: "<div class='${baseClass}'><div id='the_grid' data-dojo-attach-point='theGrid'/></div>",

            startup: function(){
                var target = this.theGrid;
                dwrAjaxDao.all(function(result){
                    var dataStore = new ObjectStore({ objectStore:new Memory({ data: result }) });

                    var grid = new DataGrid({
                        store: dataStore,
                        items:result,
                        structure: [
                            {name:"ID", field:"id", width:"20%"},
                            {name:"Name", field:"name", width:"80%"}
                        ]
                    }, target); // using 'the_grid' also does not work
                    grid.startup();


                });
            }
        });
    }
);

I renamed and skipped parts of my code so it can be that I removed too much of the code.

Problem is: when clicking on the menuItem 'second page', I don't see my datagrid. Although, it's present in the dom, but not visible. If it's done on the first page, which is visible at start up, it works.

General questions: - is this the way to use dojo for this purpose? (using widgets to represent different pages) - Is there a way to create the widget when you select a child of the stackContainer? That way, I could first show the page, then make my datagrid.