I have a panel already created and though to use a table layout, but I can't figure out how to do it. Here is my code so far:
Ext.define('genericNameSpace.ImpactDiagram', {
extend: 'Ext.window.Window',
xtype: 'crash-impactdiagram',
icon: 'css/img/car.png',
title: 'Impact Diagram',
closeAction: 'hide',
width: 500,
height: 355,
resizable: false,
constrain: true,
constrainTo: Ext.getBody(),
items: [
// ADD Impact Diagram section
{
xtype: 'panel',
border: false, // optional
items: [
{
xtype: 'panel',
border: false, // optional,
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
padding: '10px',
width: '100%',
height: '100%',
border:true,
}
},
tdAttrs: {
align: 'center',
valign: 'middle'
}
},
items: [
{
xtype: 'panel',
layout: {
type: 'table',
border: true,
columns: 9,
tableAttrs: {
border: true,
style: {
width: '100%'
}
},
tdAttrs: {
align: 'middle'
}
},
items: [
{
xtype: 'radiofield',
inputValue: 1,
id: 'radio1',
colspan: 2,
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 2,
id: 'radio2',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 3,
id: 'radio3',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 4,
id: 'radio4',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 5,
id: 'radio5',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 6,
id: 'radio6',
readOnly: true
}, {
xtype: 'radiofield',
inputValue: 7,
id: 'radio7',
colspan: 2,
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 8,
id: 'radio8',
colspan:2,
readOnly: true
},
{
html: '<img src="css/img/cartop.png"/>',
colspan: 5
},
{
xtype: 'radiofield',
inputValue: 9,
id: 'radio9',
colspan: 2,
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 10,
id: 'radio10',
colspan: 2,
readOnly: true
},
{
xtype: 'radiofield',
boxLabel: '',
inputValue: 11,
id: 'radio11',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 12,
id: 'radio12',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 13,
id: 'radio13',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 14,
id: 'radio14',
readOnly: true
},
{
xtype: 'radiofield',
inputValue: 15,
id: 'radio15',
readOnly: true
}, {
xtype: 'radiofield',
inputValue: 16,
id: 'radio16',
colspan: 2,
readOnly: true
}
]
},
{
xtype: 'radiogroup',
vertical: false,
columns: 4,
flex: 1,
width: '100%',
allowBlank: false,
fieldLabel: '',
reference: 'collisionTypeRadioList',
defaults: {
name: 'selectedCollisionType',
padding: '10px 10px 10px 10px'
},
listeners: {
change: 'collisionTypeChanged'
},
items: [{
boxLabel: 'Under',
inputValue: 0,
readOnly: true
}, {
boxLabel: 'Overturn',
inputValue: 1,
readOnly: true
}, {
boxLabel: 'None',
inputValue: 2,
readOnly: true
}, {
boxLabel: 'Other',
inputValue: 3,
readOnly: true
}]
}
]
}
]
}
],
});I can't figure out how to layout the panel depicted in the following image.
The window appears correctly, The panel shows up properly, and the radios show up fine.
The only problem left is that the radios are not quite centered, almost as if there is some padding, but I can't get rid of it...
