0

私はさまざまなページを持つ Web サイトで作業していますが、すべてが一度読み込まれるため、新しいページではなく ajax フェッチ データを除いて、残りの呼び出しはもうありません。

私は道場にあまり詳しくないので、このアプローチは良いと思います (間違っていたら訂正してください):

menu と、各ページを contentPane として含む stackContainer を作成します。すべてのコードとレイアウトを index.html に置きたくないので、すべてのページにカスタム ウィジェットを作成することにしました。1 つのページにデータグリッドを配置したいので、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 の「2 ページ目」をクリックしても、データグリッドが表示されないことです。ただし、dom には存在しますが、表示されません。起動時に表示される最初のページで実行すると、機能します。

一般的な質問: - これはこの目的で Dojo を使用する方法ですか? (ウィジェットを使用して異なるページを表す) - stackContainer の子を選択したときにウィジェットを作成する方法はありますか? そうすれば、最初にページを表示してから、データグリッドを作成できます。

4

0 に答える 0