Как я могу заставить DataGrid dojo работать в контент-панели dojo, которая является частью TabContainer dojo?

Я думаю, проблема в том, что с этими виджетами раздельно, у одного есть parseOnLoad = true, а другой - false. Я попробовал их как правдивые, так и ложные, не повезло. Я создал три разных веб-страницы, два из них содержат TabContainer и DataGrid, а третий объединяет их, как указано выше. Я использовал примеры TabContainer и DataGrid, которые я нашел. Я думаю, мне может понадобиться активировать DataGrid после загрузки TabContainer и ContentPanes.Как я могу заставить DataGrid dojo работать в контент-панели dojo, которая является частью TabContainer dojo?

код из HTML страницы TabContainer я писал:

<!DOCTYPE html> 
<html dir="ltr"> 
<head> 
<title>Test Widget 2</title> 

    <style type="text/css"> 
     body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
    </style> 
    <script src="dojo-release-1.10.0/dojo/dojo.js" 
     djConfig="parseOnLoad: true"> 
    </script> 
    <script type="text/javascript"> 
     dojo.require("dijit.layout.TabContainer"); 
     dojo.require("dijit.layout.ContentPane"); 
    </script> 
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" /> 
</head> 

    <body class=" claro "> 
     <div dojoType="dijit.layout.TabContainer" style="width: 1000px; height: 300px;"> 
      <div dojoType="dijit.layout.TabContainer" title="Identity" nested="true"> 
       <div dojoType="dijit.layout.ContentPane" title="Item 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Item 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Item 3"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Security" nested="true"> 
       <div dojoType="dijit.layout.ContentPane" title="Release-Declass" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Caveats and more"> 
        Lorem ipsum and all around - second... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Source Selection" nested="true"> 
       <div dojoType="dijit.layout.ContentPane" title="Source 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Source 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Source 3"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Output Products" nested="true"> 
       <div dojoType="dijit.layout.ContentPane" title="Product 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Product 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Product 3"> 
        Lorem ipsum and all around - last... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Product 4"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Advanced" nested="true"> 
       <div dojoType="dijit.layout.ContentPane" title="Advanced 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dijit.layout.ContentPane" title="Advanced 2"> 
        Lorem ipsum and all around - second... 
       </div> 
      </div> 

     </div> 
    </body> 

</html>

код из DataGrid HTML страницы я писал:

<!DOCTYPE html> 
<html > 
<head> 
<title>Test Widget</title> 
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/claroGrid.css" /> 
    <script>dojoConfig = {async: true, parseOnLoad: false}</script> 
    <script src="dojo-release-1.10.0/dojo/dojo.js"></script> 

    <script> 
require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dijit/form/Button', 'dojo/domReady!'], 
    function(DataGrid, ItemFileReadStore, stamp, locale, Button){ 
     function formatter(){ 
      var w = new Button({ 
       label: "Click me!", 
       onClick: function() { 
        alert("Thanks for all the salmon. "); 
       } 
      }); 
      w._destroyOnRemove=true; 
      return w; 
     } 
     function formatDate(datum){ 
      /* Format the value in store, so as to be displayed.*/ 
      var d = stamp.fromISOString(datum); 
      return locale.format(d, {selector: 'date', formatLength: 'long'}); 
     } 

     var layout = [ 
      {name: 'Index', field: 'id'}, 
      {name: 'Date', field: 'date', width: 10, 
       formatter: formatDate /*Custom format, change the format in store. */ 
      }, 
      {name: 'Message', field: 'message', width: 8, 
       formatter: formatter /*Custom format, add a button. */ 
      } 
     ]; 

     var store = new ItemFileReadStore({ 
      data: { 
       identifier: "id", 
       items: [ 
        {id: 1, date: '2010-01-01'}, 
        {id: 2, date: '2011-03-04'}, 
        {id: 3, date: '2011-03-08'}, 
        {id: 4, date: '2007-02-14'}, 
        {id: 5, date: '2008-12-26'} 
       ] 
      } 
     }); 
     var grid = new DataGrid({ 
      id: 'grid', 
      store: store, 
      structure: layout, 
      autoWidth: true, 
      autoHeight: true 
     }); 
     grid.placeAt('gridContainer'); 
     grid.startup(); 
    }); 
    </script> 
</head> 
<body class="claro"> 
    <div id="gridContainer" style="width: 100%; height: 200px;"></div> 
</body> 
</html>

Код комбинированных виджетов додзе HTML страницы я написал:

<!DOCTYPE html> 
<html dir="ltr"> 
<head> 
<title>Test Widget 3</title> 

    <style type="text/css"> 
     body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
    </style> 
<!-- <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" --> 
<!--  djConfig="parseOnLoad: true"> --> 
<!-- </script> --> 
    <script type="text/javascript"> 
     dojo.require("dijit.layout.TabContainer"); 
     dojo.require("dojox.layout.ContentPane"); 
    </script> 
<!-- <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /> --> 

    <!-- Dojo stuff for the datagrid --> 
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/claroGrid.css" /> 
    <script>dojoConfig = {async: true, parseOnLoad: false}</script> 
    <script src="dojo-release-1.10.0/dojo/dojo.js"></script> 


    <script> 
require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dijit/form/Button', 'dojo/domReady!'], 
    function(DataGrid, ItemFileReadStore, stamp, locale, Button){ 
     function formatter(){ 
      var w = new Button({ 
       label: "Click me!", 
       onClick: function() { 
        alert("Thanks for all the salmon. "); 
       } 
      }); 
      w._destroyOnRemove=true; 
      return w; 
     } 
     function formatDate(datum){ 
      /* Format the value in store, so as to be displayed.*/ 
      var d = stamp.fromISOString(datum); 
      return locale.format(d, {selector: 'date', formatLength: 'long'}); 
     } 

     var layout = [ 
      {name: 'Index', field: 'id'}, 
      {name: 'Date', field: 'date', width: 10, 
       formatter: formatDate /*Custom format, change the format in store. */ 
      }, 
      {name: 'Message', field: 'message', width: 8, 
       formatter: formatter /*Custom format, add a button. */ 
      } 
     ]; 

     var store = new ItemFileReadStore({ 
      data: { 
       identifier: "id", 
       items: [ 
        {id: 1, date: '2010-01-01'}, 
        {id: 2, date: '2011-03-04'}, 
        {id: 3, date: '2011-03-08'}, 
        {id: 4, date: '2007-02-14'}, 
        {id: 5, date: '2008-12-26'} 
       ] 
      } 
     }); 
     var grid = new DataGrid({ 
      id: 'grid', 
      store: store, 
      structure: layout, 
      autoWidth: true, 
      autoHeight: true 
     }); 
     grid.placeAt('gridContainer'); 
     grid.startup(); 
    }); 
    </script> 
</head> 

    <body class="claro"> 
     <div dojoType="dijit.layout.TabContainer" style="width: 1000px; height: 300px;"> 
      <div dojoType="dijit.layout.TabContainer" title="Identity" nested="true"> 
       <div dojoType="dojox.layout.ContentPane" title="Item 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Item 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Item 3"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Security" nested="true"> 
       <div dojoType="dojox.layout.ContentPane" title="Release-Declass" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Caveats and more"> 
        <div id="gridContainer" style="width: 100%; height: 200px;"></div> 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Source Selection" nested="true"> 
       <div dojoType="dojox.layout.ContentPane" title="Source 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Source 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Source 3"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Output Products" nested="true"> 
       <div dojoType="dojox.layout.ContentPane" title="Product 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Product 2"> 
        Lorem ipsum and all around - second... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Product 3"> 
        Lorem ipsum and all around - last... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Product 4"> 
        Lorem ipsum and all around - last... 
       </div> 
      </div> 

      <div dojoType="dijit.layout.TabContainer" title="Advanced" nested="true"> 
       <div dojoType="dojox.layout.ContentPane" title="Advanced 1" selected="true"> 
        Lorem ipsum and all around... 
       </div> 
       <div dojoType="dojox.layout.ContentPane" title="Advanced 2"> 
        Lorem ipsum and all around - second... 
       </div> 
      </div> 

     </div> 
    </body> 

</html>

источник

2014-09-01 DemiSheep

Я также заметил, что у вас есть: dojo.require ("dijit.layout.TabContainer"); dojo.require ("dojox.layout.ContentPane"); Наверху. Не могли бы вы переместить их в инструкцию require. Похоже, вы пытаетесь потребовать этот виджет перед загрузкой Dojo. – xangxiong

@xangxiong Спасибо за ваш вклад и ваш ответ, я проверю эти вещи, которые вы привлекли к моему вниманию, и сообщите, когда смогу, спасибо за вашу помощь! – DemiSheep

@xangxiong У меня проблемы: я переместил два элемента dojo.require в основное требование require, но я думаю, что у меня возникают проблемы, поскольку они с точечной нотацией вместо slaces: dijit.layout.TabContainer versus dijit/layout/TabContainer. Я использую dojo 1.10, поэтому я думаю, что они должны быть с/ – DemiSheep

В dojox.layout.ContentPane должно быть событие onShow. Подключитесь к этому событию на ContentPane, который вы хотите создать DataGrid. Когда вызывается onShow, вы можете вызвать часть кода, которая создаст Grid. Если вы попытаетесь создать Grid до того, как будет показана эта вкладка, gridContainer может не присутствовать в сетке для размещения.

<div dojoType="dojox.layout.ContentPane" title="Caveats and more"> 
    <div id="gridContainer" style="width: 100%; height: 200px;"></div> 
    <script type="dojo/connect" event="onShow"> 
     function formatter(){ 
      var w = new dijit.form.Button({ 
       label: "Click me!", 
       onClick: function() { 
        alert("Thanks for all the salmon. "); 
       } 
      }); 
      w._destroyOnRemove=true; 
      return w; 
     } 
     function formatDate(datum){ 
      /* Format the value in store, so as to be displayed.*/ 
      var d = dojo.date.stamp.fromISOString(datum); 
      return dojo.date.locale.format(d, {selector: 'date', formatLength: 'long'}); 
     } 

     var layout = [ 
      {name: 'Index', field: 'id'}, 
      {name: 'Date', field: 'date', width: 10, 
       formatter: formatDate /*Custom format, change the format in store. */ 
      }, 
      {name: 'Message', field: 'message', width: 8, 
       formatter: formatter /*Custom format, add a button. */ 
      } 
     ]; 

     var store = new dojo.data.ItemFileReadStore({ 
      data: { 
       identifier: "id", 
       items: [ 
        {id: 1, date: '2010-01-01'}, 
        {id: 2, date: '2011-03-04'}, 
        {id: 3, date: '2011-03-08'}, 
        {id: 4, date: '2007-02-14'}, 
        {id: 5, date: '2008-12-26'} 
       ] 
      } 
     }); 
     var grid = new dojox.grid.DataGrid({ 
      id: 'grid', 
      store: store, 
      structure: layout, 
      autoWidth: true, 
      autoHeight: true 
     }, 'gridContainer'); 
     grid.startup(); 
    </script> 
</div>

источник

2014-09-09 07:07:50 xangxiong

Как я могу заставить DataGrid dojo работать в контент-панели dojo, которая является частью TabContainer dojo?

ответ

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