Red de conocimiento informático - Material del sitio web - Cómo usar Extjs para hacer el siguiente diseño. El diseño completo es un panel con 3 subpaneles en su interior, que también se puede dividir en dos partes (como se muestra en la imagen).

Cómo usar Extjs para hacer el siguiente diseño. El diseño completo es un panel con 3 subpaneles en su interior, que también se puede dividir en dos partes (como se muestra en la imagen).

En pocas palabras, el diseño horizontal es hbox o diseño de columnas, y el diseño vertical es diseño vbox

El código es el siguiente:

Ext.onReady( función?()?{

Ext.create('Ext.panel.Panel',{

diseño:{

tipo:'columna'

},

predeterminado:{

xtype:'panel'

},

borde:1,

ancho :600,

alto:400,

relleno:10,

elementos:[{

margen:'30px',

ancho: 150,

alto: 290,

diseño: 'vbox',

elementos: [{

ancho:150,

alto:90,

html:'formulario'

},{

ancho:150,

alto:200,

html:'grid
Panel'

}]

},{

margen:'30px?30px?30px?0',

ancho:150,

alto.290,

diseño:'vbox',

elementos:[{

ancho:150,

alto:90,

html:' formulario'

},{

ancho:150,

alto:200,

html:'cuadrícula
Panel'

}]

},{

margen:'30px?px?30px?0',

ancho:150,

alto:290,

diseño:'vbox',

elementos:[{

ancho:150,

altura:90,

html:'formulario'

},{

ancho:150,

altura.200,

html:'grid
Panel'

}]

}]

}],

renderTo:Ext.getBody( )

})

El efecto es el siguiente: