1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Vote Rating
    2
    WendyLG is on a distinguished road

      0  

    Default flexing a textarea

    flexing a textarea


    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:
    HTML Code:
    <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>
    Last edited by WendyLG; 29 May 2012 at 1:13 AM. Reason: i was wronmg i weas inserting the label, but it is gone and nothing has changed, and formatted the html

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please show us your code.

    Something like this should work:

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Vote Rating
    2
    WendyLG is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread