extjs - 如何在 ExtJS 中对表单面板字段进行顶部对齐和自动换行？

Question

如何制作多行表单域 Description 自动换行和 顶部对齐 它的文字？

<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,
    }