PDA

View Full Version : EditorGrid with Combo editor with store using JSON: How to load initial value?



HerrB
15 Jul 2009, 6:16 AM
I'd like to use an EditorGrid with a combobox both using there own store filled by a webservice (JSON). The combobox should show a text as value and store an id on change.

The grid store uses "RoleModel" objects which contain an itemid, a name, a description and the id for a so-called "Area" (areaid).

The combobox store uses "AreaModel" objects which contain an itemid and a name.

Unfortunately, the combobox shows the id for the "Area" instead of the name of the "Area". By default and shown in the examples, the combobox only searches for the selected value, if the user clicks into the combobox field (PreProcessor and PostProcessor). So, the shown value is not loaded/assigned on initial grid loading.

E.g.

Name Description Area
TestName Test 0
instead of

Name Description Area
TestName Test TestArea


Is there a way, how I can load the initially selected objects (by using the id) in the combobox store, so that the area name is shown instead of the id?
Maybe using setOriginalValue for the combobox editor on render? If yes, any hint, how/where?
Or do I have to load the area name for the RoleModel just to show it initially (means: load "areaid" and "areaname" when adding the lines to the grid and just show "areaname", having nothing behind it) and the data is only loaded, if the users clicks into the field? Any hint, how I do that?
Is there a better approach to get the needed functionality? E.g. using a RowEditor?


The currently used code (which unfortunately won't work out of the box, I'm sorry. Hint: RequestBuilderFactory just returns a needed Builder object and is not part of Ext GWT, RoleModel and AreaModel are BaseModel derived classes):

private EditorGrid<RoleModel> createGrid() {
// Generate JsonReader to later map JSON data to object model
final JsonLoadResultReader<ListLoadResult<RoleModel>> objReader = new JsonLoadResultReader<ListLoadResult<RoleModel>>(new RoleModel().getModelType()) {
@Override
protected ModelData newModelInstance() {
return new RoleModel();
}
};

JSONProxy<List<RoleModel>> objProxy = new JSONProxy<List<RoleModel>>(RequestBuilderFactory.getRequestBuilder("roles.asmx", "getItems"));

BaseListLoader<ListLoadResult<RoleModel>> objLoader = new BaseListLoader<ListLoadResult<RoleModel>>(objProxy, objReader);

// Generate data store
final ListStore<RoleModel> objStore = new ListStore<RoleModel>(objLoader);

// Specify columns
List<ColumnConfig> lstColumns = new ArrayList<ColumnConfig>();

// Checkbox column
CheckBoxSelectionModel<RoleModel> objSelectionModel = new CheckBoxSelectionModel<RoleModel>();
lstColumns.add(objSelectionModel.getColumn());

// Data columns
ColumnConfig objColumn;

objColumn = new ColumnConfig("name", "Name", 100);
objColumn.setEditor(new CellEditor(new TextField<String>()));
lstColumns.add(objColumn);

objColumn = new ColumnConfig("areaid", "Area", 100);
objColumn.setEditor(getAreaCellEditor());
lstColumns.add(objColumn);

objColumn = new ColumnConfig("description", "Description", 200);
objColumn.setEditor(new CellEditor(new TextField<String>()));
lstColumns.add(objColumn);

ColumnModel objColumns = new ColumnModel(lstColumns);

// Generate grid
objGrid = new EditorGrid<RoleModel>(objStore, objColumns);
objGrid.setStateful(true);
objGrid.setBorders(true);
objGrid.setAutoExpandColumn("name");
objGrid.setAutoHeight(true);

objGrid.addListener(Events.Attach, new Listener<GridEvent<RoleModel>>() {
public void handleEvent(GridEvent<RoleModel> objEvent) {
objLoader.load();
}
});

// Set checkbox selection model as selection model
objGrid.setSelectionModel(objSelectionModel);

return objGrid;
} // createGrid

private CellEditor getAreaCellEditor() {
JSONProxy<List<AreaModel>> objProxy = new JSONProxy<List<AreaModel>>(RequestBuilderFactory.getRequestBuilder("areas.asmx", "getItems"));

JsonLoadResultReader<PagingLoadResult<AreaModel>> objReader = new JsonLoadResultReader<PagingLoadResult<AreaModel>>(new AreaModel().getModelType()) {
@Override
protected ListLoadResult<ModelData> newLoadResult(Object loadConfig, List<ModelData> lstModels) {
PagingLoadConfig objPagingConfig = (PagingLoadConfig) loadConfig;
PagingLoadResult<ModelData> objResult = new BasePagingLoadResult<ModelData>(lstModels, objPagingConfig.getOffset(), objPagingConfig.getLimit());

return objResult;
}
};

PagingLoader<PagingLoadResult<AreaModel>> objLoader = new BasePagingLoader<PagingLoadResult<AreaModel>>(objProxy, objReader);

objLoader.addListener(PagingLoader.BeforeLoad, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent objEvent) {
objEvent.<ModelData> getConfig().set("start", objEvent.<ModelData> getConfig().get("offset"));
}
});

objLoader.load(); //Needed, as otherwise store is not filled

ListStore<AreaModel> objStore = new ListStore<AreaModel>(objLoader);

final ComboBox<AreaModel> objCboArea = new ComboBox<AreaModel>();
objCboArea.setWidth(580);
objCboArea.setDisplayField("name");
objCboArea.setStore(objStore);
objCboArea.setHideTrigger(true);
objCboArea.setPageSize(10);
objCboArea.setForceSelection(true);
objCboArea.setTriggerAction(TriggerAction.ALL);

CellEditor objEditor = new CellEditor(objCboArea) {
@Override
public Object preProcessValue(Object objValue) {
if (objValue == null) {
return objValue;
}

return null; // Just for the moment return nothing
//return objCboArea.findModel(objValue.toString(), "");
}

@Override
public Object postProcessValue(Object objValue) {
if (objValue == null) {
return objValue;
}
return ((AreaModel) objValue).getItemID();
}
};

return objEditor;
} // getAreaComboBox

Thank you for your help.

Regards,

HerrB