1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    11
    Vote Rating
    0
    ChristopheF is on a distinguished road

      0  

    Default Unanswered: Wrap a widget to add another widget next to it

    Unanswered: Wrap a widget to add another widget next to it


    Hello everyone !

    I'm facing a problem.

    I want to turn this (in the .ui.xml file, it's a widget) :

    Code:
    <b:SomeWidget ui:field="someName" />
    Into this :

    Code:
    <a:HelpWrapper text="...">
       <b:SomeWidget  ui:field="someName" />
    </a:HelpWrapper>
    So that another widget (HelpWidget) is added on the right side of my first widget.

    In order to do it, I wrote a little class called "HelpWrapper" :

    Code:
    public class HelpWrapper extends Composite implements HasWidgets.ForIsWidget {
        
        /**
         * The container
         */
        private final HorizontalLayoutContainer container;
        
        /**
         * The help icon widget
         */
        private HelpWidget helpWidget;
        
        /**
         * The wrapped widget
         */
        private Widget wrappedWidget = null;
    
        /**
         * The constructor
         */
        public HelpWrapper() {
            // We create & initialize the container
            container = new HorizontalLayoutContainer();
    
            // We create & add a spacing between the widget and the quick help
            container.add(new LabelToolItem("   "));
            
            // We create & add the quick help widget
            helpWidget = new HelpWidget();
            container.add(helpWidget);
            
            initWidget(container);
        }
        
        /**
         * @param text
         *            The tooltip text
         */
        public void setText(String text) {
            if (helpWidget != null) {
                helpWidget.setTooltipHTML(text);
            }
        }
    
        /**
         * @param size
         *            The size of the icon
         */
        public void setSize(IconSize size) {
            helpWidget.resizeIcon(size);
        }
    
        @Override
        public void add(Widget w) {
            // We add the widget and the help widget
            if (wrappedWidget == null) {
                wrappedWidget = w;
                container.insert(wrappedWidget, 0);
                container.add(new LabelToolItem("   "));
                container.add(helpWidget);
            }
        }
    
        @Override
        public void clear() {
            // We clear the container
            container.clear();
        }
    
        @Override
        public Iterator<Widget> iterator() {
            return container.iterator();
        }
        
        @Override
        public boolean remove(Widget w) {
            boolean ok = container.remove(w);
            if (ok) {
                wrappedWidget = null;
            }
            return ok;
        }
    
        @Override
        public void add(IsWidget w) {
            add(w.asWidget());
        }
    
        @Override
        public boolean remove(IsWidget w) {
            return remove(w.asWidget());
        }
    }

    But for some reason, the height of the original widget is not preserved :-(

    From this :

    base.png

    I get this :
    fail.png

    But what I wanted is this :

    win.png


    What did I do wrong :-( ?

    Thank you in advance !

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    I haven't run your code, but it appears that you are wrapping up a child that needs size to work correctly in a new parent (HelpWrapper) that does not properly pass along sizing information from its parent.

    Without knowing more details about your situation, is there a reason you aren't using the HorizontalLayoutContainer or HBoxLayoutContainer? HLC would be good if you are using a parent to size the children, whereas HBoxLC would be better if the children already have sizes. CssFloatLayoutContainer is another option, which will behave much like HBoxLC.

    Html tags can have display as 'inline' or 'block' - this would be another way to think about solving this. However, setting sizes on an inline element needs to be done carefully. GXT almost always favors using block elements with sizing an positioning - these are the basis for most layout container classes. FlowLayoutContainer, as opposed to the others mentioned earlier, do not do any of this sizing, but leaves it to the html elements and their styling to position and size themselves. If you set two children to be display:inline in it, they will line up, one after the other, but I'm not sure that is what you mean by inline in this case.

    Try out HLC (remember to use layout data!), HBoxLC, and CssFloatLC, see if one of those might make sense instead of crafting your own. If it doesn't, consider posting enough code to allow others to run it - we can run the container you made, but not the other things it lives in or that go in it.

Thread Participants: 1