extjs labelwidthはテキストフィールドの形では大きくなりません

Question

ExtJSの私のテキストフィールドのラベルは、私が何を試しても大きくならないでしょう。それはサイズに対応するために2行に移動しているようです。誰でも私が間違っていることを見ることができますか？

フィールドセットの内部にパネル内のフォームがあります。代わりにconfigプロパティとしてfieldDefaults使用defaultsの

Ext.define('ExtApplication4.view.admin.Admin', { 
extend: 'Ext.panel.Panel', 
xtype: 'app-admin', 
controller: 'admin', 

itemId: 'adminItemId', 

requires: [ 
    'ExtApplication4.view.admin.AdminController', 
    'ExtApplication4.util.GlobalVar' 
], 

title: 'Admin', 
//html: 'This is my Admin Panel', 

items: [{ 

    xtype: 'fieldset', 
    title: 'database values', 
    width: 400, 
    items: [{ 

     xtype: 'form', 
     //labelWidth: 200, 
     monitorValid: true, 
     formBind: true, 
     items: [{ 
      //xtype: 'fieldset', 
      //title: 'database values', 
      //width: '100%', 
      defaultType: 'textfield', 
      margin: '10px,0,10px,0', 
      fieldDefaults: { 
       labelWidth: 200 
      }, 
      items: [ 
       { 
        allowBlank: false, 
        fieldLabel: 'Accrued', 
        itemId: 'itemIdAccrued', 
        name: 'nameAccrued', 
        emptyText: 'Accrued' 
       }, 
       { 
        allowBlank: false, 
        fieldLabel: 'YTD End Val', 
        name: 'YTDEndVal', 
        emptyText: 'YTDEndVal', 
        itemId: 'itemIdYTDEndVal' 
       }, 
       { 
        allowBlank: false, 
        fieldLabel: 'Margin Req', 
        name: 'MarginReq', 
        emptyText: 'MarginReq', 
        itemId: 'itemIdMarginReq' 
       }, 
       { 
        allowBlank: false, 
        fieldLabel: 'MarginExc', 
        name: 'MarginExc', 
        emptyText: 'MarginExc', 
        itemId: 'itemIdMarginExc' 
       }, 
       { 
        xtype: 'displayfield', 
        hideEmptyLabel: false, 
        value: 'All fields must be filled out', 
        style: 'text-align:left' 
       } 
      ], 
      buttons: [{ 
       text: 'Submit', 
       formBind: true, 
       listeners: { 
        click: 'onButtonSubmitPTValues' 
       } 
      }] 

Answer 1

。

Ext.application({ 
 
    name: 'Fiddle', 
 
    launch: function() { 
 
      
 
      Ext.create('Ext.panel.Panel', { 
 
       renderTo: Ext.getBody(), 
 
       
 
itemId: 'adminItemId', 
 

 

 
title: 'Admin', 
 
//html: 'This is my Admin Panel', 
 

 
items: [{ 
 

 
    xtype: 'fieldset', 
 
    title: 'database values', 
 
    width: 400, 
 
    items: [{ 
 

 
     xtype: 'form', 
 
     //labelWidth: 200, 
 
     monitorValid: true, 
 
     formBind: true, 
 
     items: [{ 
 
      //xtype: 'fieldset', 
 
      //title: 'database values', 
 
      //width: '100%', 
 
      defaultType: 'textfield', 
 
      margin: '10px,0,10px,0', 
 
      defaults: { 
 
       labelWidth: 200 
 
      }, 
 
      items: [ 
 
       { 
 
        allowBlank: false, 
 
        fieldLabel: 'Accrued', 
 
        itemId: 'itemIdAccrued', 
 
        name: 'nameAccrued', 
 
        emptyText: 'Accrued' 
 
       }, 
 
       { 
 
        allowBlank: false, 
 
        fieldLabel: 'YTD End Val', 
 
        name: 'YTDEndVal', 
 
        emptyText: 'YTDEndVal', 
 
        itemId: 'itemIdYTDEndVal' 
 
       }, 
 
       { 
 
        allowBlank: false, 
 
        fieldLabel: 'Margin Req', 
 
        name: 'MarginReq', 
 
        emptyText: 'MarginReq', 
 
        itemId: 'itemIdMarginReq' 
 
       }, 
 
       { 
 
        allowBlank: false, 
 
        fieldLabel: 'MarginExc', 
 
        name: 'MarginExc', 
 
        emptyText: 'MarginExc', 
 
        itemId: 'itemIdMarginExc' 
 
       }, 
 
       { 
 
        xtype: 'displayfield', 
 
        hideEmptyLabel: false, 
 
        value: 'All fields must be filled out', 
 
        style: 'text-align:left' 
 
       } 
 
      ], 
 
      buttons: [{ 
 
       text: 'Submit', 
 
       formBind: true, 
 
      }] 
 
     }] 
 
    }] 
 
}] 
 
      
 
     
 
    
 
}); 
 
} 
 
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"> 
 
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>