Ввод dgrid внутри ContentPane внутри TabContainer

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

<!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>

источник

2016-08-15 Naci

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

но вы должны использовать 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 если вы хотите

источник

2016-08-16 14:36:32

@Naci. Я добавил некоторые рекомендации (магазин памяти), пожалуйста, см. Мой ответ, если он поможет пометить его как разрешенное, спасибо вы –

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

источник

2016-08-15 19:42:31

Я уже положил dgrid в папку додзё, и нет никаких ошибок со ссылками – Naci

, что о конфигурации для dgrid, вы добавить, что слишком , копирования в папку/веб-проект недостаточно. –

Спасибо @bRIMOsBor! Я не знаю, почему я не видел никаких ошибок в консоли, но ваш код очень хороший. – Naci

Ввод dgrid внутри ContentPane внутри TabContainer

ответ

Смежные вопросы