Question

is it possible to use GXT’s binding mechanism to bind a Grid to an Html (or other Widget implementation for that matter)?

it seems from the examples that it’s only applicable for forms (FormBinding), while my purpose is to have a Template updating a widgets inner element, driven by the grid’s SelectionChangedEvents sending the models for that template.

Answer 1

Binding grids and generic components directly is apparently not possible at the current version of GXT, anyhow this is an alternative solution offered as a workaround:

I just made use of the examples Grid Binding and Templates to support your requirement. Here is the modified code

@Override
protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    setStyleAttribute("margin", "10px");

    ContentPanel cp = new ContentPanel();

    cp.setHeading("Form Bindings");
    cp.setFrame(true);
    cp.setSize(800, 400);
    cp.setLayout(new RowLayout(Orientation.HORIZONTAL));

    final LayoutContainer panel = new LayoutContainer(new FlowLayout());

    Grid<Stock> grid = createGrid();
    grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

    final Template template = new Template(getTemplate());
    grid.getSelectionModel().addListener(Events.SelectionChange, new Listener<SelectionChangedEvent<Stock>>() {
        public void handleEvent(SelectionChangedEvent<Stock> be) {
            if (be.getSelection().size() > 0) {
                template.overwrite(panel.getElement(), Util.getJsObject(be.getSelectedItem()));
            } else {
                panel.removeAll();
            }
        }
    });
    cp.add(grid, new RowData(.6, 1));
    cp.add(panel, new RowData(.4, 1));

    add(cp);
}

private native String getTemplate() /*-{
    var html = [ '<p>Name: {name}</p>', '<p>Symbol: {symbol}</p>',
            '<p>Last: {last}</p>', '<p>Last Updated: {date}</p>', ];
    return html.join("");
}-*/;

Add these modifications to the Grid Binding example. Hope this helps.

Thanks,
Ganesh