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

时间：2014-09-01 12:22:43

标签： html dojo dojox.grid.datagrid

我认为问题在于这些小部件是分开的，一个是parseOnLoad = true而另一个是假的。我试过它们既真实又虚假，没有运气。我创建了三个不同的网页，其中两个包含TabContainer和DataGrid，而第三个网页如上所述组合它们。我使用了TabContainer和DataGrid的例子。我想我可能需要在TabContainer和ContentPanes加载后激活DataGrid。

我写的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>

我写的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>

我写的组合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>

1 个答案:

答案 0 :(得分：1)

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>
相关问题
最新问题