GXT3 - Grid: Adding a column with a button to modify row in Editable Grid
In the example the line is editable automatically when line is selected.
http://www.sencha.com/examples/#Exam...oweditablegrid
I want the line to be changed when I click on the edit button that would appear in a popup.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
Info.display("Event", "Call the popup here.");
}
});
nameColumn.setCell(button);
There is a way do get this?
Thanks in advance for your help.
First of all you have yo create a column with TextBoxCell which may you already created.
Then you have to disable default onclick editable behavior of grid.
For that as per Sencha example's file RowEditingGridExample.java you can override onClick event and prevent to fire default code.
public class RowEditingGridExample extends AbstractGridEditingExample {
#Override
protected GridEditing<Plant> createGridEditing(Grid<Plant> editableGrid) {
return new GridRowEditing<Plant>(editableGrid){
#Override
protected void onClick(ClickEvent event) {
}
};
}
}
And when you click on textBoxCell click handler you can start editing manually.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
//Here you can pass a new GridCell like with proper cell index and row index.
GridCell cell = new GridCell(getRowIndex(), getCellIndex());
editing.startEditng(cell);
}
});
nameColumn.setCell(button);
If you want to appear row editor in separate popup you have to design it manually.
Related
I have form with several GWT GXT 3 fields, one of which is a combo box.
When the combo box changes it should call a doSomething method.
My problem is that the onValueChange is only fired when I focus on another form field.
I would like that it changed just when I select an item of the combo box.
How can I do it?
This is part of my code.
final ComboBox<DropDownItemDTO> field = new ComboBox<DropDownItemDTO>(storeCombo, propsTitoliRioComboItemDTO.label());
...
field.addValueChangeHandler(new ValueChangeHandler<DropDownItemDTO>() {
#Override
public void onValueChange(ValueChangeEvent<DropDownItemDTO> event) {
if (event.getValue()!=null) {
value.setFieldValue(event.getValue().getValue());
} else {
value.setFieldValue("");
}
doSomething(event.getValue().getValue());
}
});
I ended up using SelectionHandler, which fires right away on selection
field.addSelectionHandler(new SelectionHandler<DropDownItemDTO>() {
#Override
public void onSelection(SelectionEvent<DropDownItemDTO> event) {
Requirement : Mask the datepicker on blur / form submit.
I was able to get the masking done onBlur with forceparse set to false but i'm unable to navigate to the next month/year in the datepicker maybe because i'm overriding the DOM handlers.
dob.setForceParse(false);
dob.addDomHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent event) {
dob.getTextBox().setText(**masked value**);
}
}, BlurEvent.getType());
dob.addDomHandler(new FocusHandler() {
#Override
public void onFocus(FocusEvent event) {
dob.setValue(**unmasked value**);
}
}, FocusEvent.getType());
I am unable to use ChangeDateHandler, since it automatically assumes "1/1/19" as "1/1/1900" and masks the text mid-way of text enter. Is there any other way i can handle this?
If you are having problems with DatePicker's TextBox you can just hide it and use any other Widget instead.
TextBox is basically used to show the DatePicker when is focused, to show selected date and to enter the date manually.
Here is an example code how to use your own TextBox with DatePicker (I use VerticalPanel to show DatePicker just below the TextBox):
VerticalPanel container = new VerticalPanel();
final DatePicker dob = new DatePicker();
// hide DatePicker's TextBox
dob.getTextBox().getElement().getStyle().setDisplay(Display.NONE);
final TextBox box = new TextBox();
box.addFocusHandler(new FocusHandler() {
#Override
public void onFocus(FocusEvent event) {
dob.show();
box.setText("**unmasked value**");
}
});
dob.addHideHandler(new HideHandler() {
#Override
public void onHide(HideEvent hideEvent) {
box.setText("**masked value**");
}
});
dob.addChangeDateHandler(new ChangeDateHandler() {
#Override
public void onChangeDate(ChangeDateEvent evt) {
Window.alert("ChangeDateEvent");
}
});
container.add(box);
container.add(dob);
Just notice, that you need to call dob.show() when TextBox is focused. I also use DatePicker's HideHandler instead of TextBox's BlurHandler to show masked value but you may change it as you wish.
If you want to change the way of parsing dates like "1/1/19", now you can add your own parser to the TextBox.
I have a user form with a lot of gwt listbox. The form is like an excel form with named list.
It's ugly and the arrows take place.
I would like the cells were like in excel. The arrow appears only when you click in the cell.
I start to program my own widget with a textbox and a listbox embedded into a DeckPanel, switching when you click on the textbox or when the value change. But with this solution, it is necessary to click again to open the listbox.
Now, it will be great, if when you click on the textbox, the listbox will be displayed already open.
In the code below, I try to do this into the method onClick wih this line:
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
But it has no effects.
public class CustomListBox extends Composite implements ClickHandler,
ChangeHandler, HasChangeHandlers {
private final StringListBox listBox;
private final TextBox textBox;
private final DeckPanel panel;
public CustomListBox() {
textBox = new TextBox();
textBox.addClickHandler(this);
textBox.setReadOnly(true);
listBox = new StringListBox();
listBox.addChangeHandler(this);
panel = new DeckPanel();
panel.add(textBox);
panel.add(listBox);
panel.showWidget(0);
// All composites must call initWidget() in their constructors.
initWidget(panel);
}
#Override
public void onClick(ClickEvent event) {
Object sender = event.getSource();
if (sender == textBox) {
panel.showWidget(1);
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
}
}
public void addItem(String item) {
listBox.addItem(item);
}
public int getSelectedIndex() {
return listBox.getSelectedIndex();
}
public String getItemText(int selectedIndex) {
return listBox.getItemText(selectedIndex);
}
#Override
public HandlerRegistration addChangeHandler(ChangeHandler handler) {
return listBox.addChangeHandler(handler);
}
#Override
public void onChange(ChangeEvent event) {
Object sender = event.getSource();
if (sender == listBox) {
textBox.setText(getItemText(getSelectedIndex()));
panel.showWidget(0);
}
}
}
Since you are already programming your own widget, why don't you go all the way. Don't swap out the text box for a list box widget. Instead of a textbox use a label. Add an arrow to your label background when you mouse over, then use a popupPanel for the list itself. In the popupPanel you can make the list items whatever you like, just make sure when you click on it, it sets the text in your original label.
How to add clickHandler to a gwt checkbox, so that when the checkbox is checked, a listbox is shown and when it is unchecked, the listbox disappears?
Following is what I have so far. When I check the checkbox, the list appears, but when I uncheck it, the listbox does not disappear.
VerticalPanel vPanel = new VerticalPanel();
ListBox list = new listBox();
list.setVisible(false);
vPanel.add(list);
.....
.....
checkBox.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent event)
{
boolean checked =((CheckBox) event.getSource()).isEnabled();
if(checked==true)
{
list.addItem("a");
list.addItem("b");
list.addItem("c");
list.setVisible(true);
}
else if(checked==false)
{
componentList.setVisible(false);
}
}
});
Thanks so much in advance.
A better way to do it is to do the value changed handler. The user can even use the keyboards to check the checkbox!
CheckBox c = new CheckBox();
c.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
#Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
componentList.setVisible(event.getValue());
}
});
}
edit -
You should add the items in the list outside. And, depending on the default checkbox value,(checked or unchecked), set the component visible or hidden outside itself in the start.
enabled != checked! (use isChecked or getValue)
Otherwise, go with Bhat's code and advises.
I am trying to focus on a particular list view in a tree, I am using the following code
this.txtListName.setCursorPos(this.txtListName.getText().length());
this.txtListName.setFocus(true);
The text view has the cursor blinking inside it but when I type a key nothing happens, I have to select the text view again before being able to type.
Why is this happening.
SOLVED
The setting the the focus was done inside a for loop that looped over and created the Tree Items, when I removed it from the for loop it worked.
Could it be that something in your current call stack is taking the focus away after you set it. You could try setting the focus in a timeout:
(new Timer() {
#Override
public void run() {
txtListName.setFocus(true);
}
}).schedule(0);
I've tried to recreate your problem but the following snippet works for me:
public void onModuleLoad() {
Tree tree = new Tree();
final TextBox box = new TextBox();
box.setText("some content");
tree.add(box);
Button btn = new Button("set focus");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.setCursorPos(box.getText().length());
box.setFocus(true);
}
});
RootPanel.get().add(tree);
RootPanel.get().add(btn);
}
Isn't that what you're trying to achieve?