cómo crear un dijit.Dialog con un dojox.grid.DataGrid

Question

tengo el siguiente problema:

crear mediante programación un dijit.Dialog y una dojox.grid.DataGrid (vinculado a un almacén de datos variable global (dojo.store.Memory)) el contenido del Diálogo no se muestra mientras el tamaño del Diálogo permanece en un mínimo.

La tienda DataGrids está llena correctamente y Firebug muestra la cuadrícula dentro del cuadro de diálogo.

data = new dojo.data.ObjectStore(
    { objectStore: new dojo.store.Memory({data:[]}) }); 

data.put({id:0,name:'Franklin'}); 

showDialog = function(){ 
    var dlg = dijit.byId('myDlg'); 
    if(dlg){ 
    dlg.show(); 
    } 
    else{ 
    var cp = new dijit.layout.ContentPane({style:"width:500;height:500;"}); 
    var grid = new dojox.grid.DataGrid({ 
     store : data, 
     structure : [ 
     {field:'id',name:'ID',width:'50px'}, 
     {field:'name',name:'Name',width:'400px'}] 
    },cp); 

    dlg = new dijit.Dialog({ 
     id:'myDlg', 
     title:'Names', 
     content:cp.domNode 
    }); 

    grid.startup(); 
    dlg.show(); 
    } 
); 

Tal vez he agregado algo en el orden incorrecto?

Además, no sé si mi manera de combinar/agregar widgets de dojo usando la propiedad domNode es la manera correcta de hacer las cosas.

No sé si el ContentPane que estoy usando es necesario para colocar la cuadrícula dentro del cuadro de diálogo. Ambas variantes no funcionaron hasta ahora.

Por último, no estoy seguro de si el cuadro de diálogo necesita medidas estáticas para determinar el tamaño correcto. En mi experiencia, el cuadro de diálogo en sí no necesita ancho 0 alto estáticos , pero hasta ahora no tengo experiencia agregando un componente dinámico como la cuadrícula (que podría cambiar su tamaño más adelante en el inicio) a un cuadro de diálogo.

Answer 1

Aquí hay una posible solución para mi problema anterior. El cuadro de diálogo debe estar en su lugar y visible en este caso. Solo después de eso, se crea la cuadrícula, se coloca dentro del cuadro de diálogo y se inicia.

Tanto el cuadro de diálogo como la cuadrícula necesitan dimensiones explicitas. En caso de que el diálogo tenga algún otro contenido, es posible que no necesite información de ancho adicional.

var myDialog = dijit.byId('myDialog'); 
if(!myDialog){ 
    myDialog = new dijit.Dialog({ 
     id:'myDialog', 
     title:'test dialog', 
     style:'width:600px;height:600px;' 
    }); 
} 
myDialog.show(); 

var myMemoryStore = new dojo.store.Memory(
    {data:[ 
     {'id':'0','lastname':'Frank'}, 
     {'id':'1','lastname':'Herbert'}]}); 
var myObjectStore = new dojo.data.ObjectStore({objectStore:myMemoryStore }); 

var myStructure = [ 
    {field:'id',  name:'ID', width:'20px'}, 
    {field:'lastname', name:'NAME', width:'200px'}]; 

var myGrid = dijit.byId('myGrid'); 
if(!myGrid){ 
    myGrid= new dojox.grid.DataGrid({ 
     id:'myGrid', 
     store:myObjectStore , 
     structure:myStructure, 
     style:'width:400px;height:400px;' 
    }); 
} 

dojo.place(myGrid.domNode,myDialog.containerNode,'first'); 
myGrid.startup(); 

Answer 2

No debería necesitar mostrar primero el cuadro de diálogo, lo cual supera el propósito de tener un diálogo. Necesita crear la cuadrícula, anexar domNode al cuadro de diálogo y luego mostrar el cuadro de diálogo. Eso funciona para mí en todos mis códigos. Mejor