在dojo网格中使用dojo titlepane调整dojo数据网格大小的问题?

时间:2014-10-16 19:43:06

标签: javascript dojo grid

在我的UI中,我在网格中显示DOJO TitlePane 当我折叠TitlePane时,网格不会缩小/调整大小。我如何调整网格大小? 以下是我的代码。

谢谢!

var layout: [[        
                  {field: '_item', name:' ', width:'20px', formatter: Util.showPlusIcon},
                  {field: 'site', name: 'Site', width: '30px'  },                          
                  {field: 'name', name: 'Name', width: '100px'},                             
                  {field: 'date', name: 'Date', width: '80px'},
                  {field: 'service', name: 'Service', width: '120px'}                                                    
                  ],[
                     {field: '_item', name: ' ', filterable: false,  formatter: dojo.hitch(context, this.showDetails), constraint: {wrapColumns:true, wrapperWidth:700}, colSpan: 13}  ]];

this.grid = new dojox.grid.EnhancedGrid({
  autoHeight: true,
  autoWidth: true,
  selectable: true,
  query:ajaxQuery,
  plugins: {
  pagination: {
    sizeSwitch: true,
    itemTitle: 'myTitle'
  }
},                  
rowsPerPage: 10,
canSort: true
});                     

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

showDetails: function(data, rowIndex) {

    if(data.expanded == false ){
        return "";
    }

    var context = this; 

    var tableContainer = new dojox.layout.TableContainer({
      cols: 6,
      showLabels: false,
      customClass: 'tableContainerNotes'              
    });

    dojo.forEach(data.procedures, dojo.hitch(this, function(procedure, index) {             

    if (index==0){
        var pane1 = new dojox.layout.ContentPane ({ content: "Status" });           
        var pane2 = new dojox.layout.ContentPane ({ content: "#"});
        var pane3 = new dojox.layout.ContentPane ({ content: "Name"});
        var pane4 = new dojox.layout.ContentPane ({ content: "Date/Time"});
        var pane5 = new dojox.layout.ContentPane ({ content: "Person"});
        var pane6 = new dojox.layout.ContentPane ({ content: "Person Email"});

        tableContainer.addChild(pane1);
        tableContainer.addChild(pane2);
        tableContainer.addChild(pane3);
        tableContainer.addChild(pane4);             
        tableContainer.addChild(pane5);
        tableContainer.addChild(pane6);
    }

    var toggleButton = new dijit.form.ToggleButton({
        showLabel: true,
        checked: false,
        iconClass: "dijitCheckBoxIcon"
    });
    tableContainer.addChild(toggleButton);

    var cpane1 = new dojox.layout.ContentPane ({ content: procedure.no });          
    var cpane2 = new dojox.layout.ContentPane ({ content: procedure.name});
    var cpane3 = new dojox.layout.ContentPane ({ content: procedure.date});         
    var cpane4 = new dojox.layout.ContentPane ({ content: procedure.person});
    var cpane5 = new dojox.layout.ContentPane ({ content: procedure.personEmail});

    tableContainer.addChild(cpane1);
    tableContainer.addChild(cpane2);
    tableContainer.addChild(cpane3);
    tableContainer.addChild(cpane4);
    tableContainer.addChild(cpane5);

    if (procedure.done){
        toggleButton.set("checked", true);              
    } else {    
        toggleButton.set("checked", false);             
    }           
   }));

    dojo.forEach(data.notes, dojo.hitch(this, function(note, num) {
    var index = num+1;
    var tpane = new dijit.TitlePane ({
        title: "Note # "+index, 
        open: true,
        content: context.formatData(note), colspan:"6"
    });
    tableContainer.addChild(tpane);
    }));
    return tableContainer;
}

1 个答案:

答案 0 :(得分:0)

这对我来说在使用TitlePane时调整网格大小是有用的。试一下。我认为它应该有用。

grid.selectedChildWidget.resize(dojo.coords(grid.containerNode));