Results 1 to 5 of 5

Thread: How to create a composite field

  1. #1
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Question How to create a composite field

    Hi,

    I have a form with bunch of fields.

    Now I need a field to be a sum of TextField + Button on the right of it.

    I started to think on AdapterField with composite element inside it.

    I created the following:

    Code:
    public class SelectUserField extends LayoutContainer {
    
        private TextField<String> userName = new TextField<String>();
        private Button selectButton = new Button("...");
    
        public SelectUserField() {
            setLayout(new RowLayout(Orientation.HORIZONTAL));
            userName.setValue(SessionData.getCurrentUser());
            add(userName, new RowData(1, 1));
            add(selectButton, new RowData(-1, 1));
        }
    }
    And inserted it on form:

    Code:
            SelectUserField selectUserField = new SelectUserField();
            AdapterField selectUserFieldAdapter = new AdapterField(selectUserField);
            selectUserFieldAdapter.setFieldLabel("Target User");
            fieldSet.add(selectUserFieldAdapter, formData);
    formData is:

    Code:
    private FormData formData = new FormData("-20");
    The result is: I don't see this field at all.

    What am I doing wrong?

  2. #2
    Sencha Premium User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    888

    Default

    Try using GXT's TriggerField class.
    That class is composed by a a Field + a button.

    Simply set the icon via setTriggerStyle, and override onTriggerClick for performing your onClick operation.

    The DateField is an example of a field extending TriggerField.

    Regards,
    Michel.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You can also take a look at FileUploadField as that one shows a real GXT Button next to a field.

  4. #4
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Cool

    Thanks guys for help!

    I copied the behavior from FileUploadField and everything works amazing now!

    Code:
    /**
     * Custom form field, used to select a user in popup window.
     */
    public class SelectUserField extends TextField<String> {    
    
        private Button button;
        private AbstractImagePrototype buttonIcon;
        private int buttonOffset = 3;
        private BaseEventPreview focusPreview;
    
        /**
         * Creates a new select user field.
         */
        public SelectUserField() {
            focusPreview = new BaseEventPreview();
            focusPreview.setAutoHide(false);
            ensureVisibilityOnSizing = true;
            setWidth(150);
        }
    
        /**
         * Returns the button icon class.
         */
        public AbstractImagePrototype getButtonIconStyle() {
            return buttonIcon;
        }
    
        /**
         * Returns the button offset.
         */
        public int getButtonOffset() {
            return buttonOffset;
        }
    
        public void onBrowserEvent(Event event) {
            super.onBrowserEvent(event);
            if ((event.getTypeInt() != Event.ONCLICK)) {
                button.onBrowserEvent(event);
            }
        }
    
        /**
         * Sets the button icon class.
         * 
         * @param buttonIconStyle
         *            the button icon style
         */
        public void setButtonIcon(AbstractImagePrototype buttonIconStyle) {
            this.buttonIcon = buttonIconStyle;
        }
    
        /**
         * Sets the number of pixels between the input element and the browser
         * button (defaults to 3).
         */
        public void setButtonOffset(int buttonOffset) {
            this.buttonOffset = buttonOffset;
        }
    
        @Override
        public void setReadOnly(boolean readOnly) {
            this.readOnly = readOnly;
            if (button != null) {
                button.setEnabled(!readOnly);
            }
        }
    
        @Override
        protected void afterRender() {
            super.afterRender();
            el().removeStyleName(fieldStyle);
        }
    
        @Override
        protected void doAttachChildren() {
            super.doAttachChildren();
            ComponentHelper.doAttach(button);
        }
    
        @Override
        protected void doDetachChildren() {
            super.doDetachChildren();
            ComponentHelper.doDetach(button);
        }
    
        @Override
        protected El getFocusEl() {
            return input;
        }
    
        @Override
        protected El getInputEl() {
            return input;
        }
    
        @Override
        protected El getStyleEl() {
            return input;
        }
    
        @Override
        protected void onBlur(ComponentEvent ce) {
            Rectangle rec = button.el().getBounds();
            if (rec.contains(BaseEventPreview.getLastXY())) {
                ce.stopEvent();
                return;
            }
            super.onBlur(ce);
            focusPreview.remove();
        }
    
        @Override
        protected void onDetach() {
            super.onDetach();
            if (focusPreview != null) {
                focusPreview.remove();
            }
        }
    
        @Override
        protected void onFocus(ComponentEvent ce) {
            super.onFocus(ce);
            focusPreview.add();
        }
    
        @Override
        protected void onRender(Element target, int index) {
            El wrap = new El(DOM.createDiv());
            wrap.addStyleName("x-form-field-wrap");
            wrap.addStyleName("x-form-file-wrap");
    
            input = new El(DOM.createInputText());
            input.addStyleName(fieldStyle);
            input.addStyleName("x-form-file-text");
            input.setId(XDOM.getUniqueId());
    
            if (GXT.isIE && target.getTagName().equals("TD")) {
                input.setStyleAttribute("position", "static");
            }
    
            wrap.appendChild(input.dom);
    
            setElement(wrap.dom, target, index);
    
            button = new Button("...");
            button.getFocusSupport().setIgnore(true);
            button.addStyleName("x-form-file-btn");
            button.setIcon(buttonIcon);
            button.render(wrap.dom);
            super.onRender(target, index);
            super.setReadOnly(true);
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            input.setWidth(width - button.getWidth() - buttonOffset, true);
        }
    }

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    4

    Default

    Quote Originally Posted by zeroed View Post
    Thanks guys for help!

    I copied the behavior from FileUploadField and everything works amazing now!

    Code:
    /**
     * Custom form field, used to select a user in popup window.
     */
    public class SelectUserField extends TextField<String> {    
    
        private Button button;
        private AbstractImagePrototype buttonIcon;
        private int buttonOffset = 3;
        private BaseEventPreview focusPreview;
    
        /**
         * Creates a new select user field.
         */
        public SelectUserField() {
            focusPreview = new BaseEventPreview();
            focusPreview.setAutoHide(false);
            ensureVisibilityOnSizing = true;
            setWidth(150);
        }
    
        /**
         * Returns the button icon class.
         */
        public AbstractImagePrototype getButtonIconStyle() {
            return buttonIcon;
        }
    
        /**
         * Returns the button offset.
         */
        public int getButtonOffset() {
            return buttonOffset;
        }
    
        public void onBrowserEvent(Event event) {
            super.onBrowserEvent(event);
            if ((event.getTypeInt() != Event.ONCLICK)) {
                button.onBrowserEvent(event);
            }
        }
    
        /**
         * Sets the button icon class.
         * 
         * @param buttonIconStyle
         *            the button icon style
         */
        public void setButtonIcon(AbstractImagePrototype buttonIconStyle) {
            this.buttonIcon = buttonIconStyle;
        }
    
        /**
         * Sets the number of pixels between the input element and the browser
         * button (defaults to 3).
         */
        public void setButtonOffset(int buttonOffset) {
            this.buttonOffset = buttonOffset;
        }
    
        @Override
        public void setReadOnly(boolean readOnly) {
            this.readOnly = readOnly;
            if (button != null) {
                button.setEnabled(!readOnly);
            }
        }
    
        @Override
        protected void afterRender() {
            super.afterRender();
            el().removeStyleName(fieldStyle);
        }
    
        @Override
        protected void doAttachChildren() {
            super.doAttachChildren();
            ComponentHelper.doAttach(button);
        }
    
        @Override
        protected void doDetachChildren() {
            super.doDetachChildren();
            ComponentHelper.doDetach(button);
        }
    
        @Override
        protected El getFocusEl() {
            return input;
        }
    
        @Override
        protected El getInputEl() {
            return input;
        }
    
        @Override
        protected El getStyleEl() {
            return input;
        }
    
        @Override
        protected void onBlur(ComponentEvent ce) {
            Rectangle rec = button.el().getBounds();
            if (rec.contains(BaseEventPreview.getLastXY())) {
                ce.stopEvent();
                return;
            }
            super.onBlur(ce);
            focusPreview.remove();
        }
    
        @Override
        protected void onDetach() {
            super.onDetach();
            if (focusPreview != null) {
                focusPreview.remove();
            }
        }
    
        @Override
        protected void onFocus(ComponentEvent ce) {
            super.onFocus(ce);
            focusPreview.add();
        }
    
        @Override
        protected void onRender(Element target, int index) {
            El wrap = new El(DOM.createDiv());
            wrap.addStyleName("x-form-field-wrap");
            wrap.addStyleName("x-form-file-wrap");
    
            input = new El(DOM.createInputText());
            input.addStyleName(fieldStyle);
            input.addStyleName("x-form-file-text");
            input.setId(XDOM.getUniqueId());
    
            if (GXT.isIE && target.getTagName().equals("TD")) {
                input.setStyleAttribute("position", "static");
            }
    
            wrap.appendChild(input.dom);
    
            setElement(wrap.dom, target, index);
    
            button = new Button("...");
            button.getFocusSupport().setIgnore(true);
            button.addStyleName("x-form-file-btn");
            button.setIcon(buttonIcon);
            button.render(wrap.dom);
            super.onRender(target, index);
            super.setReadOnly(true);
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            input.setWidth(width - button.getWidth() - buttonOffset, true);
        }
    }
    Do you able to bind model to the field.
    I mean the field is in a formpanel. Then there's formbinding to bind the model.

Tags for this Thread

Posting Permissions

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