如何在 Touch Sencha 中对齐左侧的单选按钮？

Posted 2023-02-26

【中文标题】如何在 Touch Sencha 中对齐左侧的单选按钮？

【英文标题】：How to align Radio buttons at left side in Touch Sencha?

【发布时间】：2018-06-12 06:39:41

【问题描述】：

是否有任何解决方案可以在左侧对齐这些单选按钮。 这是示例 sencha 触摸代码，您可以在 sencha fiddle 上运行它

Ext.application(
    name : 'Fiddle',

    launch : function() 
      var form = Ext.create('Ext.form.Panel', 
    fullscreen: true,
    items: [
        
            xtype: 'radiofield',
            name : 'color',
            value: 'red',
            label: 'Red',
            labelAlign: 'right',
            checked: true
        ,
        
            xtype: 'radiofield',
            name : 'color',
            value: 'green',
            label: 'Green'
        ,
        
            xtype: 'radiofield',
            name : 'color',
            value: 'blue',
            label: 'Blue'
        
    ]
);
    
);

这里有 3 个单选按钮。第一个我试图设置在左侧，并希望将它的标签设置在右侧对齐。我通过使用配置选项labelAlign: 'right' 做到了这一点，但您可以在设计中看到，右侧设置了标签，但左侧未设置组件。我不知道为什么要在左侧添加填充。我为此尝试了很多东西，但无法解决这个问题。您对此问题有什么建议/解决方案吗？

您可以看到上图在我将标签设置为正确后有空格。我不想要那个空间。

【参考方案1】：

html/CSS 源代码显示右侧单选框的原因是：

.x-field.x-body-align-end > * > .x-body-el 
    align-items: flex-end;

ExtJS 字段源显示body-align-... 类在此处设置：

updateBodyAlign: function(bodyAlign, oldBodyAlign) 
    var element = this.element;

    if (oldBodyAlign) 
        element.removeCls(Ext.baseCSSPrefix + 'body-align-' + oldBodyAlign);
    

    if (bodyAlign) 
        element.addCls(Ext.baseCSSPrefix + 'body-align-' + bodyAlign);
    
,

所以我尝试了小提琴：

bodyAlign: 'start',

它有效。

【讨论】：

你能解释更多吗？你是怎么做到的？

Inspect element in Chrome，然后我逐个遍历radio's class hierarchy中的类，并在源代码文件中搜索类名位的出现。