Cómo crear mediante programación un dijit.Dialog con un dojox.grid.DataGrid

Question

Tengo el siguiente problema:

Mediante la creación programática de un dijit.Dialog y un dojox.grid.DataGrid (vinculado a un Almacén de datos de variables globales (dojo.store.Memory)), el contenido del diálogo no se muestra mientras el tamaño del cuadro de diálogo permanezca en un mínimo.

La Tienda DataGrids está llena correctamente y Firebug muestra la Grilla dentro del 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 agregué algo en el orden incorrecto?

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

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

Finalmente, no estoy seguro de si el Diálogo necesita mediciones estáticas para dimensionar correctamente y dónde. En mi experiencia, el cuadro de diálogo en sí no necesita ancho o alto estático, pero hasta ahora no tengo experiencia en agregar 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

No debería necesitar mostrar el diálogo primero, eso 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

Answer 2

Aquí hay una posible solución para mi problema anterior. El 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 diálogo como la cuadrícula necesitan dimensiones explicitas. En caso de que el diálogo tenga algún otro contenido, puede 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();