Помещение dgrid внутри ContentPane внутри TabContainer

Я пытался разместить сетку внутри ContentPane (созданной программно) внутри TabContainer, но пока безуспешно. Как видите, я попытался установить сетку с помощью свойства содержимого ContentPane, но это не сработало. Вот мой код, спасибо.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body class = "claro">
    <link rel="stylesheet"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" />
    <!-- load Dojo -->
    <script>
        dojoConfig = {
            parseOnLoad : true
        }
    </script>
    <script src="/xampp/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>

    <div style="width: 350px; height: 290px">
        <div id="tc1-prog"></div>
    </div>

    <script>
        require(["dojo/_base/declare", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry", "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry) {

            var tc = new TabContainer({
                style : "height: 100%; width: 100%;"
            }, "tc1-prog");

            var cp1 = new ContentPane({
                title : "Food",
                content : "We offer amazing food"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title : "Drinks",
                content : "We are known for our drinks."
            });
            tc.addChild(cp2);

            var data = [{
                first : 'Bob',
                last : 'Barker',
                age : 89
            }, {
                first : 'Vanna',
                last : 'White',
                age : 55
            }, {
                first : 'Pat',
                last : 'Sajak',
                age : 65
            }];

            var grid = new Grid({
                columns : {
                    first : 'First Name',
                    last : 'Last Name',
                    age : 'Age'
                }
            }, 'grid');
            grid.renderArray(data);
            grid.startup();


            var cp3 = new ContentPane({
                title : "Grid",
                content : grid
            });
            tc.addChild(cp3);

            tc.startup();
        });
    </script>

</body>


dojo dgrid
person Naci    schedule 15.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я только что вставил решение здесь, и проблем нет:

но вы должны использовать dojo/store/Memory для создания хранилища данных, а затем отображать данные в dgrid, используя grid.set("store",yourDatastore);, а не dgrid.renderArray(store), поэтому с памятью вы сможете создавать фильтры, использовать запросы и поиск в хранилище, а также автоматически отображать результаты в dgrid .

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }
    ]
}, ["dojo/_base/declare", 
    "dijit/layout/TabContainer", 
    "dijit/layout/ContentPane", 
    "dgrid/OnDemandGrid", 
    "dgrid/extensions/DijitRegistry",
    'dojo/store/Memory',
    "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry,Memory) {

            var tc = new TabContainer({
                style : "height: 100%; width: 100%;"
            }, "tc1-prog");

            var cp1 = new ContentPane({
                title : "Food",
                content : "We offer amazing food"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title : "Drinks",
                content : "We are known for our drinks."
            });
            tc.addChild(cp2);

            var data = [{
                first : 'Bob',
                last : 'Barker',
                age : 89
            }, {
                first : 'Vanna',
                last : 'White',
                age : 55
            }, {
                first : 'Pat',
                last : 'Sajak',
                age : 65
            }];

            var grid = new Grid({
                columns : {
                    first : 'First Name',
                    last : 'Last Name',
                    age : 'Age'
                }
            }, 'grid');
            
            // create memory store
            store = new Memory({data: data});

            // fill dgrid with datastore     
            grid.set("store",store);
            grid.startup();


            var cp3 = new ContentPane({
                title : "Grid",
                content : grid
            });
            tc.addChild(cp3);

            tc.startup();
        });
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div style="width: 350px; height: 290px">
   <div id="tc1-prog"></div>
  </div>
</div>

Fiddle, если хотите

person Spring    schedule 16.08.2016
comment
@Naci Я добавил несколько рекомендаций (Memory Store), пожалуйста, посмотрите мой ответ, если это поможет, отметьте его как решенный, спасибо - person Spring; 17.08.2016

arrow_upward
0
arrow_downward

dgrid не является частью dojo API. Вам нужно добавить ссылку на dgrid скрипты, чтобы иметь возможность создавать dgrid Grid.

person T Kambi    schedule 15.08.2016
comment
Я уже положил dgrid в папку dojo, и ошибок со ссылками нет. - person Naci; 15.08.2016
comment
как насчет конфигурации для dgrid, вы тоже добавили это? копирования в папку/веб-проект недостаточно. - person T Kambi; 16.08.2016
comment
Спасибо @bRIMOsBor! Я не знаю, почему я не видел никаких ошибок в консоли, но ваш код очень хорош - person Naci; 16.08.2016