当前位置： 文江博客话题详情

Dojo 手风琴容器在折叠时以编程方式显示网格

发布于 2024-11-08 11:06:01 字数 6002 浏览 0 评论 0原文

我昨天开始学习 Dojo，所以请原谅我的无知...

我的期望是动态创建一个手风琴并在手风琴的内容窗格中显示一个网格。为此，我创建了带有 2 个内容窗格的手风琴小部件，当内容窗格经过 onShow 处理时，我创建了一个自定义小部件并添加到内容窗格（这是必需的，即我无法直接添加数据网格）。创建自定义网格后，它会创建一个计时器，并在计时器结束时填充网格并显示它。

现在，如果您在浏览器中运行它（当然在正确的路径中使用 dojo），您会注意到在大约 8 秒超时后，手风琴窗格显示网格（以一种笨拙的方式，我仍然需要弄清楚为什么，任何帮助会很大）。但是：

如果我在刷新后立即打开第二个窗格（在 8 秒内），并保持第一个窗格关闭直到 8 秒后，然后打开第一个窗格，则似乎没有任何内容。 Dojo专家可以帮助我理解为什么吗？谢谢！

<html>

    <head>
        <style type="text/css">
            @import "dojo/dijit/themes/tundra/tundra.css";
            @import "dojo/dijit/themes/tundra/layout/AccordionContainer.css";
            @import "dojo/resources/dojo.css"
        </style>
        <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
    </head>
    <script>
        /*
            The source is organized like this:
                head;
                script;
                    timer proc;
                    grid widget;
                        constructor, postCreate, onElapse method where the grid is populated.
                    Accordion widget:
                        construct, postCreate panes are created and added.
        */

        // Mock backend
        var timerThis = undefined;
        function onElapse()
        {
            timerThis.onElapse();
        }

        // Grid Widget declaration.
        dojo.provide("widgets.GridWidget");
        dojo.require("dijit._Widget");
        dojo.require("dijit._Templated");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");

        // Grid widget class.
        dojo.declare("widgets.GridWidget", [ dijit._Widget, dijit._Templated ], {

            // Members
            templateString : '<div id="${id}" dojoAttachPoint="widgets_GridWidget"></div>',
            srcNodeRef : null,
            grid : null,
            timer : null,

            // Constructor
            constructor : function(params, srcNodeRef)
            {
                this.inherited(arguments);
                this.id = "myUniqueId";
                this.srcNodeRef = srcNodeRef;

                // Copy this so timer onElapse() can access.
                timerThis = this;
                this.timer = setTimeout("onElapse()", 8000);
            },

            // Member invoked from global onElapse.
            onElapse : function()
            {
                var layout =
                [
                    { name: 'Name', field: 'name', width: 'auto' },
                    { name: 'Color', field: 'color', width: 'auto' }
                ];

                var store =
                {
                    data :
                    {
                        items :
                        [
                            { name : 'John Doe', color: 'green' },
                            { name : 'Jane Doe', color: 'red' }
                        ]
                    }
                };

                // Create a grid and startup.
                this.grid = new dojox.grid.DataGrid({
                    store: new dojo.data.ItemFileReadStore(store),
                    clientSort: true,
                    rowSelector: '20px',
                    structure: layout
                }, this.srcNodeRef);
                this.widgets_GridWidget.appendChild(this.grid.domNode);
                this.grid.startup();
            }
        });

                // Create an accordion container that will display the grid in one of its pane.
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.declare("widgets.AccordionWidget", [ dijit._Widget, dijit._Templated ],
        {
            templateString : '<div id="AccordionWidget" dojoAttachPoint="widgets_AccordionWidget"></div>',
            srcNodeRef : null,
            constructor : function(params, srcNodeRef)
            {
                this.inherited(arguments);
                this.srcNodeRef = srcNodeRef;
            },
            postCreate : function()
            {
                this.inherited(arguments);

                var container = new dijit.layout.AccordionContainer({
                        style : "height: 100px"
                    },
                    this.widgets_AccordionWidget.id + "_Container");


                var panes =
                [
                    new dijit.layout.ContentPane({
                        title: "First pane"
                    }),
                    new dijit.layout.ContentPane({
                        title: "Second pane"
                    })
                ];
                container.addChild(panes[0]);
                container.addChild(panes[1]);

                this.widgets_AccordionWidget.appendChild(container.domNode);
                // Scope closure
                {
                    var pane = panes[0];
                    // var pane = panes[1];
                    var wdg = undefined;
                    pane.set("onShow",
                        function()
                        {
                            if (wdg === undefined)
                            {
                                wdg = new widgets.GridWidget({}, pane.id + "_1");
                                wdg.placeAt(pane.domNode);
                            }
                        }
                    );
                }
                this.widgets_AccordionWidget.appendChild(container.domNode);
                container.startup();
            }
        });

        dojo.addOnLoad(function()
        {
            dojo.require('dojo.parser');
        });

        dojo.ready(function()
        {
            dojo.parser.parse();
            var wdg = new widgets.AccordionWidget({}, dojo.byId("root"));
        });

    </script>
    <body class="tundra"> 
        <div id="root"></div>
    </body>
</html>
原文

I started learning Dojo yesterday, so please excuse my ignorance...

My expectation is to create an accordion dynamically and show a grid in the content pane of the accordion. To do that I create the accordion widget with 2 content panes and when the content pane is onShow handled, I create a custom widget and add to the content pane (this is a necessity, i.e., I cannot add a data grid directly). Once the custom grid is created it creates a timer and on the timer's elapse I populate the grid and show it.

Now, if you run this in a browser (of course with dojo in the right path), you would notice after about 8 seconds timeout, the accordion pane shows the grid (in a clumsy way, which I still need to figure why, any help would be great). But then:

If I open the second pane immediately (well within 8 seconds) after refresh and keep first pane closed until after 8 seconds and then open the first pane, nothing seems to be present. Could Dojo experts kindly help me understand why? Thanks!

<html>

    <head>
        <style type="text/css">
            @import "dojo/dijit/themes/tundra/tundra.css";
            @import "dojo/dijit/themes/tundra/layout/AccordionContainer.css";
            @import "dojo/resources/dojo.css"
        </style>
        <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
    </head>
    <script>
        /*
            The source is organized like this:
                head;
                script;
                    timer proc;
                    grid widget;
                        constructor, postCreate, onElapse method where the grid is populated.
                    Accordion widget:
                        construct, postCreate panes are created and added.
        */

        // Mock backend
        var timerThis = undefined;
        function onElapse()
        {
            timerThis.onElapse();
        }

        // Grid Widget declaration.
        dojo.provide("widgets.GridWidget");
        dojo.require("dijit._Widget");
        dojo.require("dijit._Templated");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");

        // Grid widget class.
        dojo.declare("widgets.GridWidget", [ dijit._Widget, dijit._Templated ], {

            // Members
            templateString : '<div id="${id}" dojoAttachPoint="widgets_GridWidget"></div>',
            srcNodeRef : null,
            grid : null,
            timer : null,

            // Constructor
            constructor : function(params, srcNodeRef)
            {
                this.inherited(arguments);
                this.id = "myUniqueId";
                this.srcNodeRef = srcNodeRef;

                // Copy this so timer onElapse() can access.
                timerThis = this;
                this.timer = setTimeout("onElapse()", 8000);
            },

            // Member invoked from global onElapse.
            onElapse : function()
            {
                var layout =
                [
                    { name: 'Name', field: 'name', width: 'auto' },
                    { name: 'Color', field: 'color', width: 'auto' }
                ];

                var store =
                {
                    data :
                    {
                        items :
                        [
                            { name : 'John Doe', color: 'green' },
                            { name : 'Jane Doe', color: 'red' }
                        ]
                    }
                };

                // Create a grid and startup.
                this.grid = new dojox.grid.DataGrid({
                    store: new dojo.data.ItemFileReadStore(store),
                    clientSort: true,
                    rowSelector: '20px',
                    structure: layout
                }, this.srcNodeRef);
                this.widgets_GridWidget.appendChild(this.grid.domNode);
                this.grid.startup();
            }
        });

                // Create an accordion container that will display the grid in one of its pane.
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.declare("widgets.AccordionWidget", [ dijit._Widget, dijit._Templated ],
        {
            templateString : '<div id="AccordionWidget" dojoAttachPoint="widgets_AccordionWidget"></div>',
            srcNodeRef : null,
            constructor : function(params, srcNodeRef)
            {
                this.inherited(arguments);
                this.srcNodeRef = srcNodeRef;
            },
            postCreate : function()
            {
                this.inherited(arguments);

                var container = new dijit.layout.AccordionContainer({
                        style : "height: 100px"
                    },
                    this.widgets_AccordionWidget.id + "_Container");


                var panes =
                [
                    new dijit.layout.ContentPane({
                        title: "First pane"
                    }),
                    new dijit.layout.ContentPane({
                        title: "Second pane"
                    })
                ];
                container.addChild(panes[0]);
                container.addChild(panes[1]);

                this.widgets_AccordionWidget.appendChild(container.domNode);
                // Scope closure
                {
                    var pane = panes[0];
                    // var pane = panes[1];
                    var wdg = undefined;
                    pane.set("onShow",
                        function()
                        {
                            if (wdg === undefined)
                            {
                                wdg = new widgets.GridWidget({}, pane.id + "_1");
                                wdg.placeAt(pane.domNode);
                            }
                        }
                    );
                }
                this.widgets_AccordionWidget.appendChild(container.domNode);
                container.startup();
            }
        });

        dojo.addOnLoad(function()
        {
            dojo.require('dojo.parser');
        });

        dojo.ready(function()
        {
            dojo.parser.parse();
            var wdg = new widgets.AccordionWidget({}, dojo.byId("root"));
        });

    </script>
    <body class="tundra"> 
        <div id="root"></div>
    </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

