https://github.com/sw4/Ext.ux.ColorPicker

Ext JS 4.2x Color Picker Field
https://github.com/sw4/Ext.ux.ColorPicker

Last synced: 27 days ago
JSON representation

Ext JS 4.2x Color Picker Field

• Host: GitHub
• URL: https://github.com/sw4/Ext.ux.ColorPicker
• Owner: sw4
• Created: 2013-10-25T15:48:54.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-10-13T10:58:58.000Z (about 10 years ago)
• Last Synced: 2024-08-03T16:08:56.555Z (4 months ago)
• Language: CSS
• Homepage: http://sw4.github.io/Ext.ux.ColorPicker
• Size: 293 KB
• Stars: 5
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-extjs - Ext.ux.ColorPicker - A beautiful colorpicker. (Extensions, components / Components, ux)

README

        
Ext.ux.ColorPicker

==================

Ext JS 4.2x Color Picker Field

**Licensed under [cc by-sa 3.0](http://creativecommons.org/licenses/by-sa/3.0/) with attribution required**

**Demo can be viewed here: http://sw4.github.io/Ext.ux.ColorPicker**

Requirements

=====

Requires canvas support and is based on a standard Ext triggerfield, so supports all native properties. Requires ExtJS JS and CSS to be referenced in your page.*

*Currently only tested in ExtJS 4.2x

Usage 

=======

Specify the location of the luminance and spectrum.png images, by setting the luminanceImg and spectrumImg properties on the object (or replacing the two related incidences in the main JS). E.g. 

```

Ext.create('Ext.ux.ColorPicker', {

  luminanceImg:'images/luminance.png',

  spectrumImg:'images/luminance.png'

});

```

Additionally, you can pass a HEX color to `value` to initialize the field with a color already selected.

Sample HTML Page

==================

```

    

        Ext.ux.ColorPicker

        

        

        

        

    

    

        
Ext.ux.ColorPicker

        
Note: This specific example will not work correctly due to the fact assets are loaded cross-domain (from rawgithub.com) which contravenes canvas security policy.

        


        

                

        

        

         

        Ext.onReady(function() {

            var colorPicker = Ext.create('Ext.ux.ColorPicker', {

                luminanceImg:'https://rawgithub.com/sw4/Ext.ux.ColorPicker/master/luminance.png',

                spectrumImg:'https://rawgithub.com/sw4/Ext.ux.ColorPicker/master/spectrum.png',

                value:'#ff0000'

            });

            colorPicker.render('colorPicker');

        });        

        

    


```