How to implement a color picker field in Sencha GXT?

Question

Color Picker Field dropdown:

Should also need to be provided the functionality to add custom colors when clicking on the "More Colors" just like in MS Paint. Any out of the box solutions are also welcome.As far as i have checked in SenchaGXT am unable to find the correct implementation for this.

Answer 1

I was able to create this functionality using few edits of my own to the native components.I used a split button and attached a color menu to it and made it like a color picker.

    SplitButton colorPicker = new SplitButton();
    final ColorMenu colorMenu = new ColorMenu();

    colorMenu.getPalette().addValueChangeHandler(new ValueChangeHandler<String>(){

        public void onValueChange(ValueChangeEvent<String> event){
            String color = event.getValue();
            System.out.println("Color value is "+color);
            StyleInjector.inject(".CustomColor1 > div > div { background-color: "+color+" !important; border-color: #c4c5c5 !important;} ");
            colorMenu.hide();
        }
    });

    colorPicker.setMenu(colorMenu);
    colorPicker.setHeight(20);
    colorPicker.setWidth(150);
    StyleInjector.inject(".CustomColor1 > div {background:none !important; background-image:none !important; background-color: #FFFFFF !important; border-color: #c4c5c5 !important; border-width: 1px !important;} ");
    colorPicker.setStyleName("CustomColor1");

and I have got the desired output like this.

So ,I have achieved what i wanted.

Happy coding!