my Apps: * COOL MOVIE BROWSER (sports, tv on net) here * MONEY ON THREAD (personal finance) here * HIT-BALL (cute game) here



GXT - Show / hide the borders, individual, on sides of a panel

Do you need to play with the borders of the panel, individual, like top, left, bottom and right  ones.

The solution is valid only for the GXT (Ext GWT) library, and provide a new set of CSS classes, to override the ContentPanel, and add the helper functions in it.

- So, first step, here are the required CSS styles:

.my-border-top {
    border-top: 1px solid #99BBE8;
}

.my-border-bottom {
    border-bottom: 1px solid #99BBE8;
}

.my-border-left {
    border-left: 1px solid #99BBE8;
}

.my-border-right {
    border-right: 1px solid #99BBE8;
}

- The second step, is to use those CSS styles in our extended panel:

public MyPanel extends ContentPanel {

     public MyPanel () {
         /* remove all borders */
         setBodyBorders (false);
     }

    /* shows / hides the top side border */
     public void setTopBorder (boolean show) {
         setVisibleSideBorder (show, "left");
     }

    /* shows / hides the bottom side border */
    public void setBottomBorder (boolean show) {
        setVisibleSideBorder (show, "bottom");
    }

    /* shows / hides the left side border */
    public void setLeftBorder (boolean show) {
        setVisibleSideBorder (show, "left");
    }

   /* shows / hides the right side border */

    public void setRightBorder (boolean show) {
         setVisibleSideBorder (show, "right");
    }

   /* shows / hides the selected (left, right, top, bottom) side border */
   private void setVisibleSideBorder (boolean show, String sideName) {
       if (rendered) {
           El elem = fly(getStyleElement());
           if (show) {
               elem.addStyleName("my-border-" + sideName);
           } else {
               elem.removeStyleName("my-border-" + sideName);
           }
       } else {
           if (show) {
               addStyleName("my-border-" + sideName);
           } else {
               removeStyleName("my-border-" + sideName);
           }
       }

   }
}

- Now this is how we can use the provided solution:


MyPanel pane = new MyPanel ();
...
pane.setRightBorder (true);


so this panel has visible only the right-side border.

Cheers!

1 comment: