[SOLVED] Color Picker

[mpatel]

Hello guys,

In the following code, I would like to have a color picker instead of the text box... how do i go about this?

Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';
    
    var parentList = new Ext.data.Store({    
        proxy: new Ext.data.HttpProxy({url: '/categories/getCategories'}),
        reader: new Ext.data.JsonReader({
        root: 'categories',
        fields: [
            {name: 'id'},
            {name: 'name'}
        ]
        })
    });
    
    parentList.load();
    
    var form_edit = new Ext.FormPanel({
        url:'/categories/edit/',
        frame:true,
        title: 'Edit Category',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'Name',
                name: 'data[Category][name]',
                value: val_name,
                allowBlank:false
            },{
                fieldLabel: 'Color',
                name: 'data[Category][color]',
                value: val_color,
                disabled: true
            }, new Ext.form.ComboBox({
                fieldLabel: 'Parent',
                name: 'data[Category][parent_id]',
                store: parentList,
                displayField: 'name',
                valueField: 'id',
                mode: 'local',
                forceSelection: true,
                editable: false,
                mode: 'remote',
                value: val_parent
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    
    form_edit.render('content');
}) 

Thanks

[para]

Try something like:

            },{
                fieldLabel: 'Color',
                name: 'data[Category][color]',
                value: val_color,
                disabled: true,
                xtype: 'colorpalette'

I'm not sure though.

[mpatel]

Excellent!!

But how can I get more colors??
I've changed the code a bit though:

Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';
    
    var parentList = new Ext.data.Store({    
        proxy: new Ext.data.HttpProxy({url: '/categories/getCategories'}),
        reader: new Ext.data.JsonReader({
        root: 'categories',
        fields: [
            {name: 'id'},
            {name: 'name'}
        ]
        })
    });
    
    parentList.load();
    
    var form_edit = new Ext.FormPanel({
        url:'/categories/edit/',
        frame:true,
        title: 'Edit Category',
        bodyStyle:'padding:5px 5px 0',
        width: 350,

        items: [{
            xtype:'fieldset',
            title: 'General Information',
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Name',
                name: 'data[Category][name]',
                value: val_name,
                allowBlank:false
            },new Ext.form.ComboBox({
                fieldLabel: 'Parent',
                name: 'data[Category][parent_id]',
                store: parentList,
                displayField: 'name',
                valueField: 'id',
                mode: 'local',
                forceSelection: true,
                editable: false,
                mode: 'remote',
                value: val_parent
            })
            ]
        },{
            xtype:'fieldset',
            title: 'Category Color',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Color',
                name: 'data[Category][color]',
                value: val_color,
                xtype: 'colorpalette'
            }
            ]
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    
    form_edit.render('content');
}) 

Try something like:

            },{
                fieldLabel: 'Color',
                name: 'data[Category][color]',
                value: val_color,
                disabled: true,
                xtype: 'colorpalette'

I'm not sure though.