Flexible and safe display

[sdc]

As said here (http://extjs.com/forum/showthread.php?t=37006), it would be really appreciated if we were able to use multiple fields from a model to display text in ComboBoxes, Tables, Trees, etc
In the same way, I would really like not to have to use a string constant.

As an example, to set the display text, we could do like this :

widget.setDisplayProvider(new ModelDisplayProvider<Stock>() {
public String getDisplayValue(Stock model) {
return model.getName() + " " + model.getSymbol();
}
});The issue exists for at least 3 months, it would be great if we could get it for 1.2 or 1.3. Thanks in advance.

[darrellmeyer]

There already exists ways to use multiple fields for combos, table, and trees. For table and trees you use a ModelStringProvider. Yes, there is a display field, but you can simple ignore it.

For ComboBox, you can use XTemplate, which is very powerful way to render content. From the docs:


/**
* A template class that supports advanced functionality like autofilling
* arrays, conditional processing with basic comparison operators,
* sub-templates, basic math function support, special built-in template
* variables, inline code execution and more.
*/To use 2 fields of your model you would do this:


private native String getTemplate() /*-{
return '<tpl for="."><div class="x-combo-list-item">{name} {symbol}</div></tpl>';
}-*/;I know you might say this is overkill for what you are trying to do, so I added a new method to ComboBox. You can just do this:


combo.setSimpleTemplate("{abbr} {name}");For a more advanced example, here is the template for the forum search combo box example. Notice the date formatting of the lastPost propert which uses the GWT DateTimeFormat pattern.


public native String getTemplate() /*-{
return [
'<tpl for="."><div class="search-item">',
'<h3><span>{lastPost:date("MM/dd/y")}<br />by {author}</span>{title}</h3>',
'{excerpt}',
'</div></tpl>'
].join("");
}-*/;

[sdc]

Thanks for your answer, Darell.

That's ok for using multiple fields, but I'd prefer an "object way". Say, if I want to refactor my model attributes, I will have to remember that I'm explicitely using the name of my attributes in the template...

[Grandiosa]

I haven't looked at 1.1 yet but is the Xtemplate stuff coming from ExtJS? Are we being forced into dealing with JSNI clauses and JSON strings to gain control of various rendering issues?
One of the things I like about GWT/ExtGWT is that it keeps me on a very safe distance from javascript. So I would prefer OO abstractions for this but that might not be possible...

[posta07]

Darrell,

When using the simple template, I can correctly get aggregate strings to appear in the drop-down box, but upon a selection, the aggregate does not appear in the combo box (nothing does if the displayField is not set).

How can I work around this?

[darrellmeyer]

Are you saying you want the aggregate value displayed as the value in the text box after the selection?

[darrellmeyer]

ListView, which combo uses for the list, allows you to "process" your model before it is displayed. This is a great way to format and customize data without using a template. With this method, the custom data will be displayed in both the list and text box. With the latest code, you can do something like this:


public void onModuleLoad() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

ListStore<State> states = new ListStore<State>();
states.add(TestData.getStates());

ComboBox<State> combo = new ComboBox<State>();
combo.setLazyRender(true);
combo.setDisplayField("customName");
combo.setWidth(150);
combo.setStore(states);
combo.setMinChars(1);
combo.setTypeAhead(true);
combo.setView(new ListView<State>() {
@Override
protected State prepareData(State state) {
state.set("customName", state.getAbbr() + " " + state.getName());
return state;
}
});
combo.setTriggerAction(TriggerAction.ALL);
vp.add(combo);
RootPanel.get().add(vp);
}


I haven't looked at 1.1 yet but is the Xtemplate stuff coming from ExtJS? Are we being forced into dealing with JSNI clauses and JSON strings to gain control of various rendering issues?
One of the things I like about GWT/ExtGWT is that it keeps me on a very safe distance from javascript. So I would prefer OO abstractions for this but that might not be possible...

I think you will find this solution is little more "OO" like.

[posta07]

Excellent!

Thank you!

I believe it works now.

EDIT: however, I'm now getting a warning about a missing resource, namely, images/default/form/radio.gif

is this something new?
The exact warning:

[WARN] Resource not found: images/default/form/radio.gif; (could a file be missing from the public path or a <servlet> tag misconfigured in module com.softroots.sonic.Application.gwt.xml ?)

[posta07]

One thing I did notice, however minor, when the combo box drop down is dropped for the first time, the "Loading" image doesn't show up... it's just a blank list that hangs there for a while.

I am using the Proxy/Reader/Loader/Store configuration to populate the combo box.
I did see the loading image before using this field aggregation strategy, but now the image doesn't show up.

Thanks...

[sdc]

ListView, which combo uses for the list, allows you to "process" your model before it is displayed. This is a great way to format and customize data without using a template. With this method, the custom data will be displayed in both the list and text box. With the latest code, you can do something like this:

I think you will find this solution is little more "OO" like.

