Extjsテーブルレイアウトで異なるアライメントを使用するにはどうすればよいですか？

Question

私はExtjs 6.0（Framework Codeigniter 3.0.3）を使用しています。

+---------------------------+-------------+ 
| something | something | something | 
+-------------+-------------+-------------+ 
|     Label A| Label B | 
+-------------+-------------+-------------+ 

私はテーブルレイアウト（COLSPAN 2とラベルA）を使用しています：

私はこのような何かを取得しようとしています。

問題は、ラベルAとラベルB（それぞれ右と中央）で異なる位置合わせが必要なことです。

これを行う方法はありますか？

これはコードです：ラベルAの場合

Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'Form Panel', 
    bodyStyle: 'padding:5px 5px 0', 
    width: 400, 
    height: 200, 
    layout: { 
     type: 'table', 
     columns: 3 
    }, 
    items: [{ 
     xtype: 'label', 
     text: '----First Row----', 
     padding: 5 
    }, { 
     xtype: 'label', 
     text: '----First Row----', 
     padding: 5 
    }, { 
     xtype: 'label', 
     text: '----First Row----', 
     padding: 5 
    },{ 
     xtype: 'label', 
     text: 'Label A', 
     padding: 5, 
     colspan: 2, 
    }, { 
     xtype: 'label', 
     text: 'Label B', 
     padding: 5 
    }], 
}); 

、私は（効果なし）を追加しようとしました：

• 整列： '正しい'
• textAlign：
'右' を
• labelAlign： 'right'

私が追加した場合：

layout: { 
    type: 'table', 
    columns: 3, 
    tableAttrs: { 
    style: { 
     textAlign: 'right' 
    } 
    } 
} 

次に、ラベルAとラベルBの両方が右側に揃っていて、それは必要なものではありません。

Answer 1

あなたは右にラベルAを揃えるために、次のコードを使用することができます。

{ 
     xtype: 'label', 
     text: 'Label A', 
     padding: 5, 
     colspan: 2, 
     style:{ 
      "float":"right" 
     } 
    }, 

Answer 2

ラベルは、それらがlabelableが使用する目的で作られていますおそらくので、何とか特別です。 labelは、フィールドと一緒に使用するためのもので、labelをクリックすると、そのフィールドにはfieldがフォーカスされます。 fieldのlabelable mixinは、（labelAlignの設定に基づいて）整列します。labelは、必ずしも求めるレイアウトを尊重するものではありません。

@ Salooの答えはうまくいくようですが、それは他のテーマや古いブラウザやフレームワークの異なるバージョンで壊れるかもしれないハックです。

テキストを表示するさまざまな方法を使用する方がよいでしょう。私はcontainer with the html configurationを使用するようになりました。コンテナの場合、style:{textAlign:"right"}は意図したとおりに動作します。また、「text-align」はローカルのCSS設定であるため、ブラウザの枠を超えて考える必要はありません。ブラウザ間、テーマ間、フレームワークバージョン間で使用するには十分安全です。