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.

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

      0  

    Default


    This is a solution for 2.0.1
    PS: this can be used for any class that extends TriggerField (ComboBox, DateField, TimeField, and so on).
    PS: this was based on the TwinTriggerField code.
    Code:
    public class XComboBox<D extends ModelData> extends ComboBox<D> {
    
        protected El twinTrigger;
        
        private final String twinTriggerStyle = "x-form-clear-trigger";
        private El span;
        
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            int tw = span.getWidth();
            if (width != Style.DEFAULT) {
                getInputEl().setWidth(width - tw);
            }
        }
        
        @Override
        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());
            wrap = new El(DOM.createDiv());
            wrap.dom.setClassName("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");
            
            DOM.appendChild(span.dom, trigger.dom);
            DOM.appendChild(span.dom, twinTrigger.dom);
            
            DOM.appendChild(wrap.dom, input.dom);
            DOM.appendChild(wrap.dom, span.dom);
            
            setElement(wrap.dom, target, index);
            
            addStyleOnOver(twinTrigger.dom, "x-form-trigger-over");
            addStyleOnOver(trigger.dom, "x-form-trigger-over");
            
            if (isHideTrigger()) {
              span.setVisible(false);
            }
            
            super.onRender(target, index);
            
            if (!isEditable()) {
                setEditable(true);
                setEditable(false);
            }
            
            DOM.sinkEvents(twinTrigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
            DOM.sinkEvents(wrap.dom, Event.FOCUSEVENTS);
            DOM.sinkEvents(trigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
        }
        
        protected void onTwinTriggerClick(ComponentEvent ce) {
            setValue(null);
            clearInvalid();
            fireEvent(Events.TwinTriggerClick, ce);
        }
        
    }
    Regards,
    Michel.

  8. #8
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    GaryP is on a distinguished road

      0  

    Default


    this code helped. thanks!

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
    Snahrck is an unknown quantity at this point

      0  

    Default


    Anyone know how can I do this with FileUploadField?

    I tried to adapt this code with no success.

    Thanks in advance.

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi