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: