如何将 Dojox.grid 放入 dijit.Dialog

Posted

技术标签:

【中文标题】如何将 Dojox.grid 放入 dijit.Dialog【英文标题】:How to put a Dojox.grid in a dijit.Dialog 【发布时间】:2009-08-03 15:39:27 【问题描述】:

我在这里阅读了有关 dojox.Grid 的帖子,包括有关 tabcontainer 的帖子,但它似乎并没有解决我的问题。

我有一个网格,我正在以编程方式添加它,如果网格位于“主”标记中,它会起作用,但如果我将网格放在对话框中,它就会停止显示。

关于为什么的任何想法?使用道场 1.3.1。

dijit.byId("myDialog").show();
var gridStore = new dojo.data.ItemFileReadStore(
      data : 
        identifier : "id",
        items      : [
                      "id" : 1, "label" : "foo",
                      "id" : 2, "label" : "bar",
                      "id" : 3, "label" : "baz"
        ]
      
    );

    /* A simple layout that specifies column headers and
     * mappings to fields in the store */
    var gridLayout = [
            name : "ID",    field : "id",    width : "50%",
            name : "Label", field : "label", width : "50%"
    ];

    /* Programmatically construct a data grid */
    var grid = new dojox.grid.DataGrid(
                       store     : gridStore,
                       structure : gridLayout
               , "gridNode");

    /* Tell the grid to lay itself out since
     * it was programmatically constructed */
    grid.startup();

标记是:

 <div dojoType="dijit.Dialog" id="myDialog" title="Multiple Addresses" style="width:400px;height:300px" >
    <div dojoType="dijit.layout.ContentPane" id="gridNode" style="positon:relative;width:100%;height:100%"></div>

感谢您的帮助, 原则

【问题讨论】:

【参考方案1】:

所以,我遇到的问题似乎源于没有在网格容器 div (gridNode) 上放置明确的样式,一旦我这样做了:

<div dojoType="dijit.layout.ContentPane" id="gridNode" style="width:400px;height:300px"></div>

它开始工作了。

【讨论】:

【参考方案2】:

仅供参考。我正在做类似的事情(对话框中的网格),并且发现如果在隐藏对话框时尝试修改存储(或至少在网格上调用 setStore),则会发生错误。只是需要注意的事情。

【讨论】:

【参考方案3】:

我以编程方式创建所有内容,因此对我不起作用,我必须连接到对话框的 _getFocusItems 方法,这只会在对话框的动画结束时发生。

lov.connect(lov,"_getFocusItems",dojo.hitch(this,function()
                var dijitTitle = new dijit.TitlePane(
                    title: "Resultados",
                    toggleable:false,
                    open:true,
                    style:"min-width:98%;display:inline-block;width:98%;height:"+dialogStyle.h-100+"px;",
                    baseClass:"dijitTitlePane qtResultsTitle"
                ,div);
                dijitTitle.startup();

                var fisaSubGrid = new dojox.grid.EnhancedGrid(
                    store:store,
                    structure: layoutRate,
                    autoHeight:"true",
                    autoWidth:true,
                    initialWidth:dialogStyle.w-50+"px",
                    plugins: 
                        pagination: 
                            description: false,
                            sizeSwitch: false,
                            pageStepper: true,
                            gotoButton: false,
                            maxPageStep: 5,
                            position: "bottom",
                            defaultPage: 2,
                            defaultPageSize: 10
                        
                    
                );
                dijitTitle.addChild(fisaSubGrid);
                fisaSubGrid.startup();

            ));

【讨论】:

以上是关于如何将 Dojox.grid 放入 dijit.Dialog的主要内容,如果未能解决你的问题,请参考以下文章

dojox.grid.EnhancedGrid 如何设置 noDataMessage?

如何覆盖 dojox _Scroller 类中的方法?

如何在 dojox.grid.DataGrid 中启用浏览器上下文菜单?

dojox.grid.DataGrid 扩展时不起作用

如何在dojox.datagrid中实现分页

dojox.grid.EnhancedGrid 和 dojox.grid.DataGrid 的继承关系