2014-10-16 139 views
0

在我的用戶界面中,我在網格中顯示DOJO TitlePane。
當我摺疊TitlePane時,網格不縮小/調整大小。我如何調整網格大小? 以下是我的代碼。在dojo網格中使用dojo titlepane調整dojo datagrid的問題?

謝謝!

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; 
} 
+0

你可以用相關代碼創建一個jsfiddle,並在註釋中提供一個鏈接 – 2014-10-16 20:28:26

回答

0

這對我在使用TitlePane時調整網格大小非常有用。試一下。我認爲它應該工作。

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