Titles or Headers for DualListField "from" and "to" field?

[sarada]

Hi All,

I am still learning GXT coding. I have a question with DualListField. I see that it can added on a form and label can be provided for the whole field. Is it possible to include a title or header on top of each "from" and "to" List views?

Thanks,
Sarada

[icfantv]

The short answer looks like "no," not easily.

That said, DualListField wraps two ListView widgets. So anything you can do with ListView widgets you can potentially do here (it would just take some tweaking). Do notice that the ListView objects in DualListField are private and not protected, so any subclassing will need to take this into account.

[hcr]

Since this was a requirement in my project, I was able to solve this.

We have subclassed most of sencha's widgets that we use since we need to tweak one thing or another and for this modification I do strongly suggest to encapsulate it.

So in your subclass of the DualListField you need 3 new methods:

    private void setTitles(String pFromTitle, String pToTitle) {
        HorizontalPanel panel = (HorizontalPanel) getPanel();
        VerticalPanel buttonBar = (VerticalPanel) getButtonBar();

        panel.remove(getFromView());
        panel.remove(getToView());
        panel.remove(buttonBar);

        ContentPanel cp = new ContentPanel();
        cp.setHeadingText(pFromTitle);
        cp.add(getFromView());
        panel.add(cp);

        panel.add(buttonBar);

        cp = new ContentPanel();
        cp.setHeadingText(pToTitle);
        cp.add(getToView());
        panel.add(cp);
    }

    private native Object getPanel() /*-{
         return [email protected]::panel;
    }-*/;

    private native Object getButtonBar() /*-{
        return [email protected]::buttonBar;
    }-*/; 

And in your constructor you can simply call after the super call

        setTitles(pFromTitle, pToTitle); 

Hope this will help future generations... ;-)

Have fun!
-hcr-

[gui0506]

Since this was a requirement in my project, I was able to solve this.

We have subclassed most of sencha's widgets that we use since we need to tweak one thing or another and for this modification I do strongly suggest to encapsulate it.

So in your subclass of the DualListField you need 3 new methods:

    private void setTitles(String pFromTitle, String pToTitle) {
        HorizontalPanel panel = (HorizontalPanel) getPanel();
        VerticalPanel buttonBar = (VerticalPanel) getButtonBar();

        panel.remove(getFromView());
        panel.remove(getToView());
        panel.remove(buttonBar);

        ContentPanel cp = new ContentPanel();
        cp.setHeadingText(pFromTitle);
        cp.add(getFromView());
        panel.add(cp);

        panel.add(buttonBar);

        cp = new ContentPanel();
        cp.setHeadingText(pToTitle);
        cp.add(getToView());
        panel.add(cp);
    }

    private native Object getPanel() /*-{
         return [email protected]::panel;
    }-*/;

    private native Object getButtonBar() /*-{
        return [email protected]::buttonBar;
    }-*/; 

And in your constructor you can simply call after the super call

        setTitles(pFromTitle, pToTitle); 

Hope this will help future generations... ;-)

Have fun!
-hcr-

I tried it and does not work well. The last entries in both ListViews are missing. (maybe because DualListField is still doing some layout based on the size of listViews instead of your ContentPanels)

[gui0506]

The short answer looks like "no," not easily.

That said, DualListField wraps two ListView widgets. So anything you can do with ListView widgets you can potentially do here (it would just take some tweaking). Do notice that the ListView objects in DualListField are private and not protected, so any subclassing will need to take this into account.

can you explain more on how to add heading text to a ListView?

[branflake2267]

The workaround above looks nifty, although instead of returning Object, I'd return the type of the object being retrieved, then there's no need for a cast. So if its a HorizontalPanel you're getting with the JSNI method, return the type you get.