I recently posted about getting a combobox into the settings of a Rally app, now I'm trying to figure out how checkboxes work in settings. I assumed they would work similarly [ish] but for some reason it's not [hence why i'm on this site again].
My checkbox field and getSettingsField function look like this right now:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
defaultType: 'checkboxfield',
items: [
{
name: 'box1',
boxLabel: 'Box 1:',
inputValue: true,
value: true,
id: 'boxone'
}
]
}
];
}
At the top of my app I also have the following default settings set:
config: {
defaultSettings: {
box1: true
}
},
I console.log()'d the setting for that checkbox inside the launch function and found that the setting starts at "true" but the checkbox is not originally checked. When I check the box and save the settings, the setting stays at "true" and again unchecks when i go back to the settings tab. This would all be okay, but when I save the settings with the box unchecked, the setting still stays as "true".
I tried changing the defaultSetting to false just for testing, but again I only got a "true" setting field for box1. My logging line, console.log('Setting: ' + this.getSettings()); is what is showing me the current value for each setting each time the app is loaded & each time the settings are changed.
The goal is to get the checkbox setting to read correctly [true / false or whatever syntax the settings come in] at the beginning of the app so a grid can be filtered later. Does someone know what I'm doing wrong?
So apparently the settings tab is returning a string, so "true" is returned from the inputValue, not the boolean true value. Also, the value setting is messing things up, so here's what I ended up using:
config: {
defaultSettings: {
boxes: "check"
}
},
...
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
defaultType: 'checkboxfield',
items: [
{
name: 'boxes',
boxLabel: 'Box 1:',
inputValue: "one",
checked: this.getSettings().boxes.split(',').indexOf('one') > -1,
id: 'boxone'
},
{
name: 'boxes',
boxLabel: 'Box 2:',
inputValue: "two",
checked: this.getSettings().boxes.split(',').indexOf('two') > -1,
id: 'boxtwo'
}
]
}
];
}
I learned that the 'name' field is a generic field that should apply to all checkboxes that are related to each other in the settings panel. The 'inputValue' field is the returned string to the settings field, and each returns to a string in this.getSettings().boxes.
I wanted to keep the boxes to remember if they were checked before, so that's where the line checked: this.getSettings().boxes.split(',').indexOf('one') > -1 comes from. If the string 'one' is in the settings, that means the index will be larger than one, so checked will be true and therefore the box will be checked next time someone opens the settings menu.
Related
I have a dropdown component as shown below: (For Reproduction go to this link)
I want to add search to filter functionality that allows to filter the dropdown elements, based on the query: this.DropDownElements.includes(searchParameter).
constructor(props)
{
super(props);
this.DropDownElements = this.props.Values.map((element,ind) => ({
value: element,
isChecked: false,
id: "DropdownElems:" + this.props.UniqueIdentifier + ind,
}));
this.ConstantDropDownElements = this.props.Values.map((element,ind) => ({
value: element,
isChecked: false,
id: "DropdownElems:" + this.props.UniqueIdentifier + ind,
}));
}
I am storing searchParameter value in this.state.Value.
state = {
isEditing: false,
isFirstOnChange: true,
isDropDownOpen: false,
isMultiSelectOn: true,
elements: this.DropDownElements,
placeholder: this.props.PlaceHolderText,
Value: "",
GlobalFilters: [
{
selection: "Select All",
isSelected: false,
},
{
selection: "Clear All",
isSelected: false,
},
],
};
Now here comes the challenging part. When I search in the search box, I want to perform autofilter and then make the selections. What I tried is creating an unaffected DropDown as initialized in constructor and then filtering the DropDownElements based on the search parameter passed. But then mapping the isChecked key of the object is getting very complex to me. Does anyone have a simple solution and approach for the same?
My current Component allows to select and de-select without losing the state (during the collapse and open of dropdown), my final goal is to add a search query feature which filters up the data, and then when I make the selection it should be mapped correctly to the right element of the DropDownElements.
Here is aikau Combobox usage:
{
name: "alfresco/forms/controls/ComboBox",
config: {
fieldId: "someFieldId",
label: "myListName",
name: "assoc_sc_goods",
addedAndRemovedValues: true,
valueDelimiter: ",",
firstValueIsDefault: false,
showAllOptionsOnOpen: true,
searchStartsWith: true,
optionsConfig: {
queryAttribute: "label",
labelAttribute: "label",
valueAttribute: "name",
publishTopic: "ALF_GET_FORM_CONTROL_OPTIONS",
publishPayload: {
resultsProperty: "options",
url: url.context + "/proxy/alfresco/slingshot/datalists/lists/node/workspace/SpacesStore/11111111-1111-1111-1111-111111111111",
itemsAttribute: "datalists",
labelAttribute: "name",
valueAttribute: "nodeRef"
}
}
}
}
It displays all values from list with UUID 11111111-1111-1111-1111-111111111111 well, e.g. it shows names instead of nodeRef values. But when I press button on form, it sends
"assoc_sc_goods_added": "goodName"
While it is expected
"assoc_sc_goods_added": "workspace://SpacesStore/22222222-2222-2222-2222-222222222222"
Where 22222222-2222-2222-2222-222222222222 is UUID of selected list item.
It seems that Combobox request json, extract values for html select by labelAttribute but when it comes to apply selected values it forget to convert selected labelAttribute back to valueAttribute.
How configure aikau Combobox to fix such issue?
You need to change both valueAttribute settings to be "nodeRef" - currently only one of them is.
How to store the selectfield in sencha touch, such that when a field is selected, the value used by any method, but when the page refreshed, it is automatically select the previous selection.
My Code:
{
xtype: 'fieldset',
items: [{
xtype: 'selectfield',
id: 'remem',
label: 'MY Label',
store: 'remem',
options: [
{
text: 'Option1',
value: 'a'
},
{
text: 'Option2',
value: 'b'
}]
}]
}
#developer, #jenson and I are suggesting you should save the value in a cookie so the value is persisted between browser refreshes. Extjs offers a cookie manager class in the utilities namespace if I remember correct.
EDIT
For Sencha Touch you should actually make use of the LocalStorage proxy as per the docs here
There's an example in the docs showing how to save user specific information for retrieval later on (after refreshes, etc)
I have actually made use of this for my own application by saving user display preferences in my application so when they next login the UI is as they left it.
Store:
Ext.define('MyApp.store.UserPreferencesStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.UserPreferencesModel',
'Ext.data.proxy.LocalStorage'
],
config: {
model: 'MyApp.model.UserPreferencesModel',
storeId: 'UserPreferencesStore',
proxy: {
type: 'localstorage',
id: 'userpreferences'
}
}
});
Model
Ext.define('MyApp.model.UserPreferencesModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'userPrefKey'
},
{
name: 'userPrefValue'
}
]
}
});
With this setup you can add a record as you normally would do for any other store
store.add({userPrefKey: '01-showMap', userPrefValue: true});
or edit existing entries
rec = store.findRecord('userPrefKey','01-showMap');
rec.set('userPrefValue',false);
You must also call sync() on the store whenever you want to save changes, and to retrieve the saved records from local storage just call load() like for any other store.
Note that my code was written for Touch 2.3, so it may have changed slightly in the most recent 2.4.x version. But this should certainly get you on your way.
store select field value into localstorage and assign that value to selectField whenever you refresh page . So you will get always previous selected value.
I am using enyojs 2.4 and the moonstone library.
What does "can't spot in frozen mode" mean ?
I have two inputs :
{kind: "moon.InputDecorator", name: "emaildec", spotlight: true, defaultSpotlightLeft : "emaildec", components: [
{kind: "moon.Input", name: "username",placeholder: "e-mail address", onchange: "nameChanged", value:"",classes: "input-style"} //,spotlight: true
]
},
{tag: "br"},
{kind: "moon.InputDecorator", name: "pwddec" , spotlight: true, defaultSpotlightLeft : "pwddec", components: [
{kind: "moon.Input", name: "userpwd",type:"password", placeholder: "ameba password", onchange: "passwordChanged", value: "",classes: "input-style"} //,spotlight: true
]
}
This console error is thrown when I attempt to set focus on the password input :
enyo.Spotlight.spot(this.$.userpwd);
What I want to happen is:
user fills in first input using onscreen keyboard
user then navigates to enter button on onscreen keyboard and presses ok/enter on remote control
focus is set to second input.
The moon.InputDecorator will automatically unfreeze Spotlight upon a blur event (from the moon.Input), whereupon you could call enyo.Spotlight.spot(). moon.Input will automatically blur itself when it detects the Enter key being pressed, but only if the dismissOnEnter flag is set to true on moon.Input. It sounds like you might actually want to call focus on the desired moon.Input (instead of spotting, as that will just display the Spotlight hovered state on the moon.InputDecorator and not actually spot it), something like this (http://jsfiddle.net/aarontam/nxp8x7ku/):
enyo.create({
handlers: {
onblur: 'blurHandler'
},
components: [{
kind: "moon.InputDecorator",
name: "emaildec",
spotlight: true,
defaultSpotlightLeft: "emaildec",
components: [{
kind: "moon.Input",
name: "username",
placeholder: "e-mail address",
onchange: "nameChanged",
value: "",
classes: "input-style",
dismissOnEnter: true,
} //,spotlight: true
]
}, {
tag: "br"
}, {
kind: "moon.InputDecorator",
name: "pwddec",
spotlight: true,
defaultSpotlightLeft: "pwddec",
components: [{
kind: "moon.Input",
name: "userpwd",
type: "password",
placeholder: "ameba password",
onchange: "passwordChanged",
value: "",
classes: "input-style"
} //,spotlight: true
]
}],
blurHandler: function (sender, event) {
if (event.originator === this.$.username) {
this.$.userpwd.focus();
}
}
}).renderInto(document.body);
I'm not exactly sure of the "why", but looking at Spotlight source, it looks like when a control gets spotted, frozen mode is turned on. Now, I would guess it should get turned off when you try to spot a new one, but it doesn't do that.
You could try: enyo.Spotlight.unfreeze(); and then set the spot on your second control, but I haven't tested it to see if there are unintended side effects.
As per #dmikeyanderson on the enyo forum:
It means that the spotlight has been frozen on a control, and until
unfrozen the spotlight can't move. There doesn't seem anything wrong
with your components, do you have more code to share?
As per #aarontam on the enyo forum:
Hi #Fabii23, the moon.InputDecorator will automatically unfreeze
Spotlight upon a blur event (from the moon.Input), whereupon you could
call enyo.Spotlight.spot(). moon.Input will automatically blur itself
when it detects the Enter key being pressed, but only if the
dismissOnEnter flag is set to true on moon.Input. It sounds like you
might actually want to call focus on the desired moon.Input (instead
of spotting, as that will just display the Spotlight hovered state on
the moon.InputDecorator and not actually spot it), something like this
(based off of the fiddle from #dmikeyanderson)
I have written some code that works pretty well, but I have a strange bug
Here is an example...
PLEASE WATCH MY COMBOBOX BUG VIDEO
Like I said, this works well every time datachanged fires - the right index is selected and the displayField is displayed but, everytime after I type some text in the combobox, later, when the "datachanged" fires, it wont display the displayField. Instead, it displays the value from the setValue method I launch.
The strange thing is that if I don't ever type text and change the selection with the mouse there is no bug. Finally, this appears only when I type text in the combobox.
Has anyone heard of this bug, have a solution, or some wise advice?
The Code !
Two data stores :
ficheDataStore = new Ext.data.Store({
id: 'ficheDataStore',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'ficheDetail.aspx', // File to connect to
method: 'GET'
}),
baseParams: { clientId: clientId, Type: 'Fiche' }, // this parameter asks for listing
reader: new Ext.data.JsonReader({ // we tell the datastore where to get his data from
root: 'results'
}, [
{ name: 'GUID', type: 'string', mapping: 'GUID' },
{ name: 'TagClient', type: 'string', mapping: 'TagClient' },
{ name: 'Nom', type: 'string', mapping: 'Nom' },
{ name: 'Compteur', type: 'string', mapping: 'CompteurCommunes' },
{ name: 'CompteurCommunesFacturation', type: 'string', mapping: 'CompteurCommunesFacturation' },
{ name: 'AdresseFacturation', type: 'string', mapping: 'AdresseFacturation' },
{ name: 'Codes', type: 'string', mapping: 'Codes' },
{ name: 'Observations', type: 'string', mapping: 'Observations' },
{ name: 'Adresse', type: 'string', mapping: 'Adresse' }
])
});
communesDataStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: 'ficheDetail.aspx?Type=Communes' }),
reader: new Ext.data.JsonReader({ root: 'results' }, [{ name: 'Compteur' }, { name: 'Localisation'}])
});
Who return something like this for the
first:
{results:[{"Nom":"cercle interieur"},{"Observations":""},{"Codes":" "},{"Adresse":"dd"},{"CompteurCommunes"
:"1"},{"TagClient":"3-56"},{"GUID":"443609c6-d064-4676-a492-7baa7b4288d1"},{"AdresseFacturation":""}
,{"CompteurCommunesFacturation":"1"}]}
For the latter :
{"results":[{ "Compteur" : "1","Localisation" : "6200 ST ISIDORE"},{ "Compteur" : "2","Localisation"
: "21340 CHANGE"},{ "Compteur" : "3","Localisation" : "1200 ELOISE"},{ "Compteur" : "4","Localisation"
: "1200 ST GERMAIN SUR RHONE"},{ "Compteur" : "5","Localisation" : "75000 PARIS"},{ "Compteur" : "6"
,"Localisation" : "75001 PARIS 1ER ARRONDISSEMENT"}]}
a Combobox :
var comb = new Ext.form.ComboBox(
{
store: communesDataStore,
fieldLabel: 'Code postal',
// hiddenName: 'Compteur',
name: 'CompteurCommune',
id: 'CompteurCommunes',
width: 300,
typeAhead: true,
mode: 'local',
minChars: 0,
selecOnFocus: true,
forceSelection: true,
valueField: 'Compteur',
displayField: 'Localisation',
autocomplete: true,
emptyText: 'Selectionnez un code postal',
triggerAction: 'all',
value: ''
});
in a datachanged event i set the new value of the Combobox "CompteurCommunes" :
ficheDataStore.addListener('datachanged', handleDatachangedEvent);
function handleDatachangedEvent()
{
try {
comb.setValue(ficheDataStore.getAt(4).data.Compteur);
}
catch (err) { }
}
It's probably because when you type random data into combo, it may not locate correct fieldValue every time. Then it stucks at the last non-existing value.
Try to set ComboBox to any existing value (in combo's datastore) before doing new setValue() in your datachanged event handler. Or you can try to use clearValue() method to reset the previous (undefined) valueField.
There also initList() method existing to reset combo to initial state.
EDIT: After some testing, I found that:
combo.store.clearFilter(); must be used before setValue in the external event handler.
function formatComboBox(value, metaData, record, rowIndex, colIndex, store) {
myStore = Ext.getCmp('myComboBox');
myStore.clearFilter();
var idx = myStore.find('value',value);
return (idx != '-1') ? myStore.getAt(idx).data.label : value;
}
First, the Ext JS combobox should automatically apply the value and display when an item is selected, barring you've assigned a store and told Ext the field requires a value.
The value you appear to be asking for (CompteurCommunes) does not appear in your reader definitions, so it would be a part of the records in the data store.
What is the underlying reason for why you are trying to set this value for the ComboBox?
You can have a look at hiddenName and hiddenId parameter of Ext.form.ComboBox. If you set the value of hidden form field linked with combobox then combobox would render the label of that value instead of the value itself.
This is useful when you need to set the value at server end and direct the user to the page.
Another useful method is selectByValue. This method would select the element that has the value equal to the passed argument.
In your dataChangedListener instead of setting the value of combobox, you should set the value hidden form field associated with ComboBox. Also after setting the value of hidden field you might have to fire selectByValue method.
You can have a look at ExtJS API Documentation for further reference.
In case anybody - like me - get here through google because it's the most similar to their ComboBox ft. setValue() problem:
After an hour of stepping in out and over Ext's internals, I found that I needed to set lazyInit: false for the combo boxes. It defaults to true and being true may cause unlogical behaviour if you don't know about this. And why would you? Anything else seems to be not lazy by default.