I have a custom widget like this, it's basically a couple of text boxes and buttons along with them.
<g:VerticalPanel>
<b:Label>Lower Limit</b:Label>
<b:TextBox ui:field="lowerLimit" addStyleNames="lowerLimitTextBox"></b:TextBox>
<b:Button icon="COPY" addStyleNames="copyAll copyAllLower">Copy To All</b:Button>
</g:VerticalPanel>
<g:VerticalPanel>
<b:Label>Upper Limit</b:Label>
<b:TextBox ui:field="upperLimit" addStyleNames="upperLimitTextBox"></b:TextBox>
<b:Button icon="COPY" addStyleNames="copyAll copyAllUpper">Copy To All</b:Button>
</g:VerticalPanel>
There are many of these widgets on a page. When a button is clicked I want to be able to select the text box to it's left and copy that value to all the corresponding widgets.
I can select the buttons but don't know how to select the textbox to it's immediate left. Can anyone help with this.
I'm adding the jQuery-selectors tag as the selector might be similar to that of GwtQuery.
Well, first you have to know how a VerticalPanel
is rendered so as you can figure out where is the text box in the dom.
VerticalPanel
is rendered as a table, and each widget is positioned into a structure: <tr><td>widget</td></tr>
In your case you can use closest()
and prev()
to get the previous tr
of your button:
$(button).closest("tr").prev();
Then use find()
to get the input
inside the previous tr
$(button).closest("tr").prev().find("input")
So using the gquery ability of finding Widgets
, the code for each button in your UI could look like:
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
TextBox box = $(button).closest("tr").prev().find("input").widget();
for (TextBox b : $(".gwt-TextBox").widgets(TextBox.class) ) {
b.setValue(box.getValue());
}
}
});
Although if you wanted to use gquery
to enhance all buttons at once, everything is much simpler:
$(".gwt-Button").click(new Function(){
public void f() {
String value = $(this).closest("tr").prev().find("input").val();
$(".gwt-TextBox").val(value);
}
});