九公里浅绿 2024-11-15 11:06:01

请尝试这个复制粘贴代码..
我正在手风琴窗格的显示上显示网格。我无法实现的一件事是我无法根据网格高度调整窗格的大小。

请告诉我这是否有用。
谢谢

<html>
<head>
<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";   
</style>        
<script src="djlib/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad:true"></script>   
 <link rel="stylesheet" href="djlib/dojox/grid/resources/Grid.css" type="text/css" />
<body class="claro">
    <div id="root" ></div>
    <div id="test"></div>
</body>

<script>            
    dojo.require("dijit._Widget");
    dojo.require("dijit._Templated");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.AccordionPane");
    dojo.require('dijit.layout.ContentPane');

    dojo.declare("widgets.Ackordian", [ dijit.layout.AccordionContainer ], {
        style:'height:300px',
        id:'Ackordian1',
        postCreate:function(){
            this.inherited(arguments);
            this.startup();
            this.addChild(
                new dijit.layout.AccordionPane({
                    //content : "<p>HI There2</p>",
                    style:'height:100px',
                    title:'H!',
                    widgetsInTemplate:true
                })
            )
            this.addChild(
                new dijit.layout.AccordionPane({
                    style:'height:100px',
                    //content : "<p>HI There2</p>",
                    title:'HI2'

                })
            )                   
            dojo.forEach(this.getChildren(),function(pane,indx){

                dojo.mixin(pane,{
                    onShow:function(){
                        if(!pane.grid){                         
                            pane.grid = getGrid();
                            pane.setContent(pane.grid.domNode);
                        }
                    }
                })
            })
        }
    });

    dojo.addOnLoad(function(){
        new widgets.Ackordian({}).placeAt('root');              
    })
    function getGrid(layout,str){
        var layout =
            [
                { name: 'Name', field: 'name', width: 'auto' },
                { name: 'Color', field: 'color', width: 'auto' }
            ];

            var str =
            {
                data :
                {
                    items :
                    [
                        { name : 'John Doe', color: 'green' },
                        { name : 'Jane Doe', color: 'red' }
                    ],
                    identifier:'color',
                    label:'name'
                }

            };
        return new dojox.grid.DataGrid({
            style:'height:100px',
            store: new dojo.data.ItemFileReadStore(str),
            clientSort: true,
            rowSelector: '20px',
            structure: layout
        })

    }
</script>


</html>

please try this copy paste code..
im diplaying the grid on show of the accordian pane. One thing i could not achive is that i could not resize the pane according to the grid height.

Please let me know if this useful.
Thanks

<html>
<head>
<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";   
</style>        
<script src="djlib/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad:true"></script>   
 <link rel="stylesheet" href="djlib/dojox/grid/resources/Grid.css" type="text/css" />
<body class="claro">
    <div id="root" ></div>
    <div id="test"></div>
</body>

<script>            
    dojo.require("dijit._Widget");
    dojo.require("dijit._Templated");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.AccordionPane");
    dojo.require('dijit.layout.ContentPane');

    dojo.declare("widgets.Ackordian", [ dijit.layout.AccordionContainer ], {
        style:'height:300px',
        id:'Ackordian1',
        postCreate:function(){
            this.inherited(arguments);
            this.startup();
            this.addChild(
                new dijit.layout.AccordionPane({
                    //content : "<p>HI There2</p>",
                    style:'height:100px',
                    title:'H!',
                    widgetsInTemplate:true
                })
            )
            this.addChild(
                new dijit.layout.AccordionPane({
                    style:'height:100px',
                    //content : "<p>HI There2</p>",
                    title:'HI2'

                })
            )                   
            dojo.forEach(this.getChildren(),function(pane,indx){

                dojo.mixin(pane,{
                    onShow:function(){
                        if(!pane.grid){                         
                            pane.grid = getGrid();
                            pane.setContent(pane.grid.domNode);
                        }
                    }
                })
            })
        }
    });

    dojo.addOnLoad(function(){
        new widgets.Ackordian({}).placeAt('root');              
    })
    function getGrid(layout,str){
        var layout =
            [
                { name: 'Name', field: 'name', width: 'auto' },
                { name: 'Color', field: 'color', width: 'auto' }
            ];

            var str =
            {
                data :
                {
                    items :
                    [
                        { name : 'John Doe', color: 'green' },
                        { name : 'Jane Doe', color: 'red' }
                    ],
                    identifier:'color',
                    label:'name'
                }

            };
        return new dojox.grid.DataGrid({
            style:'height:100px',
            store: new dojo.data.ItemFileReadStore(str),
            clientSort: true,
            rowSelector: '20px',
            structure: layout
        })

    }
</script>


</html>
回复 原文
~没有更多了~

关于作者

相思碎

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文