How to auto-size TextField in a Toolbar?

[Former Member]

If I had a the common's Toolbar with three controls placed in it (a Button1, TextField, & Button2), and the Toolbar is in a browser that can be resized and is 100% of the browser width. Is there a way to auto-size the TextField width to consume the available Toolbar width minus the to Buttons that are on the left and right of the TextField? Thus create some kind of binding or overload a function so the TextField.width = Toolbar.width - Buton1.width - Button2.width - somePadding during the layout phase.

[Qualiture]

I had some good results in the past with the following:

Instead of a Toolbar, I used the table's 'extension' aggregation (the toolbar aggregation can only hold a sao.ui.commons.Toolbar, but the extension aggregation can hold anything)

I then added a matrixlayout with as many cells as you need:

<t:Table id="tbl" rows="{/rows}">
    <t:extension>
        <l:MatrixLayout id="tblToolbar">
            <l:MatrixLayoutRow>
                <l:MatrixLayoutCell><Button text="Click me" /></l:MatrixLayoutCell>
                <l:MatrixLayoutCell><TextField width="100%"/></l:MatrixLayoutCell>
                <l:MatrixLayoutCell><Button text="Search" /></l:MatrixLayoutCell>
            </l:MatrixLayoutRow>
        </l:MatrixLayout>
    </t:extension>
    <t:columns>
    //etc...

Then, set the 'widths' property of the matrixlayout to ["80px", "auto", "80px"] for instance. If you also set the width of the center control to 100%, this will make sure the width of the center cell/content will auto-size:

this.getView().byId("tblToolbar").setWidths(["80px", "auto", "80px"]);

Hope this helps!