CompositeField의 사용자 정의 FieldLabel

Question

모든 필드의 목록을 Min, Max 및 Accuracy로 생성하려고합니다. 불행히도 이러한 필드 중 일부는 시간과 같은 단위를 첨부해야합니다. 단위에 다른 열을 추가 할 필요없이 이것을 표시 할 수 있기를 바랍니다. 그래서이 것을 fieldLabel에 포함시키는 것이 좋습니다.

CompositeFields, 2 개의 텍스트 필드, 디스플레이 필드 및 다른 텍스트 필드로이 작업을 수행합니다.

이 Mockup Image

이는 실행 가능한 옵션인가 ... 내가 할 노력하고있어 최대 모의, 또는 내가 이것에 대해 갈 수있는 다른 방법을 찾아야합니까?

현재 내 코드에는 실제 콤보 상자 대신 [secs ^]가 있지만 위의 코드에서 볼 수 있습니다.

필드 레이블에 콤보 상자를 사용하려고했지만 실제 fieldLabel 대신 [Object object]가 나타납니다.

코드 :

이

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

복합 필드 및 필드 라벨을 사용하여 제안하는 것을 수행 할 수 있다고 생각하지 않습니다. 필드 레이블은 텍스트에만 적용되므로 [Object object]가 표시됩니다.

그러나 여분의 열을 피하려는 경우 fieldLabel's Xtemplate을 변경하여 드롭 다운을 포함 해 볼 수 있습니다 (그러나 앱을 다르게 설계하면 이보다 효과적이라고 생각합니다).