PDA

View Full Version : Update values in colormenu



jhmiller
2 Oct 2014, 2:18 AM
I have a button menu that the user can select 9 different colours (main and cores 1-8). I use a hidden field to store the selected colours but the problem is, it only saves the default values and not the user selected values.

As you can see from the code i thought using setValue would work but it does not


menu: [{ text: "Main CPU Colour",
name : "colourc",
menu: {
xtype : "colormenu",
name : "colourc",
value : "000000",
handler: function (obj, rgb) {
var colourmField = this.findField("colourc");
colourmField.setValue(rgb.toString());
alert(colourmField.getValue());
},
scope : this
}
},{
text: "Core 1 Colour",
menu: {
xtype : "colormenu",
name : "colour1",
value : "00FF00",
handler: function (obj, rgb) {
var colourmField = this.findField("colour1");
colourmField.setValue(rgb.toString());
alert(colourmField.getValue());
},
scope : this
}
},{.........

To add the values to the hidden filed i use


onUpdateButton: function(obj, rgb) { var buttonVars = new Array();
Ext.Array.each(Ext.ComponentQuery.query('colormenu', Ext.getCmp('first')), function(colormenu){
buttonVars.push(colormenu.value);
});
}

How can i store the user selected values in to the hidden field array?
Thanks for looking.

watertrac_dev
3 Oct 2014, 11:11 AM
How about something similar to this? I've elected to use a textareafield instead of a hiddenfield so you can observe how the values are set.

bad

jhmiller
3 Oct 2014, 6:26 PM
The code is great and thanks for taking the time to reply.Just a follow up question whether it is possible the use the value of (in my code) the hiddenfield and not use the default var colors?
Something like

var hiddenField = ????????;
var colors = hiddenField.getValue();
Ext.Msg.alert('Testing: ' + colors);

watertrac_dev
6 Oct 2014, 7:17 AM
Would this work?

bcc

jhmiller
6 Oct 2014, 11:31 AM
Thanks for trying but that to works as far as setting the colours but does not use the values the user chooses If the page is reloaded :(

Is it a problem with the hidden field? would storing and retrieving the settings be easier if I used a normal text box?

watertrac_dev
6 Oct 2014, 12:32 PM
Is it supposed to be persisting the choices? You just need to hook it up to a model, perhaps using a localstorage proxy, and you should be good.

jhmiller
15 Oct 2014, 2:34 AM
This is the actual code I use adding your suggestions. Button values are stored locally under 'SelectedColours' the other values uses are stored under their respective name:

The first time I tried this it did save the array but for some reason now it saves false?


getFormItems : function() {
var me = this;
var updateColors = function(colormenuitem, rgb) {
var form = colormenuitem.up('form'),
field = form.down('#coloursField'),
colors = Ext.decode(field.getValue());
colors[colormenuitem.itemId] = rgb.toString();

field.setValue(Ext.encode(colors));
};
return [{
xtype : 'fieldset',
id : 'first',
title : 'Items to monitor',
defaults : {
labelSeparator : ""
},
items : [{
itemId: 'coloursField',
name: 'SelectedColours',
xtype: 'hiddenfield',
value: {
colourc: '000000',
colour1: '000000',
colour2: '000000',
colour3: '000000',
colour4: '000000',
colour5: '000000',
colour6: '000000',
colour7: '000000',
colour8: '000000'
}
},{
xtype : 'checkbox',
name : 'cpuenable',
boxLabel : _("Will monitor CPU Temperature"),
fieldLabel : _("CPU Temperature"),
listeners : {
change: this.toggleDisabled,
scope: this
},
checked : false
},{
xtype : 'button',
name : 'colours',
text : _("Choose Colours"),
cls : 'menubutton-main',
style : {
marginTop : "10px",
marginBottom : "10px"
},
menu: [{
text: 'Main CPU Colour',
menu: {
xtype : 'colormenu',
itemId : 'colourc',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 1 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour1',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 2 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour2',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 3 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour3',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 4 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour4',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 5 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour5',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 6 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour6',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 7 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour7',
cls : 'menubutton-class',
handler: updateColors
}
},{
text: 'Core 8 Colour',
menu: {
xtype : 'colormenu',
itemId : 'colour8',
cls : 'menubutton-class',
handler: updateColors
}
}]
},{
xtype : 'checkbox',
name : 'cpufanenable',
boxLabel : _("Will monitor CPU fan speed - Not implemented"),
fieldLabel : _("CPU Fan Speed"),
checked : false
},{
xtype : 'checkbox',
name : 'sysfanenable',
boxLabel : _("Will monitor system fan speed - Not implemented"),
fieldLabel : _("SYS Fan Speed"),
checked : false
},{
xtype : 'checkbox',
name : 'mbtemp',
boxLabel : _("Will monitor Motherboard Temperature - Not implemented"),
fieldLabel : _("MB Temperature"),
checked : false
}]
}];
},
toggleDisabled: function(checkbox, newValue, oldValue) {
var toggleFn = newValue ? 'enable' : 'disable';
Ext.each(this.query('button[cls="menubutton-main"]'), function(item) {
item[toggleFn]();
});
}
});

I feel like I have tried everything to retrieve the previous user selected values.