如何讓我的dojo DataGrid在作爲dojo TabContainer一部分的dojo ContentPane中工作？

我認爲問題在於，這些小部件分離後，其中一個parseOnLoad = true，而另一個則爲false。我試過他們都是真的，沒有運氣就是假。我創建了三個不同的網頁，其中兩個自己包含TabContainer和DataGrid，而第三個則如上所述組合它們。我使用TabContainer和DataGrid的例子，我發現。我想我可能需要在加載TabContainer和ContentPanes後激活DataGrid。如何讓我的dojo DataGrid在作爲dojo TabContainer一部分的dojo ContentPane中工作？

代碼從TabContainer的HTML頁面中我寫道：

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

代碼從數據網格的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>

結合Dojo部件的代碼的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 2014-09-09 16:08:25

@xiongxiong謝謝您的反饋和答案，我會檢查您引起我注意的這些事情，並在可能時通知您 - 感謝您的幫助！ – DemiSheep 2014-09-09 16:54:35

@xiongxiong我遇到了一些麻煩 - 我將兩個dojo.require項目移到了主要require聲明中，但我覺得我遇到了麻煩，因爲它們使用點符號而不是slaces：dijit.layout.TabContainer與dijit/layout/TabContainer的。我使用dojo 1.10，所以我認爲他們必須使用/ – DemiSheep 2014-09-10 18:13:27

dojox.layout.ContentPane應該有一個onShow事件。連接到您想要創建DataGrid的ContentPane上的該事件。當onShow被調用時，您可以觸發將創建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

如何讓我的dojo DataGrid在作爲dojo TabContainer一部分的dojo ContentPane中工作？

回答

相關問題