PDA

View Full Version : get model of SimpleComboBox ?



Nico33
30 Jan 2010, 9:31 AM
Hi all,

I would like to get the model of the edited value with a SimpleComboBox.

I've created a basic example for demonstration purpose, let's have 3 columns on an editor grid with integer value and a last column with the sum of the 3 other.

The 3 columns are editable with a SimpleComboBox. When postProcessValue I would like to update the model to display the sum of the 3 column.

But I'm unable to get the model... how to do that ?
Please find my example :


final class MyValue extends BaseModel
{
private static final long serialVersionUID = -3209667217029014368L;

public MyValue(int start)
{
set("group", "test");
int sum = 0;
for (int i = 0 ; i < 3 ; i++)
{
int value = start + i;
set("val" + i, value);
sum += value;
}
set("sum", sum);
}

public static List<MyValue> getValues()
{
List<MyValue> list = new ArrayList<MyValue>();
list.add(new MyValue(1));
list.add(new MyValue(2));
list.add(new MyValue(3));
return list;
}
}

public class EditableGridExample implements EntryPoint
{
public void onModuleLoad()
{
Window window = new Window();
window.setSize(800, 500);
window.add(new GroupingGridExample());
window.show();
}

public class GroupingGridExample extends LayoutContainer
{
private EditorGrid<MyValue> grid;

@Override
protected void onRender(Element parent, int index)
{
super.onRender(parent, index);
setLayout(new FlowLayout(10));

GroupingStore<MyValue> store = new GroupingStore<MyValue>();
store.add(MyValue.getValues());
store.groupBy("group");


List<ColumnConfig> config = new ArrayList<ColumnConfig>();
ColumnConfig group = new ColumnConfig("group", "group", 150);
config.add(group);
for (int i = 0 ; i < 3 ; i++)
{
ColumnConfig val = new ColumnConfig("val" + i, "Val " + i, 150);
final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
for (int j = 0 ; j < 10 ; j++)
combo.add(String.valueOf(j));
val.setEditor(createComboEditor(combo));
config.add(val);
}
ColumnConfig sum = new ColumnConfig("sum", "sum", 150);
config.add(sum);


final ColumnModel cm = new ColumnModel(config);
GroupingView view = new GroupingView();
view.setShowGroupedColumn(false);
view.setForceFit(true);

grid = new EditorGrid<MyValue>(store, cm);
grid.setView(view);
grid.setBorders(true);
ContentPanel panel = new ContentPanel();
panel.setHeading("Grouping Example");
panel.setCollapsible(true);
panel.setFrame(true);
panel.setSize(700, 450);
panel.setLayout(new FitLayout());
panel.add(grid);
add(panel);
}

private CellEditor createComboEditor(final SimpleComboBox<String> combo)
{
final CellEditor editor = new CellEditor(combo)
{
@Override
public Object preProcessValue(Object value)
{
if (value == null)
return value;
return combo.findModel(value.toString());
}
@Override
public Object postProcessValue(Object value)
{
if (value == null)
return value;
if (this.getModel() == null)
System.out.println("model null");
return ((ModelData) value).get("value");
}
};
return editor;
}

}
}Thanks in advance for any help.

Nico33
2 Feb 2010, 2:51 AM
it looks to be a trivial task, but I can't find anything

Arno.Nyhm
2 Feb 2010, 8:19 AM
there are 3 ways of solution for your problem: #1 for your special problem and #3 is for your real goal.

PS: note if you try to change the value of your model: this is not displayed in the grid - better you change the Record - this change is direct visible.



listen for the events

1) better listen for events on the combobox instead of using the process value thing


2) more better ist to listen for AfterEdit events of the grid:

look at this example:
http://www.extjs.com/forum/showthread.php?p=417463#post417463

(dont miss the best solution at the end of the thread)
PS: but instead of refresh the full grid there is also a refresh row method.

i think you dont need the model you need only to update the grid after an edit.


2) best solution: SummaryColumn

maybe with a summary column you are better because it is automatic calculating so you dont need so much work:
http://www.extjs.com/examples/explorer.html#livegroupsummary

Nico33
2 Feb 2010, 11:22 AM
Thanks Arno for your answer.

I've seen the Summary Column, but as you maybe guessed, it's a minimal example, not really what I need to do.

So, using the GridEvent is good for getting the model. Thanks :)
Then, I can update the model, but I've not found how I can update only one row.

So I use


grid.getView().refresh(false);I've seen the refreshRow on the view, but it's a protected method. How would you do that ?

Thanks for your help

Arno.Nyhm
3 Feb 2010, 1:46 AM
So, using the GridEvent is good for getting the model. Thanks :)
Then, I can update the model, but I've not found how I can update only one row.


if you get with this model the Record (not the model) from the store and update this record, then you dont need a refresh


Record r = myListStore.getRecord(myModel);



So I use


grid.getView().refresh(false);I've seen the refreshRow on the view, but it's a protected method. How would you do that ?

you can do that like sven described it here with overwriting GridView to get access to the method:
http://www.extjs.com/forum/showthread.php?p=286682#post286682

Nico33
3 Feb 2010, 12:32 PM
Ok, I've replaced the


grid.getView().refresh(false);with



ModelData model = be.getModel();

// [.... update values of model ...]

be.getGrid().getStore().getRecord(model).commit(false);
Thanks for your answer, it's working.

Best regards ;)