在我执行 Inspect Element 之前，Dojo TabContainer 没有正确格式化

Question

我有一个带有几行数据的 Dojo DataGrid。当我单击一行时，我在另一个 <div> 中创建了一个 TabContainer。这是它最终的样子：

TabContainer 的格式不正确。但是，在我执行“检查元素”之后，格式会自行更正：

但是，提交按钮会在格式更正后消失。

这是我用来创建 DataGrid 和 TabContainer 的代码：

<div id="r_body">
    <div id="r_list">

    </div>
    <div id="r_form">
        <div data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="">
            {% csrf_token %}
            <div>
                <div id="r_tab_container"></div>
            </div>
            <div>
                <p></p>
                <button id="submit_parameters" dojoType="dijit/form/Button" type="submit" name="submitButton" value="Submit">
                    Submit
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    require([
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojox/grid/DataGrid" ,
        "dojo/data/ItemFileWriteStore" ,
        "dojo/dom",
        "dojo/domReady!"
    ], function(BorderContainer, ContentPane, DataGrid, ItemFileWriteStore, dom){
        // create a BorderContainer as the top widget in the hierarchy
        var bc = new BorderContainer({
            style: "height: 500px; width: 230px;"
        }, "r_list");

        /*set up data store*/
        var data = {
          identifier: "id",
          items: []
        };


        data.items.push({ id: 'some_id', description: 'some_description',

        var store = new ItemFileWriteStore({data: data});

        /*set up layout*/
        var layout = [[
            {'name': 'Title', 'field': 'description', 'width': '200px', 'noresize': true}
        ]];

        /*create a new grid*/
        var r_list_grid = new DataGrid({
            region: "left",
            id: 'r_list_grid',
            store: store,
            structure: layout,
            rowSelector: '0px'
        });

        bc.addChild(rt_list_grid);

        bc.startup();

        list_grid.on("RowClick", gridRowClick);
        function gridRowClick(evt){
            var idx = evt.rowIndex;
            var rowData = list_grid.getItem(idx);
            var r_url = rowData['url'][0];
            var r_id = rowData['id'][0]

            require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/ready", "dojo/domReady!"],
                    function(dom, xhr, domForm, TabContainer, ContentPane, ready){
                var url = window.location.pathname + "dev/" + r_id + "/" + r_url + "/";
                xhr(url, {
                    method: "get"
                }).then(
                    function(response){
                        var json_response = JSON.parse(response);
                        var fields_dict = json_response['fields_dict'];
                        var tc = new TabContainer({
                            style: "height: 100%; width: 100%;"
                        }, "r_tab_container");

                        for(var key in fields_dict) {
                            var content_string = '';
                            var fields = fields_dict[key];
                            for(var field in fields) content_string += '<div>' + field + '</div>';
                            var tcp = new ContentPane({
                                 title: key,
                                 content: content_string
                            });
                            tc.addChild(tcp);
                        }

                        tc.startup();
                    },
                    function(error){
                        //Error stuff
                    }
                );
            });
        }
    });
</script>

那么这里发生了什么以及如何修复 TabContainer 格式？谢谢！

Answer 1

在完成tc.startup(); 之后，我必须执行tc.resize();