Ext JS更改Panel中每个项目的CSS

Question

我目前正在尝试更改我的面板的样式，如图中所示，但我无法操纵面板中每个项目的CSS。举个例子，我试图将最后一个文本域从其他文本域稍微移开，并希望使用样式属性给出不同的宽度，但不知怎的，它不起作用。 关于如何做的任何想法？

  Ext.define('KitchenSink.view.form.FieldTypes', {
    viewModel: true,
    extend: 'Ext.form.Panel',
    alias: 'form-fieldtypes',
    renderTo:"tab3",
    layout: 'form',
    height: 565,
    width: 800,
    items: [{
        xtype: 'textfield',
        name: 'textfield1',
        fieldLabel: 'Name',
        value: 'Text field value'
    },{
        xtype: 'textfield',
        name: 'textfield2',
        fieldLabel: 'Description',
        value: 'Text field value'
    },{
        xtype: 'textfield',
        name: 'textfield3',
        fieldLabel: 'Type',
        value: 'Text field value'
    },{
        xtype: 'textfield',
        name: 'textfield4',
        fieldLabel: 'Version',
        value: 'Text field value'
    },{
       xtype: 'textfield',
        name: 'textfield5',
        fieldLabel: 'Tag',
        value: 'Text field value',
        style:
                {
                       width:'20px',
                      'margin-top':'130px',
                },
    }]
})

Ext.create('form-fieldtypes', {
        renderTo: "tab3"
    });

Answer 1

试

{
       xtype: 'textfield',
       name: 'textfield5',
       fieldLabel: 'Tag',
       value: 'Text field value',
       width: 20
}

Answer 2

为面板定义额外的cls属性。

他们为每个项目编写css类。

或

你也可以使用baseCls属性来覆盖extjs的样式。

Answer 3

您是否尝试过直接在文本字段中设置配置？使用ExtJS布局可以更好地工作。

{
    xtype: 'textfield',
    name: 'textfield5',
    fieldLabel: 'Tag',
    value: 'Text field value',
    margin: '130 0 0 0',
    width: 20
}

修改

我刚刚意识到你正在使用表单布局。我相信如果你想控制填充，边距等，你将不得不使用不同的布局。