Search code examples
extjsword-wrapformpanel

How to top-align and word-wrap a form panel field in ExtJS?

How can I make the multiline form field Descriptionword-wrap and top-align its text?

alt text

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

When I try xtype: 'textArea', I get the error 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,
        },{
Solution

  • You changed the defaultType to 'textfield', which is the xtype you want to use on all fields except for the Description field. For that field you'd want an xtype of 'textarea'. This will top align the text and word wrap automatically as a typical html textarea would. Keep in mind that with a lot of text you'll likely see a scrollbar in the textarea. If you want to avoid scrollbars take a look at the TextArea config options grow, growMax, and growMin.

    Example:

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