Несколько сеток данных DOJO не отображаются в Accordian Containers - PullRequest
Новая
       24

Несколько сеток данных DOJO не отображаются в Accordian Containers

0 голосов
/ 27 июля 2011

У меня есть страница с 3 вкладками ( dijit.layout.TabContainer ) и каждая вкладка в виде 2-3 аккордеонов ( dijit.layout.AccordionContainer ). Из одного хранилища данных я пытаюсь отобразить разные сетки в каждом из аккордеонов.

Я могу отображать данные в одном аккордеоне, но другие сетки отображаются пустыми, я даже не вижу заголовков. Если я пытаюсь отобразить несколько сеток вне вкладок / аккордеонов, это работает нормально. Не уверен, что мне здесь не хватает. 

        var jsonStore = new dojo.data.ItemFileWriteStore({ data:{
   "identifier": "rowIdentifier",
   "label": "gridIdentifier",
   "items": [
      {
        "rowIdentifier": 123,
        "gridIdentifier": "labor",
         "description": "Project Manager",
         "hours": 100.0,
         "rate": 100.0
      },
      {
      "rowIdentifier": 234,
       "gridIdentifier": "oem",
         "description": "Developer",             
         "hours": 100.0,
         "rate": 100.0
      }
   ]
} });               
            var grid1 = null;   
            var grid2 = null;
            var grid1Layout= [
                { field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
                { field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
                { field: "description", width: "auto", name: "Tier/Description", editable:true },

                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/>" }               
            ];

            grid1 = new dojox.grid.DataGrid({
                query: { gridIdentifier: 'labor' },
                store: jsonStore,
                singleClickEdit: true,
                structure: grid1Layout,
                rowsPerPage: 6
            }, 'grid1Node');  

            var grid2Layout= [
                { field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
                { field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
                { field: "description", width: "auto", name: "Tier/Description", editable:true },
                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/>" }

            ];

            grid2 = new dojox.grid.DataGrid({
                query: { gridIdentifier: 'oem' },
                store: jsonStore,
                singleClickEdit: true,
                structure: grid2Layout,
                rowsPerPage: 6
            }, 'grid2Node');


         // Call startup, in order to render the grid:
            grid1.startup();
            grid2.startup();

Ниже мой HTML 

<div style="height: 105px;">
                            <div dojoType="dijit.layout.TabContainer" style="width: 100%;"
                                doLayout="false">
                                <div dojoType="dijit.layout.ContentPane" title="Labor" selected="true">
                                    <div id="LaborAccordian" style="width:auto; height: 300px">
                                        <div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc1" selected="true">
                                            <div id="grid1Node"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc2"><div id="SubContractorLaborGridNode"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc3"><div id="VendedLaborGridNode"></div></div>
                                        </div>
                                    </div>
                                </div>
                                <div dojoType="dijit.layout.ContentPane" title="OEM products">
                                    <div id="OEMAccordian" style="width:auto; height: 300px">
                                        <div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
                                            <div dojoType="dijit.layout.ContentPane" title="Tab2 Acc1"><div id="grid2Node"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab2 Acc2" selected="true"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end of the div -->
                        </div>

У меня есть все соответствующие DOJO.requires () в. Пожалуйста, дайте мне знать, что мне не хватает, чтобы отобразить одно и то же хранилище данных, в разных вариантах в разных аккордеонных контейнерах?

Спасибо SK

Ответы [ 3 ]

0 голосов
/ 27 июля 2011

Я думаю, что то, что сказал Алекс Ченг, правильно. И следующие изменения могут решить проблему. 

<div id="grid1Node" style="height:100%"></div>
<div id="grid2Node" style="height:100%"></div>

Применение высот для контейнера узла Grid dom.

0 голосов
/ 15 марта 2013

Другое решение заключается в использовании абсолютных (не динамических) настроек высоты, например: 

<div id="grid1Node" style="height:100px"></div>
<div id="grid2Node" style="height:100px"></div>
0 голосов
/ 27 июля 2011

Из вашего описания, скорее всего, сетка создана успешно, но не отображается, потому что размерность равна 0 * 0. Это может произойти, потому что, когда сетка создается в скрытой панели аккордеона, размер сетки, содержащей Узел DOM фактически равен нулю. Поэтому, когда скрытая панель аккордеона становится видимой, размер сетки все еще равен нулю. Это также может произойти из-за того, что динамическая высота и ширина указываются в узле, содержащем сетку, с использованием CSS, например используя высоту или ширину, как 100%. Динамическая высота или ширина могут вызвать проблемы при расчете фактической высоты и ширины.

Поэтому я предлагаю сначала проверить структуру DOM с помощью Firebug, чтобы увидеть, создана ли сетка или нет. Скорее всего, вы увидите структуру DOM сетки, но она не отображается, потому что размер равен 0 * 0. Вы можете использовать Firebug, чтобы проверить это. В этом случае вы можете вручную настроить сетку на повторный расчет ее размера, используя функцию resize. Вы можете использовать dojo.connect для подключения к функции dijit.layout.AccordionPane onSelected и вызова функции resize сетки. Затем, когда выбрана страница аккордеона, сетка внутри нее автоматически изменяется.

...