extjs 在ext js中水平对齐文本字段

dwthyt8l 于 2022-11-04 发布在其他

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

我已经在我的表单中添加了一个单选按钮组。根据启用的单选按钮，一个或两个文本字段应该出现在表单中，也就是说，如果启用了第一个单选按钮，那么只有一个文本字段应该出现，而如果启用了第二个单选按钮，两个文本字段应该水平出现。从下面的代码中，当启用第二个单选按钮时，两个文本字段彼此折叠。我如何将这些文本字段并排放置？

{
            xtype: 'radiogroup',
            fieldLabel: 'Type',
            name: 'type',
            items: [{
                boxLabel: 'Single IP',
                inputValue: '1',
                checked: true,
            },{
                boxLabel: 'IP Range',
                inputValue: '2'
            }],
            listeners: {
                change: {
                    fn: rgChange
            }},

        },{
            default:'textfield',
            layout:'hbox',
            items:[{
                xtype: 'textfield',
                id: 'iplabel',
                fieldLabel:'IP',
            },{
                xtype: 'textfield',
                id: 'fromlabel',
                fieldLabel:'From',
                hidden:true,
            },{
                xtype: 'textfield',
                id: 'tolabel',
                fieldLabel: 'To',
                hidden:true,
            }]
        }

extjs

来源：https://stackoverflow.com/questions/68858004/aligning-the-textfield-horizontally-in-ext-js

1条答案

按热度按时间

mpgws1up1#

尝试下面的代码，也看看这个小提琴。

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'radiogroup',
        width: 300,
        fieldLabel: 'Type',
        name: 'type',
        items: [{
            boxLabel: 'Single IP',
            inputValue: '1',
            checked: true,
        }, {
            boxLabel: 'IP Range',
            inputValue: '2'
        }],

        listeners: {
            change: function (radio, newValue, oldValue, eOpts) {
                var container = radio.up('panel').getComponent('fields');
                container.getComponent('iplabel').setHidden(newValue.type != '1');
                container.getComponent('fromlabel').setHidden(newValue.type != '2');
                container.getComponent('tolabel').setHidden(newValue.type != '2');
            },
        }
    }, {
        xtype: 'container',
        layout: 'hbox',
        itemId: 'fields',
        items: [{
            itemId: 'iplabel',
            xtype: 'textfield',
            fieldLabel: 'IP',
        }, {
            itemId: 'fromlabel',
            xtype: 'textfield',
            fieldLabel: 'From',
            hidden: true,
        }, {
            itemId: 'tolabel',
            xtype: 'textfield',
            fieldLabel: 'To',
            hidden: true,
        }]
    }]
});

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

我来回答

extjs 在ext js中水平对齐文本字段

1条答案

相关问题

热门标签

最新问答