Results 1 to 3 of 3

Thread: [2.0rc1] Can't make a grow/shrink TextArea field have a single line height.

  1. #1
    Sencha User tohagan's Avatar
    Join Date
    Sep 2007
    Posts
    39

    Cool [2.0rc1] Can't make a grow/shrink TextArea field have a single line height.

    I need to use TextArea fields that can grow and shrink in place of single line TextField. This because they become innerHTML values in XML documents that are often single line values but can be multi-line.

    I've tried the following config properties to make a TextArea look like a single line TextField but to no effect.
    PHP Code:
    autoHeighttruegrowtruegrowMin0height
    I've also tried several variations including growMin: 1.

    A colleague says that it can be done using JFC/Swing but I can't get ExtJS 2.0RC1 to do this. It appears to initially make the field 2.5 lines height but if you set focus on the field and then remove focus it becomes 1.5 lines height! What I really want is 1.0 lines so it looks like a normal single line TextField both with and without focus so that it only becomes multi-line when they type the first ENTER key.

    The following example shows this behaviour with the Last Name field.

    PHP Code:
    <?xml version="1.0" encoding="ISO-8859-1" ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <!-- START ExtJS -->
    <link rel="stylesheet" type="text/css" href="../js/ext-2.0-rc1/resources/css/ext-all.css" />
    <script type="text/javascript" src="../js/ext-2.0-rc1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext-2.0-rc1/ext-all-debug.js"></script>
    <!-- END ExtJS -->

    <script type="text/javascript">

    Ext.onReady(function(){

        // Required if showing validation messages
        Ext.QuickTips.init();

        var form = new Ext.FormPanel({
            labelWidth: 75,
            title: 'Form Layout',
            bodyStyle:'padding:15px',
            width: 350,
            labelPad: 10,
            defaultType: 'textarea',
            defaults: {
                // applied to each contained item
                width: 230,
                msgTarget: 'side'
            },
            layoutConfig: {
                // layout-specific configs go here
                hideLabel: true
            },
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    autoHeight: true,
                    grow: true,
                    growMin: 0,
                    height: 1
                }
            ],
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        form.render('form-div');

    });

    </script>

    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
    </style>

    </head>
    <body>
    <div id="form-div"></div>
    </body>
    </html>

  2. #2

    Default Ditto and more in 2.0.1

    I can get the control to display at a certain height by setting it explicitly (a pain), but as soon as the control gets focus, the size changes, even when it is unnecessary. It doesn't change back at all on blur. In addition, in IE7 I can easily get it to grow much longer than is necessary to display the text. In FF, despite it growing, I can easily get it to show a vertical scrollbar.

    This control needs better testing, examples, and documentation, especially regarding grow.

    var textrea=new Ext.form.TextArea({
    renderTo: 'textarea',
    value: "Hello, world",
    grow: true,
    selectOnFocus: true,
    height: 24,
    growMin: 0
    });

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Try:

    Code:
    {
      fieldLabel: 'Last Name',
      name: 'last',
      grow: true,
      growMin: Ext.isSafari ? 16 : 22,
      growPad: Ext.isSafari ? -14 : -8,
      growAppend: ''
    }
    (this has a small defect when the last character is a newline)

    ps. Also see this bug for correct multiline display in IE.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •