另一个EnhancedGrid中的EnhancedGrid

时间:2014-09-08 13:45:25

标签: javascript jsp dojo

我正在使用dojo网格单元格格式器在另一个网格中显示内部网格。即使添加了内部网格,它也不会显示在HTML页面上,因为它的高度和宽度都是0px。

我的JSP页面和创建网格的JS页面如下所示。任何帮助将不胜感激。

我的猜测是在单元格格式器中调用grid.startup()可能不是正确的地方。但是我应该在哪里将startup()调用移动到 - 或 - 是否需要执行其他操作才能使内部网格正确呈现。

---- JSP文件----                  

        <script type="text/javascript"> dojo.require("portlets.ListPortlet"); var <portlet:namespace/>args = { namespace: '<portlet:namespace/>', listDivId: 'listGrid' }; var <portlet:namespace/>controller = new portlets.ListPortlet(<portlet:namespace/>args);  dojo.addOnLoad(function(){ <portlet:namespace/>controller.init(); }); </script>        

</div>     

---- JS文件----

dojo.declare("portlets.ListPortlet", null, { 

        constructor: function(args){    
                dojo.mixin(this,args);  
                this.params = args; 
        }, 
        init: function(){ 

                var layout = [[         
                                {field: 'site', name: 'Site', width: '30px'  } 
                                {field: 'name', name: 'Full Name', width: '100px'},                             
                                {field: 'recordStatus', name: 'Status', width: '80px'  }                           
                        ],[ 
                                {field: '_item', name: ' ', filterable: false,  formatter: this.formatNotesTable, colSpan: 3  }                         
                        ]]; 



                this.grid = new dojox.grid.EnhancedGrid({ 
                    autoHeight: true, 
                    autoWidth: true, 
                    selectable: true, 
                    query:{ 
                    fromDate: start, 
                        toDate: end 
                    },               
                    rowsPerPage: 10 
                }); 
                this.grid.placeAt(dojo.byId(this.listDivId)); 


                this.dataStore = new dojox.data.JsonRestStore({target: dataURL, idAttribute: idAttribute}); 
                this.grid.setStructure(layout); 
                this.grid.startup(); 
        },           
        formatNotesTable(rowObj) { 

            var gridData = { 
                        identifier:"id", 
                        items: [ 
                                      {id:1, "Name":915,"IpAddress":6}, 
                                      {id:2, "Name":916,"IpAddress":7} 
                                ] 
            }; 


            var gridStructure =  [{ 
                        cells:[ 
                                    [ 
                                          { field: "Name", 
                                                name: "Name",                                         
                                          }, 
                                          { field: "IpAddress", 
                                                name: "Ip Address" ,                                         
                                                styles: 'text-align: right;' 
                                          } 
                                    ] 
                              ] 
                        }]; 

    var gridStore = new dojo.data.ItemFileReadStore( { data: gridData} ); 

    var cpane = new dijit.layout.ContentPane ({     
    content: "inner grid should be displayed below" 
     }); 


     var subgrid = new dojox.grid.DataGrid({ 
                        store: gridStore, 
                        structure: gridStructure, 
                        style: {width: "325px", height: "300px"}     
                    }); 

                subgrid.placeAt(cpane); 
            subgrid.startup(); 
            return cpane; 
        }   
}

1 个答案:

答案 0 :(得分:0)

我通过在EnhancedGrid中使用dojox.layout.TableContainer解决了我的问题。