PDA

View Full Version : Custom color field doesn't show picker



kebuu
10 Jan 2012, 2:01 PM
Hello everybody,

I am trying to develop a color field based on the existing date field. I almost copy and paste the code from the date field source code but my color picker is not displayed when I click on the trigger button. Here is my code :


Ext.define('HP.view.picker.ColorPicker', {
extend:'Ext.form.field.Picker',
alias: 'widget.colorfield',

triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',

createPicker: function() {
var me = this;

return Ext.create('Ext.picker.Color', {
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
}

});


Can anybody tell me what I am doing wrong ? I don't have any error logged, it just does nothing :s.

Regards




http://www.google.com/uds/css/small-logo.png

skirtle
11 Jan 2012, 8:42 AM
Try:


Ext.define('HP.view.picker.ColorPicker', {
extend:'Ext.form.field.Picker',
alias: 'widget.colorfield',

matchFieldWidth: false,
...

kebuu
11 Jan 2012, 1:14 PM
Hello,

Thank you skirtle for your answer.

I tried matchFieldWidth: false, but it didn't fixed the problem.
If it can help, the complete code of my app is here : https://github.com/kebuu/HolidayPlanning on branch bugfix. To start the app you will need playframework 1.2.4 and to start a mongodb server.
(the attached image shows where is the custom color field)

30628

Regards






http://www.google.com/uds/css/small-logo.png

skirtle
11 Jan 2012, 3:17 PM
Here's the full code I used to get this to work. It's almost exactly the same as the code you posted.


Ext.define('HP.view.picker.ColorPicker', {
extend:'Ext.form.field.Picker',
alias: 'widget.colorfield',

triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
matchFieldWidth: false,

createPicker: function() {
var me = this;

return Ext.create('Ext.picker.Color', {
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
}
});

Ext.onReady(function() {
Ext.create('HP.view.picker.ColorPicker', {
renderTo: Ext.getBody()
});
});

Try it, confirm that it works for you. I tested it against 4.0.2 and 4.0.7. There are still a few small styling issues but it should be basically functional.

Once you've confirmed that it works, the next stage it to establish why it doesn't work in your app. Try to gradually move the two scenarios towards each other until you hit the point that things go wrong. You should then be able to extract a simple test case that we can help you with.

kebuu
11 Jan 2012, 11:59 PM
Hello Skirtle,

Thank you very much, you saved my week, it works perfectly.
I didn't put the config
matchFieldWidth: false, at the good place the first time, now it's ok.

Regards




http://www.google.com/uds/css/small-logo.png