extjs 为什么选择标签宽度：“汽车”隐藏了无线电场？

ktca8awb 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(176)

我尝试 Package 一个radiofield的label，但是我不想设置固定的width和labelWidth，因为视图的响应性。但是当我将labelWidth设置为auto时，input element被隐藏了。
我做错了吗？谢谢。
将下面的代码添加到 Sencha 小提琴的启动函数中，然后从下拉列表中选择Ext JS 6.5.3.57- Triton [Modern]。

Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: {
          type: 'vbox',
          align: 'stretch',
          pack: 'start'
        },
        items: [
            {
                xtype: 'panel',
                //flex: 1,
                //height: 100,
                layout: {
                  type: 'hbox',
                  align: 'stretch',
                  pack: 'start'
                },
                items: [
                    {
                        xtype: 'radiofield',
                        flex: 3,
                        //width: '100%',
                        label: 'afglngfsdlgkdslfkjsdlfkjdslkfjdslfkjsdlfkjsdlkfjsdlkfjsdlkfjdslkfjsdlkfjsdlkfjdslkfjldskfjsldkfjlsdkfjlsdkfjlsdkfjlsdkfjlkdsjflsdkjflsdkjflsdkjflsdkjflsdkjfklslfkdfjsldfk',
                        labelAlign: 'right',
                        labelWrap: true,
                        labelWidth: 'auto',
                        style: 'word-wrap: break-word;',
                        name : 'color',
                        value: 'red',
                        checked: true
                    },
                    {
                        xtype: 'textfield',
                        flex: 1,
                        margin: '0 0 0 10'
                    }
                ]
            }
        ]
    });

extjs

来源：https://stackoverflow.com/questions/49274030/why-labelwidth-auto-is-hidding-the-radiofield

1条答案

按热度按时间

axkjgtzd1#

labelWraptrue，允许标签换行。如果设置为false，则标签将被省略号截断。

CSS**word-wrap属性定义当某个单词太长而无法放入其容器时，是否允许浏览器在单词内换行。
这里是FIDDLE**，我已经创建了一个演示。我希望这将帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'panel',
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch',
                pack: 'start'
            },
            items: [{
                xtype: 'panel',
                layout: {
                    type: 'hbox',
                    align: 'stretch',
                    pack: 'start'
                },
                items: [{
                    xtype: 'radiofield',
                    flex: 3,
                    label: 'afglngfsdlgkdslfkjsdlfkjdslkfjdslfkjsdlfkjsdlkfjsdlkfjsdlkfjdslkfjsdlkfjsdlkfjdslkfjldskfjsldkfjlsdkfjlsdkfjlsdkfjlsdkfjlkdsjflsdkjflsdkjflsdkjflsdkjflsdkjfklslfkdfjsldfk',
                    labelAlign: 'right',
                    labelWidth: 'auto',
                    name: 'color',
                    value: 'red',
                    checked: true
                }, {
                    xtype: 'textfield',
                    placeHolder: 'example',
                    flex: 1,
                    margin: '0 0 0 10'
                }, {
                    xtype: 'radiofield',
                    flex: 1,
                    label: 'The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.',
                    labelAlign: 'right',
                    labelWrap: true,
                    labelWidth: 'auto',
                    name: 'color',
                    value: 'red'
                }]
            }]
        });
    }
});

赞(0）回复(0）举报 2022-11-05

我来回答

extjs 为什么选择标签宽度：“汽车”隐藏了无线电场？

1条答案

相关问题

热门标签

最新问答