Question

我正在使用不同页面的网站上工作，但是所有网页都加载了一次，因此除了ajax获取数据外，不再有其他来电，除了新页面。

我不喜欢dojo，所以我想这种做法很好（如果我错了请纠正我）：

创建一个菜单和一个包含每个页面的stackContainer作为contentPane。由于我不想将所有代码和布局放在index.html中，因此我决定为每个页面创建一个自定义小部件。在一个页面上，我想放一个datagrid，所以我的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中，但不可见。如果它在第一页上完成，这在启动时可见，则可以正常工作。

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

dojo stackcontainer包含使用datagrid的自定义小部件，但dategrid没有显示

0 个答案: