У меня уже есть панель, и я хочу использовать макет таблицы, но я не могу понять, как это сделать. Вот мой код:
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
}]
}
]
}
]
}
],
});Я не могу понять, как расположить панель, изображенную на следующем рисунке.
Окно отображается правильно, панель отображается правильно, радиоприемники отображаются нормально.
Единственная оставшаяся проблема заключается в том, что радио не совсем по центру, как будто есть какая-то прокладка, но я не могу от нее избавиться...
