CODEWITHSUNDEEP
extjsaem
Ronald
Ronald

Reputation: 2917

Including a button for a related textfield in a CQ dialog

How can I include a button with an input field, so that it looks like this (without the icon): enter image description here

The purpose of this is so that if somebody enters invalid text, he can click on the button for some suggestions.

(I think this part could be achieved by a JavaScript function which calls a SlingServlet, returning some suggestions to be displayed e.g. maybe as an alert.)

Upvotes: 0

Views: 1048

Answers (1)

anotherdave
anotherdave

Reputation: 6754

Since you've clarified in comments that having them in one line is important for you, you could wrap them both in a toolbar XType:

<toolbar
    jcr:primaryType="cq:Widget"
    xtype="toolbar">
    <items
        jcr:primaryType="cq:WidgetCollection">
        <input
            jcr:primaryType="cq:Widget"
            xtype="textfield"
            name="./myInput">
        </input>
        <button
            jcr:primaryType="cq:Widget"
            xtype="button"
            name="./myButton"
            text="Submit">
        </button>
    </items>
</toolbar>

I think you can then also style the widgets further, e.g. width of the input field.

Check out the API docs too, they have some examples of a ComboBox on the toolbar page, which talks of type-ahead & suggested values — it sounds like it could be adapted to what you're looking for, if the data field came from an external JSON source (e.g. your SlingServlet), rather than coded inline.

Upvotes: 3

Related Questions