Thank you, Darell. This is a good idea.
Can we do something similar in tree/list/table ?

[sdc]

Mmm... Actually, tell me if I'm wrong, but I don't see a way to do that with a bean model (e.g. Customer)

[darrellmeyer]

This should work with BeanModel as well. Properties can be set that do not have matching methods in the underlying bean. The data is stored in the bean model's data map, not the bean.

[posta07]

It works with bean model.
All of my combo boxes are using bean model.



I don't see a way to do that with a bean model (e.g. Customer)

What specific problems are you getting?

[sdc]

Hi guys,

Sorry :"> It should work with proxy and loader. I think the code would be close to this :

public void onModuleLoad() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

// gwt service
final ExampleServiceAsync service = GWT.create(ExampleService.class);

// proxy and reader
RpcProxy<Object,List<Customer>> proxy = new RpcProxy<Object, List<Customer>>() {
@Override
public void load(Object loadConfig, AsyncCallback<List<Customer>> callback) {
service.getCustomers(callback);
}
};
BeanModelReader<Object> reader = new BeanModelReader<Object>();

// inconsistent use of generics (Customer cannot be cast to BeanModel)
ListLoader<?> loader = new BaseListLoader(proxy,reader);
ListStore<BeanModel> store = new ListStore<BeanModel>(loader);

loader.load();

ComboBox<BeanModel> combo = new ComboBox<BeanModel>();
combo.setLazyRender(true);
combo.setDisplayField("customName");
combo.setWidth(150);
combo.setStore(store);
combo.setMinChars(1);
combo.setTypeAhead(true);
combo.setView(new ListView<BeanModel>() {
@Override
protected BeanModel prepareData(BeanModel beanModel) {
Customer bean = beanModel.getBean();
beanModel.set("customName", bean.getName() + " " + bean.getEmail());
return beanModel;
}
});
combo.setTriggerAction(TriggerAction.ALL);
vp.add(combo);
RootPanel.get().add(vp);
}
I haven't tested this code but I suppose it works (I have just noticed an inconsistent use of generics - due to gwt generation). It looks very nice. Thanks again, Darell ;)

[sdc]

Can we do something similar with tables and trees ?
For tables, maybe we can with

TableColumn.setRenderer(new CellRenderer(){
public String render(T item, String property, Object value){
Customer bean = ((BeanModel)value).getBean();
return bean.getName() + " " + bean.getEmail();
}
});

[darrellmeyer]

Yes, I am going to add similar functionality to tree, list, and table. Ill post here when complete.

You can already do what you are asking for Table. Do item.getModel() to get the model, and then getBean() to get the bean.

[sdc]

Nice ! I'm glad to read that ! I'll wait for it.

[krunal]

I understand the following code to use multiple properties of model to display custom text in the text field and in the list of a combo box.

I still don't understand, how this can be used if I want add image icon and text both in textfield and list of a combobox? Do I use template in the ListView? If this is very basic question, please point me to a documentation or a sample with this capability.

Thanks.


ListView, which combo uses for the list, allows you to "process" your model before it is displayed. This is a great way to format and customize data without using a template. With this method, the custom data will be displayed in both the list and text box. With the latest code, you can do something like this:


public void onModuleLoad() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

ListStore<State> states = new ListStore<State>();
states.add(TestData.getStates());

ComboBox<State> combo = new ComboBox<State>();
combo.setLazyRender(true);
combo.setDisplayField("customName");
combo.setWidth(150);
combo.setStore(states);
combo.setMinChars(1);
combo.setTypeAhead(true);
combo.setView(new ListView<State>() {
@Override
protected State prepareData(State state) {
state.set("customName", state.getAbbr() + " " + state.getName());
return state;
}
});
combo.setTriggerAction(TriggerAction.ALL);
vp.add(combo);
RootPanel.get().add(vp);
}

I think you will find this solution is little more "OO" like.

[darrellmeyer]

Adding an image to the text field itself is not supported. If you want to icon to the drop down list you can use a custom template. Take a look a the 3rd drop down at http://extjs.com/examples/forms/combos.html. You can view the source code by clicking the 'View Source' tab.

[krunal]

Ok that answers my question. I was trying various ways of adding image to text field which was not possible.

Thanks.


Adding an image to the text field itself is not supported. If you want to icon to the drop down list you can use a custom template. Take a look a the 3rd drop down at http://extjs.com/examples/forms/combos.html. You can view the source code by clicking the 'View Source' tab.

[sdc]

Yes, I am going to add similar functionality to tree, list, and table. Ill post here when complete.

You can already do what you are asking for Table. Do item.getModel() to get the model, and then getBean() to get the bean.

Will we get it for 2.0 ?

[sdc]

Renderers do the job for tables and grids.
I don't know the news for lists and trees.

[sdc]

What is the status for lists and trees ?

[sdc]

I need it for a tree. Something new ?