如何在ExtJS中頂部對齊和自動換行表單面板字段？

Question

如何製作多行表單字段Description自動換行和top-align它的文字？

<script type="text/javascript"> 
    clearExtjsComponent(regionContent); 
    var panel_form = new Ext.FormPanel({ 
     labelWidth: 100, 
     frame:true, 
     style: 'margin: 10px', 
     title: 'Test Product ID#2', 
     bodyStyle:'padding:5px 5px 0', 
     width: 500, 
     defaultType: 'textfield', 

     items: [{ 
       fieldLabel: 'ID', 
       value: '2', 
       name: 'id', 
       disabled: true, 
       width: 370, 
       style: 'text-align: right', 
       name: 'id', 
       disabled: true, 
       width: 50, 
      },{ 
       fieldLabel: 'Product', 
       value: 'Envelope', 
       name: 'product', 
       width: 370, 
      },{ 
       fieldLabel: 'Description', 
       value: 'Having a good idea about the functional requirements and client-side technology choices, the next step was to decide how things were going to be on the server side. To channel all communications with my web client I decided to use an http handler. For the articles repository, a binary file would go very well with my simplicity and short-construction-time requirements. Any data access and business logic would be placed inside class libraries.', 
       name: 'description', 
       width: 370, 
       height: 100, 
      },{ 
        ... 

當我嘗試xtype: 'textArea'，我得到的錯誤types[config.xtype || defaultType] is not a constructor：

 },{ 
      fieldLabel: 'Description', 
      value: 'Having a good idea about the functional requirements and client-side technology choices, the next step was to decide how things were going to be on the server side. To channel all communications with my web client I decided to use an http handler. For the articles repository, a binary file would go very well with my simplicity and short-construction-time requirements. Any data access and business logic would be placed inside class libraries.', 
      height: 100, 
      xtype: 'textArea', 
      name: 'description', 
      width: 370, 
     },{ 

Answer 1

你改變了defaultType到'textfield'，這是xtype要上除了各個領域的使用說明字段。對於那個領域，你想要一個xtype的'textarea'。這將自動作爲典型的html textarea自動對齊文本和自動換行。請記住，有了很多文本，你可能會在textarea中看到一個滾動條。如果您想避開滾動條，請查看TextArea配置選項grow,growMax和growMin。

例子：

{ 
     xtype: 'textarea', 
     fieldLabel: 'Description', 
     value: 'Having a good idea about the functional requirements and client-side technology choices, the next step was to decide how things were going to be on the server side. To channel all communications with my web client I decided to use an http handler. For the articles repository, a binary file would go very well with my simplicity and short-construction-time requirements. Any data access and business logic would be placed inside class libraries.', 
     name: 'description', 
     width: 370, 
     height: 100, 
    }