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

Question

如何使多行表单字段描述自动换行和顶部对齐其文本？

<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] 不是构造函数:

        },{
            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 配置选项 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,
    }