Results 1 to 3 of 3

Thread: Combo box rendering - GXT 4.0.3

  1. #1
    Ext GWT Premium Member
    Join Date
    Mar 2010
    Posts
    73

    Default Combo box rendering - GXT 4.0.3

    My problem is that I have a combo box with a large number of entries. When I expand the box, my page scrolls and pushes the combo box nearly off the top of the screen. I have done some research on this.

    All code is from com.sencha.gxt.cell.core.client.form.ComboBoxCell.

    First, let’s look at expand().

    Code:
    public void expand(final Context context, final XElement parent, final ValueUpdater<T> updater, final T value) {
    .
    .
    .
        restrict(parent);
    
        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
          @Override
          public void execute() {
            restrict(parent);
          }
        });
    .
    .
    .
    }
    Here we see that restrict() is called twice every time expand() is called.

    So let’s take a look at restrict(). There are two lines that we care about.

    Code:
    protected void restrict(XElement parent) {
    .
    .
    .
    .
        // set the position
        listContainer.setPixelSize(targetWidth, targetHeight);
        listContainer.getElement().alignTo(listAnchor, anchorAlignment, 0, 0);
    .
    .
    .
    }



    After setPixelSize(), the container’s height is correctly set.

    If you set a breakpoint at alignTo() and step, you will see the entire list in the browser (regardless of whether the max height has been set or not). This causes the page to scroll.

    The height is corrected later, but by that time the scrolling has already occured.

    The reason for this, as near as I can figure, is that even though the container’s height is correctly set, ComboBoxCell::listView has not yet had its height corrected (in my use case, it’s over 6,000px tall).

    My solution for this is to override restrict() to:

    Code:
    protected void restrict(XElement parent) {
    .
    .
    .
        // set the position
        listContainer.setPixelSize(targetWidth, targetHeight);
        listView.setPixelSize(targetWidth, targetHeight - borders);
        listContainer.getElement().alignTo(listAnchor, anchorAlignment, 0, 0);
    .
    .
    .
    }
    Now everything appears to work correctly (No more scrolling).

    My questions are:

    1. Is this an optimal solution?
    2. Do you foresee any unintended side effects to this solution?


    Thank you for your time.




  2. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I can provide options, but I want to make sure I'm on the same page. And using a test case to helps me sync up faster and return options faster. Would you be willing to replicate your issue in a test case? I have a simple combo test case here that could be used to start from? https://gist.github.com/branflake226...cff0e3eb7d1525

  3. #3
    Ext GWT Premium Member
    Join Date
    Mar 2010
    Posts
    73

    Default

    The first time you select, the screen should scroll. Every time after that, it's fine.



    Code:
    packagecom.sencha.gxt.test.client.combo;
    
    import java.util.stream.IntStream;
    
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.cell.core.client.form.ComboBoxCell;
    import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
    import com.sencha.gxt.data.shared.LabelProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
    import com.sencha.gxt.widget.core.client.form.ComboBox;
    
    
    public class RawEntryPoint implements EntryPoint {
        @Override
        public void onModuleLoad() {
            ComboBox<Company> combo = createCombo();
    
    
            HorizontalLayoutContainer inner = new HorizontalLayoutContainer();
    
    
            inner.setHeight(2000);
    
    
            inner.setPosition(20, 240);
            inner.add(combo);
    
    
            RootPanel.get().add(inner);
        }
    
    
        private ComboBox<Company> createCombo() {
            ListStore<Company> store = new ListStore<Company>(item -> item.getId().toString());
    
    
            LabelProvider<Company> labelProvider = Company::getName;
    
    
            ComboBoxCell<Company> cell = new ComboBoxCell<Company>(store, labelProvider);
            cell.setMaxHeight(104);
    
    
            ComboBox<Company> combo = new ComboBox<Company>(cell);
    
    
            combo.setForceSelection(true);
            combo.setTriggerAction(TriggerAction.ALL);
            combo.setValidateOnBlur(false);
            combo.setClearValueOnParseError(false);
            combo.setEditable(false);
            populate(combo);
    
    
            return combo;
        }
    
    
        private Company build(int idx) {
            String key = "" + idx;
            String val = "Company " + idx;
    
    
            return new Company(key, val);
        }
    
    
        private void populate(ComboBox<Company> cb) {
            ListStore<Company> store = cb.getStore();
    
    
            int max = 100;
            IntStream.rangeClosed(1, max).mapToObj(this::build).forEach(store::add);
    
    
            cb.setValue(store.get(max - 1));
        }
    
    
        public class Company {
            private String id;
            private String name;
    
    
            public Company(String id, String name) {
                this.id = id;
                this.name = name;
            }
    
    
            public String getId() {
                return id;
            }
    
    
            public String getName() {
                return name;
            }
    
    
            @Override
            public String toString() {
                return name;
            }
        }
    }

Similar Threads

  1. Arrow not rendering for combo box
    By rizo in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 18 Aug 2010, 5:11 AM
  2. Inline rendering of combo-box
    By carnold in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 24 Nov 2009, 8:16 AM
  3. combo box rendering problem
    By rich_montana in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 Oct 2009, 8:54 PM
  4. Rendering spaces in combo box
    By OutpostMM in forum Sencha Ext JS Q&A
    Replies: 5
    Last Post: 20 Nov 2008, 2:05 PM
  5. Combo rendering problem
    By zerodivide in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 8 May 2008, 12:30 AM

Posting Permissions

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