CompositeFieldのカスタムFieldLabel

Question

すべてのフィールドのリストをMin、Max、およびAccuracyで作成しようとしました。残念なことに、これらのフィールドの一部には、時間などの単位が付加されている必要があります。私は単位のために別の列を追加することなくこれを表示できるようにしたいと考えていましたので、これをfieldLabelに含めることでした。

私はCompositeFields、2つのテキストフィールド、ディスプレイフィールド、そして別のテキストフィールドでこれを行います。

これは私が何をしようとしているのモックアップです... Mockup Image

は、これは実行可能な選択肢である、または私はこれについて移動する別の方法を見つける必要があるのですか？

現在のところ、私のコードは実際のコンボボックスの代わりに[secs ^]を持っていますが、私がしようとしているところで見ることができます。

また、フィールドラベルとしてコンボボックスを使用しようとしましたが、実際のfieldLabelの代わりに[オブジェクトオブジェクト]が使用されました。

コード：

Ext.FormPanel({ 
    frame: true, 
    layout: 'form', 
    border: 'false', 
    padding: '15 50 15 50', 
    labelAlign: 'right', 
    items: [{ 
     xtype: 'compositefield', 
     msgTarget: 'side', 
     labelStyle: 'width:220px', 
     anchor: '-140', 
     defaults: { 
      flex: 1, 
     }, 
     items: [{ 
      xtype: 'displayfield', 
      style: 'text-align:center', 
      value: 'Min' 
     }, { 
      xtype: 'displayfield', 
      style: 'text-align:center', 
      value: 'Max' 
     }, { 
      xtype: 'displayfield', 
      width: '20px' 
     }, { 
      xtype: 'displayfield', 
      style: 'text-align:center', 
      value: 'Accuracy' 
     }] 
    }, { 
     xtype: 'compositefield', 
     fieldLabel: 'Average Percent Completed', 
     labelStyle: 'width:220px', 
     anchor: '-140', 
     msgTarget: 'side', 
     defaults: { 
      flex: 1 
     }, 
     items: [{ 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'percentMin' 
     }, { 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'percentMax' 
     }, { 
      xtype: 'displayfield', 
      value: '+/-', 
      width: '20px' 
     }, { 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'percentAcc' 
     }] 
    }, { 
     xtype: 'compositefield', 
     fieldLabel: 'Average Time [sec ^]', 
     msgTarget: 'side', 
     labelStyle: 'width:220px', 
     anchor: '-140', 
     defaults: { 
      flex: 1 
     }, 
     items: [{ 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'avgTimeMin' 
     }, { 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'avgTimeMax' 
     }, { 
      xtype: 'displayfield', 
      value: '+/-', 
      width: '20px' 
     }, { 
      xtype: 'numberfield', 
      mode: 'local', 
      name: 'avgTimeAcc' 
     }] 
    }] 
}); 

誰もがこれについて移動する方法についての提案を持っていますか？

Answer 1

複合フィールドとフィールドラベルを使用して提案していることを実行することはできないと思います。フィールドラベルは厳密にテキスト用です。そのため、[オブジェクトオブジェクト]が表示されています。 を変更すると、ドロップダウンリストが表示されることがあります（ただし、アプリのデザインを変更するとこれよりも優れていると提唱しています）。