0

我正在一个具有不同页面的网站上工作，但所有页面都加载一次，因此不再调用休息，除了 ajax 获取数据，而不是新页面。

我对dojo不太熟悉，所以我想这种方法很好（如果我错了，请纠正我）：

制作一个菜单和一个包含每个页面的 stackContainer 作为 contentPane。由于我不想将所有代码和布局都放在 index.html 中，因此我决定为每个页面创建一个自定义小部件。在一个页面上，我想放置一个数据网格，所以我的 customWidget 有一个用于数据网格的声明性容器，该容器通过 ajax 调用填充了数据。

问题是：我的数据网格已创建，但当我转到我的 stackContainer 的那个 contentPane 时不可见。

<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();
    });
});

这是我的 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();


                });
            }
        });
    }
);

我重命名并跳过了部分代码，因此可能是我删除了太多代码。

问题是：单击 menuItem '第二页'时，我看不到我的数据网格。虽然，它存在于 dom 中，但不可见。如果它是在启动时可见的第一页上完成的，它就可以工作。

一般问题： - 这是为此目的使用道场的方式吗？（使用小部件来表示不同的页面） - 当您选择 stackContainer 的子项时，有没有办法创建小部件？这样，我可以先显示页面，然后制作我的数据网格。

4

0 回答 0