Hybrid View

  1. #1
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default ComboBox with a possibility to clear value

    ComboBox with a possibility to clear value


    I guess some people may find it usefull. The main problem with ComboBox is that there is no way to clear once selected value (if combobox is readonly). That's why I extended it with an additional clear button.

    Code:
    public class XComboBox<D extends ModelData> extends ComboBox<D> {
    
        protected El twinTrigger;
    
        private final String twinTriggerStyle = "x-form-clear-trigger";
        private El span;
    
        public XComboBox() {
            super();
        }
    
        @Override
        protected Size adjustInputSize() {
            return new Size(span.getWidth(), 0);
        }
    
        protected void afterRender() {
            super.afterRender();
            addStyleOnOver(twinTrigger.dom, "x-form-trigger-over");
        }
    
        @Override
        public void onComponentEvent(ComponentEvent ce) {
            super.onComponentEvent(ce);
            int type = ce.getEventTypeInt();
            if ((ce.getTarget() == twinTrigger.dom) && (type == Event.ONCLICK)) {
                onTwinTriggerClick(ce);
            }
        }
    
        @Override
        protected void onRender(Element target, int index) {
            input = new El(DOM.createInputText());
            setElement(DOM.createDiv(), target, index);
            addStyleName("x-form-field-wrap");
    
            trigger = new El(DOM.createImg());
            trigger.dom.setClassName("x-form-trigger " + triggerStyle);
            trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
            twinTrigger = new El(DOM.createImg());
            twinTrigger.dom.setClassName("x-form-trigger " + twinTriggerStyle);
            twinTrigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
            span = new El(DOM.createSpan());
            span.dom.setClassName("x-form-twin-triggers");
    
            span.appendChild(trigger.dom);
            span.appendChild(twinTrigger.dom);
    
            el().appendChild(input.dom);
            el().appendChild(span.dom);
    
            if (isHideTrigger()) {
                span.setVisible(false);
            }
    
            super.onRender(target, index);
    
            if (!isEditable()) {
                setEditable(false);
            }
        }
    
        protected void onTwinTriggerClick(ComponentEvent ce) {
            boolean allowBlank = getAllowBlank();
            if (!allowBlank) {
                setAllowBlank(true);
            }
            setValue(null);
            setAllowBlank(allowBlank);
    
            fireEvent(Events.TwinTriggerClick, ce);
        }
    
    }
    Attached Images

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    protected Size adjustInputSize()

    Do you need this?
    I couldn't find this method in the parent classes...

    Are you sure this is needed?

    Regards,
    Michel.

  3. #3
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default


    It is in parent class (parent of ComboBox - TriggerField):

    Code:
      @Override
      protected Size adjustInputSize() {
        return new Size(trigger.getWidth(), 0);
      }

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    hmm...

    Gxt 2.0.1 does not have this... :-(

  5. #5
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default


    Try extending onResize method:

    Code:
      @Override
      protected void onResize(int width, int height) {
        super.onResize(width, height);
        Size asize = adjustInputSize();
        getInputEl().setSize(width - asize.width, height - asize.height, true);
      }

  6. #6
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    Yeah.

    But other things are broken for 2.0.1.
    Unfortunately this does not work for 2.0.1 :-(

    Regards,
    Michel.

Thread Participants: 3