When I select a country the input isn't updating to show it. I can console log the value so I know the onChange is updating it.
this.state = {
countrySelection: "",
countryListFormatted: [
{Value: "France", label: "France"},
{Value: "Germany", label: "Germany"},
{Value: "Greece", label: "Greece"},
{Value: "Turkey", label: "Turkey"},
{Value: "Italy", label: "Italy"},
{Value: "Netherlands", label: "Netherlands"},
{Value: "Portugal", label: "Portugal"},
{Value: "Spain", label: "Spain"},
{Value: "Switzerland", label: "Switzerland"},
{Value: "United Kingdom", label: "United Kingdom"},
{Value: "United States of America", label: "United States of America"}
}
I'm not showing the entire page, but below is my onChange handler:
onSelectCountry(val){
this.setState({countrySelection: val.Value})
console.log(val)
}
And the action Select component:
<Select
searchable={true}
style={{border: "none", boxShadow: "none", highlight: "none"}}
placeholder="Country"
name="country-selection"
value={this.state.countrySelection}
options={this.state.countryListFormatted}
onChange={this.onSelectCountry.bind(this)}
/>
The dropdown has options available and I can select them and the console log will log the value I select. I have another console log logging state and thats logging the right state. I just don't know why the input doesn't show the option I select.
Found the answer to this on a github issue:
The component is now "controlled", which means you have to pass value
as a prop and always handle the onChange event. See
https://facebook.github.io/react/docs/forms.html#controlled-components
I think that is your typo when you set state in onSelectCountry
it should be this.setState({countrySelection: val.value}) (value with small v)
Related
I'm trying to set the default value given a list of radio items in Sanity Studio.
Code:
export default {
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
// set initial value here ?
},
]
}
There is a property called initialValue that can set the default value of a string easily, but I can't figure out how to do this with radio items.
How can I have the radio item Fiction already selected when the page is loaded?
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
initialValue: "documentary", // set initialValue's value to one of the `value`s in your list of radio items
},
]
}```
I want to create a data table that has a column that contains a sparkline for each item in the data table. Is that possible?
Here's a mock-up of what I'm aiming for:
You have the option to use the item.name slot. Create a separate column for chart, then use its slot to put the sparkline:
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name",
},
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" },
{ text: "Chart", value: "chart" },
],
<template v-slot:item.chart={item}>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
Here is the full example: https://codesandbox.io/s/white-hill-spwzs?file=/src/components/HelloWorld.vue:1174-1618
I need to add my store value in picker. Is it possible in Sencha? If anyone know the answer please help me on this. Thanks in advance.
var picker = Ext.create('Ext.Picker', {
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
Ext.Viewport.add(picker);
picker.show();
You can replace data with store, read the documentation provided in the link below.
The slots configuration with a few key values:
name: The name of the slot (will be the key when using getValues in this Ext.picker.Picker).
title: The title of this slot (if useTitles is set to true).
data/store: The data or store to use for this slot.
http://docs.sencha.com/touch/2.2.0/#!/api/Ext.picker.Picker
Set slot data from a store:
slots : [{
store:null,
name:'picker'
}]
This is a bit old but it might help somebody.
You can call the setStore() method in the initialize function and then you need to set the valueField property on the picker slot to the value you want from the store.
Example of a picker with a slot and initialize:
Ext.define('MyApp.view.JobPicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.jobpicker',
config: {
zIndex: 10,
useTitles: true,
doneButton: {
action: 'donePreviousJobPicker'
},
cancelButton: {
action: 'cancel'
},
slots: [
{
xtype: 'pickerslot',
itemTpl: [
'{jobName}'
],
align: 'center',
name: 'JobSlot',
title: 'Select Previous Job',
valueField: 'indexID'
}
]
},
initialize: function() {
this.callParent();
var jobs = Ext.getStore("JobsPickerStore");
jobs.clearFilter(true);
this.query('pickerslot[name=JobSlot]')[0].setStore(jobs);
}
});
i'm using SenchaTouch and would like to use their Picker for a UI component. I have this code:
var datePicker = new Ext.Picker({
slots: [
{
name : 'limit_speed',
useTitles: true,
title: 'Terminals',
data : [
{text: 'Terminalq 1', value: 1},
{text: 'Terminal 2', value: 2},
{text: 'Terminal 3', value: 3},
{text: 'Terminal 4', value: 4}
]
}
]
});
Does anyone know how to get an event handler to work on the doneButton??
Adding a function to the change event.
datePicker.on('change', function(){
// do some stuff
});
or
var datePicker = new Ext.Picker({
slots: [
{
name : 'limit_speed',
useTitles: true,
title: 'Terminals',
data : [
{text: 'Terminalq 1', value: 1},
{text: 'Terminal 2', value: 2},
{text: 'Terminal 3', value: 3},
{text: 'Terminal 4', value: 4}
]
}
],
listeners: {
change: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
}
}
});
you could also add it to the 'hide' event, depends if you care about the value or not.
if u want to take value of selected field u can use this code.
listeners: {
change: function(picker,button) {
selectedValue = picker.getValue()['limit_speed'];
console.log(selectedValue);
}
}
You can get the selected value of dynamically created datepicker
listeners: {
change: function(picker,selectedValue) {
console.log(selectedValue);
}
}
I'm trying to find an example of how to setup some simple radio buttons in Sencha Touch. Can anyone point me at a good example?
you can try ..
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
{
xtype:'radiofield,
name: 'radiogroup',
value: 'A',
label: 'radio1'
},{
xtype:'radiofield,
name: 'radiogroup',
value: 'B',
label: 'radio2'
}
]
});
The kitchensink demo has a Radio example on the User Experience -> Form example. It's the "Favorite color" of the form. Also, Radio extends Checkbox, so if you can find examples of Checkbox it's similar.
Radio documentation here
The main thing is to give each Radio in a group the same name like the following :
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
new Ext.form.Radio({
name: 'radiogroup',
value: 'A',
label: 'radio1'
}), new Ext.form.Radio({
name: 'radiogroup',
value: 'B',
label: 'radio2'
})
]
});