Results 1 to 6 of 6

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

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    47

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

    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

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    413
    Answers
    20

    Default

    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.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    41

    Default

    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:

    PHP Code:
        private void setTitles(String pFromTitleString pToTitle) {
            
    HorizontalPanel panel = (HorizontalPanelgetPanel();
            
    VerticalPanel buttonBar = (VerticalPanelgetButtonBar();

            
    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

    PHP Code:
            setTitles(pFromTitlepToTitle); 

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

    Have fun!
    -hcr-

  4. #4
    Sencha User
    Join Date
    Jan 2015
    Posts
    29

    Default

    Quote Originally Posted by hcr View Post
    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:

    PHP Code:
        private void setTitles(String pFromTitleString pToTitle) {
            
    HorizontalPanel panel = (HorizontalPanelgetPanel();
            
    VerticalPanel buttonBar = (VerticalPanelgetButtonBar();

            
    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

    PHP Code:
            setTitles(pFromTitlepToTitle); 

    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)

  5. #5
    Sencha User
    Join Date
    Jan 2015
    Posts
    29

    Default

    Quote Originally Posted by icfantv View Post
    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?

  6. #6
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,170
    Answers
    12

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •