flexing a textarea

[WendyLG]

I have a text area, with a scrollbar I have set flex:1, minHeight:200. it is inside a panel that has flex:1 layout fit.
This panel is inside another panel that has layout : vbox.
When the panel has to flex ExtJS places a white area underneath the textarea, and the textarea remains exactly the same size.

I haven't set the textarea to grow, as i don't want it sizing depending on the contents. I want it flexing with sceeen space.

Is this possible?

This is the output from chrome's debugger:

<div id="u4f_risection-2114-innerCt" class="x-box-inner "
        role="presentation" style="height: 265px; width: 294px;">
        <div id="u4f_risection-2114-targetEl"
            style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px">
            <div id="u4_container-2115"
                class="x-container x-box-item x-container-default x-box-layout-ct"
                data-u4xtype="u4_container"
                style="margin: 0px; left: 0px; top: 0px; width: 294px;">
                <div id="u4_container-2115-innerCt" class="x-box-inner "
                    role="presentation" style="height: 200px; width: 294px;">
                    <div id="u4_container-2115-targetEl"
                        style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px">
                        <div id="u4f_hugetextelement-2117"
                            class="x-panel x-box-item x-panel-default"
                            style="background-color: yellow; padding: 5px 0px; margin: 0px; height: 200px; left: 0px; top: 0px; width: 294px; background-position: initial initial; background-repeat: initial initial;"
                            data-u4xtype="u4f_hugetextelement">
                            <div id="u4f_hugetextelement-2117-body"
                                class="x-panel-body x-panel-body-default x-panel-body-default x-layout-fit x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left"
                                style="height: 190px; left: 0px; top: 0px; width: 294px;">
                                <table id="textareafield-2118"
                                    class="x-field x-form-item x-fit-item x-field-default x-fit-form-item"
                                    style="border-width: 0px; margin: 0px; table-layout: fixed; height: 190px; width: 294px;"
                                    cellpadding="0">
                                    <tbody>
                                        <tr id="textareafield-2118-inputRow">
                                            <td id="textareafield-2118-labelCell" style="display: none;"
                                                valign="top" halign="left" width="102"
                                                class="x-field-label-cell"><label
                                                id="textareafield-2118-labelEl"
                                                for="textareafield-2118-inputEl"
                                                class="x-form-item-label x-form-item-label-left"
                                                style="width: 100px; margin-right: 2px;"></label></td>
                                            <td class="x-form-item-body " id="textareafield-2118-bodyEl"
                                                role="presentation" colspan="3" style="width: 100%;"><textarea
                                                    id="textareafield-2118-inputEl" name="message" rows="4"
                                                    cols="20" class="x-form-field x-form-text"
                                                    style="width: 100%; -webkit-user-select: text; height: 190px;"
                                                    autocomplete="off" aria-invalid="false" data-errorqtip="">Lorem ipsum (lots more text i deleted from here) </textarea></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

[scottmartin]

Please show us your code.

Something like this should work:

items: [
    {
        xtype: 'form',
        bodyPadding: 10,
        title: 'My Form',
        flex: 1
    },
    {
        xtype: 'form',
        layout: {
            type: 'fit'
        },
        bodyPadding: 10,
        title: 'My Form',
        flex: 1,
        items: [
            {
                xtype: 'textareafield',
                fieldLabel: 'Label'
            }
        ]
    }
]

Regards,
Scott.

[WendyLG]

I made a small sample program (to post in here, once I knew it was meant to work) and it worked, so something in our bigger application is blocking it