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

Question

是否有任何解决方案可以在左侧对齐这些单选按钮。 这里是样本sencha触摸代码，您可以在sencha fiddle

上运行它

<pre>

    Caused by android.database.sqlite.SQLiteDatabaseCorruptException: database disk image is malformed (code 11) ################################################################# Error Code : 11 (SQLITE_CORRUPT) Caused By : The database disk image is malformed. (database disk image is malformed (code 11)) #################################################################
    android.database.sqlite.SQLiteConnection.nativeExecuteForCursorWindow (SQLiteConnection.java)
    android.database.sqlite.SQLiteConnection.executeForCursorWindow (SQLiteConnection.java:989)
    android.database.sqlite.SQLiteSession.executeForCursorWindow (SQLiteSession.java:836)
    android.database.sqlite.SQLiteQuery.fillWindow (SQLiteQuery.java:62)
    android.database.sqlite.SQLiteCursor.fillWindow (SQLiteCursor.java:144)
    android.database.sqlite.SQLiteCursor.getCount (SQLiteCursor.java:133)
    android.database.AbstractCursor.moveToPosition (AbstractCursor.java:197)
    android.database.AbstractCursor.moveToNext (AbstractCursor.java:245)
    com.google.android.gms.internal.zzeaa.zzb ()
    com.google.android.gms.internal.zzeaa.zza ()
    com.google.android.gms.internal.zzegv.zzf ()
    com.google.android.gms.internal.zzefk.call ()
    com.google.android.gms.internal.zzegv.zze ()
    com.google.android.gms.internal.zzefh.zzg ()
    com.google.android.gms.internal.zzefh.zza ()
    com.google.android.gms.internal.zzedn.zza ()
    com.google.firebase.database.zzs.run ()
    java.util.concurrent.Executors$RunnableAdapter.call (Executors.java:422)
    java.util.concurrent.FutureTask.run (FutureTask.java:237)
    java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$201 (ScheduledThreadPoolExecutor.java:152)
    java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run (ScheduledThreadPoolExecutor.java:265)
    java.util.concurrent.ThreadPoolExecutor.runWorker (ThreadPoolExecutor.java:1112)
    java.util.concurrent.ThreadPoolExecutor$Worker.run (ThreadPoolExecutor.java:587)
    java.lang.Thread.run (Thread.java:818)

这里有3个单选按钮。第一个我试图设置在左侧，并希望在右侧设置它的标签对齐。我通过使用配置选项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' } ] }); } }); 来做到这一点但你可以在设计中看到，标签设置在右侧，但组件没有设置在左侧。我不知道为什么在左侧添加填充。我为此尝试了很多东西，但无法解决这个问题。你对这个问题有任何建议/解决方案吗？

在我将标签设置为右后，您可以看到上面的图像有空格。那个我不想要的空间。

Answer 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',

它有效。