Question

如何缩小这些显示区域之间的区域？我试过移动填充......边距......似乎没什么用。当我最终得到标签时应该看起来的方式（空间很小）......然后标签上的值没有正确对齐。

这就是我设置的方式。

                            layout: 'column',
                        defaults: {
                            layout: 'form',
                            xtype: 'container',
                            //defaultType: 'textfield',
                            style: 'width: 50%'
                        },
                        items: [{
                            items: [
                                {
                                    xtype: 'displayfield',
                                    fieldLabel: 'Client',
                                    bind: {
                                        value: '{selectedClientListModel.ClientName}'
                                    },
                                    fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;',
                                    labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;'
                                    //ui: 'dark'
                                },
                                {
                                    xtype: 'displayfield',
                                    fieldLabel: 'Acct Desc',
                                    itemId: 'textfieldAcctDesc',
                                    bind: {
                                        value: '{selectedManager.AcctShortCode}'
                                    },
                                    fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
                                    labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;'
                                },
                                {
                                    xtype: 'displayfield',
                                    fieldLabel: 'Acct Num',
                                    itemId: 'textfieldAcctNum',
                                    bind: {
                                        value: '{selectedManager.AcctNum}'
                                    },
                                    fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
                                    labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;'
                                }
                            ]
                        }, {

Answer 1

displayfields旨在与其他表单字段整齐对齐 - 其输入字段周围有宽大的边框。出于这个原因，displayfields have the same height, they even haven't got a different SCSS variable for displayfield height。

此外，从可用的CSS类中，fieldLabel无法区分显示字段的标签和另一个字段的标签。因此，您必须至少为您的displayfield提供自定义userCls，否则您的所有常规表单字段都会显得荒谬。

然后你可以添加一些像这样的CSS：

.myUserCls,
.myUserCls .x-form-item-label,
.myUserCls .x-form-display-field
 { 
    line-height:16px; 
    min-height:16px;
    margin-bottom:0;
    margin-top:0;
    padding-top:0;
 }

I have made you a fiddle.

extjs收缩显示区域之间的区域（标签和值）

1 个答案: