I'm using Bootbox and want to have one of the check boxes pre-selected. For example:
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
};
Lets say that I want to have the first item in the array, which is pepperoni, selected as a default. Is it possible to do this using Bootbox? Thanks in advance.
You need to add the value option to prompt.
For a single checked option (https://jsfiddle.net/j7wgncsf/):
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
value: '1', // <----- this
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
Or, to have multiple options checked, use an array (https://jsfiddle.net/yasok05p/):
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
value: ['1', '2'],// <----- this
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
Related
The ComboBox component shows a dropdown icon for the trigger. How can I show a search icon instead? I am using ExtJS 3.X.
You can use the triggerClass config. I found a class x-form-search-trigger that seems to work. Here is a simple example:
new Ext.form.FormPanel({
items: [{
xtype: 'combo',
fieldLabel: 'Color',
mode: 'local',
triggerAction: 'all',
displayField: 'text',
valueField: 'value',
triggerClass: 'x-form-search-trigger',
store: new Ext.data.JsonStore({
data: [
{ text: 'Green', value: '1' },
{ text: 'Blue', value: '2' },
{ text: 'Red', value: '3' },
],
fields: [ 'text', 'value' ]
})
}],
renderTo: Ext.getBody()
});
Given TinyMCE config fragment
style_formats: [
{ title: 'Headings', items: [
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Heading 4', format: 'h4' },
{ title: 'Heading 5', format: 'h5' },
{ title: 'Heading 6', format: 'h6' }
]},
{ title: 'Blocks', items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Pre', format: 'pre' }
]},
],
Does TinyMCE (version 5 or 6) allow somehow defining that when user is currently using "Heading 2" style and he or she presses Enter key, the next style would be "Blockquote"?
Logically it could be something like
{ title: 'Heading 2', format: 'h2', next_style_after_enter: 'Blockquote' },
but obviously this specific syntax is not the correct one because I don't know the correct syntax. Obviously using the label for linking different styles is not optimal either, so better id would be needed, too.
I'm very new to Vue and got stuck at this point.
The problem: I'm not getting my select with v-model to change api url to change data on html.
This is my html:
<div class="uk-width-1-2#s">
<select class="uk-select" id="form-stacked-select" v-model="selected" >
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<div v-else v-for="(cases, index) in cases_list" :key="index" >
<p>{{cases.deaths}} deaths.</p>
</div>
This is my Js:
const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1'
new Vue({
el: '#app',
data() {
return {
cases_list: [],
loading: true,
errored: false,
selected: 'df',
state: '',
number: '',
options: [
{ text: 'AC', value: 'ac' },
{ text: 'AL', value: 'al' },
{ text: 'AP', value: 'ap' },
{ text: 'AM', value: 'am' },
{ text: 'BA', value: 'ba' },
{ text: 'CE', value: 'ce' },
{ text: 'DF', value: 'df' },
{ text: 'ES', value: 'es' },
{ text: 'GO', value: 'go' },
{ text: 'MA', value: 'ma' },
{ text: 'MT', value: 'mt' },
{ text: 'MS', value: 'ms' },
{ text: 'MG', value: 'mg' },
{ text: 'PA', value: 'pa' },
{ text: 'PB', value: 'pb' },
{ text: 'PR', value: 'pr' },
{ text: 'PE', value: 'pe' },
{ text: 'PI', value: 'pi' },
{ text: 'RJ', value: 'rj' },
{ text: 'RN', value: 'rn' },
{ text: 'RS', value: 'rs' },
{ text: 'RO', value: 'ro' },
{ text: 'RR', value: 'rr' },
{ text: 'SC', value: 'sc' },
{ text: 'SP', value: 'sp' },
{ text: 'SE', value: 'se' },
{ text: 'TO', value: 'to' }
],
}
},
mounted() {
this.getCases();
},
methods: {
getCases() {
axios
.get(API_URL)
.then((response) => {
this.cases_list = response.data.data;
console.log(response.data.data);
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
})
My select option link to options array where I have texts and values, and every value should add on end of api url a 'uf/${option}' when selected...
Like: const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1' + 'uf/%{option}';
I'm very confused on how I make this select working. I was not able to find on vue documentation
You have to configure the URL before Axios call.
const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1/brazil'
new Vue({
el: '#app',
data() {
return {
cases_list: [],
loading: true,
errored: false,
selected: 'df',
state: '',
number: '',
options: [{
text: 'AC',
value: 'ac'
},
{
text: 'AL',
value: 'al'
},
{
text: 'AP',
value: 'ap'
},
{
text: 'AM',
value: 'am'
},
{
text: 'BA',
value: 'ba'
},
{
text: 'CE',
value: 'ce'
},
{
text: 'DF',
value: 'df'
},
{
text: 'ES',
value: 'es'
},
{
text: 'GO',
value: 'go'
},
{
text: 'MA',
value: 'ma'
},
{
text: 'MT',
value: 'mt'
},
{
text: 'MS',
value: 'ms'
},
{
text: 'MG',
value: 'mg'
},
{
text: 'PA',
value: 'pa'
},
{
text: 'PB',
value: 'pb'
},
{
text: 'PR',
value: 'pr'
},
{
text: 'PE',
value: 'pe'
},
{
text: 'PI',
value: 'pi'
},
{
text: 'RJ',
value: 'rj'
},
{
text: 'RN',
value: 'rn'
},
{
text: 'RS',
value: 'rs'
},
{
text: 'RO',
value: 'ro'
},
{
text: 'RR',
value: 'rr'
},
{
text: 'SC',
value: 'sc'
},
{
text: 'SP',
value: 'sp'
},
{
text: 'SE',
value: 'se'
},
{
text: 'TO',
value: 'to'
}
],
}
},
mounted() {
this.getCases();
},
watch: {
selected: function(val) {
this.getCases()
},
},
methods: {
getCases() {
console.log(API_URL + '/uf/' + this.selected);
axios
.get(API_URL + '/uf/' + this.selected)
.then((response) => {
this.cases_list = response.data;
console.log(response.data);
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg==" crossorigin="anonymous"></script>
<div id='app' class="uk-width-1-2#s">
<select class="uk-select" id="form-stacked-select" v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
Created a form in extjs-6 - modern for file upload.
After new update on chrome browser i am getting following error "Form submission canceled because the form is not connected"
I tried with rendering the form on body also, still getting the same error.
Please suggest anything i am missing.Thanks in advance.
Ext.define('LayersSurvey.view.Attachments',
{
extend: 'Ext.form.Panel',
alias: 'widget.attachments',
controller: 'Basecontrol',
closeAction: 'hide',
closable: false,
colapsible: true,
//zIndex: 9999,
scrollable: true,
renderTo: Ext.getBody(),
multipartDetection:true,
items:
[{
xtype: 'selectfield',
label: 'Floor',
labelAlign: 'left',
//labelWidth :'30%',
name: 'attachmentType',
required: true,
options:
[{
text: 'G-2',
value: '-2'
}, {
text: 'G-1',
value: '-1'
},{
text: 'G',
value: '0'
}, {
text: 'M',
value: '0.5'
},{
text: 'G+1',
value: '1'
}, {
text: 'G+2',
value: '2'
},{
text: 'G+3',
value: '3'
}, {
text: 'G+4',
value: '4'
},{
text: 'G+5',
value: '5'
}, {
text: 'G+6',
value: '6'
},{
text: 'G+7',
value: '7'
},{
text: 'G+8',
value: '8'
},{
text: 'G+9',
value: '9'
},{
text: 'G+10',
value: '10'
}],
listeners:
{
}
},{
xtype: 'filefield',
//label: "Attachment:",
name: 'photo',
//bodyAlign:'center',
accept: 'image',
listeners:
{
tap:'onMediaChange'
}
},
{
xtype:'button',
text: 'Upload',
ui: 'action',
action:'',
listeners: {tap:'onMediaUpload'}
}]
});
In the config for your form, make sure enableSubmissionForm is set to false.
In the case where I had this issue, I was using Architect to create the web app version of my app, and in Chrome I was getting the same error. By default, enableSubmissionForm seems to be true in extjs 6.x modern.
i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.
the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel
following is the code for filters.js
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
ui: 'green',
cls: 'x-toolbar-dark',
baseCls: 'x-toolbar',
initComponent: function() {
this.addEvents('filter');
this.enableBubble('filter');
var form;
var showForm = function(btn, event) {
form = new Ext.form.FormPanel(formBase);
form.showBy(btn);
form.show();
};
Ext.apply(this, {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
layout: {
type: 'hbox',
align: 'center'
},
items: [
{
xtype: 'button',
iconCls:'info',
title:'info',
iconMask:true,
ui:'plain',
},{
xtype: 'spacer'
},/*{
xtype: 'selectfield',
name: 'search',
prependText: 'Search:',
options: [
{text: 'Location', value: 'location'},
{text: 'Theme', value: 'theme'},
]
},*/{
xtype: 'searchfield',
name: 'q',
placeholder: 'Search',
value: 'Destination or ID',
listeners : {
change: this.onFieldChange,
keyup: function(field, e) {
var key = e.browserEvent.keyCode;
// blur field when user presses enter/search which will trigger a change if necessary.
if (key === 13) {
field.blur();
}
},
scope : this
}
},{
xtype: 'selectfield',
name : 'sort_by',
prependText: 'sort_by:',
ui:'button',
cls:'sortbox',
options: [
{text: 'Sort By', value: ''},
{text: 'Newest', value: 'modified'},
{text: 'Sleeps', value: 'sleep_max'},
{text: 'Sleeps Desc', value: 'sleep_max DESC'},
{text: 'Bedrooms', value: 'bedroom'},
{text: 'Bedrooms Desc', value: 'bedroom DESC'},
// {text: 'Rates', value: 'rates'},
]
},{
xtype: 'button',
text: 'Filters',
handler: showForm
}
]
});
kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
//for filters form
var formBase = {
scroll: 'vertical',
//url :
standardSubmit : true,
items: [{
xtype: 'fieldset',
title: 'Filters',
instructions: 'Please enter the information above.',
defaults: {
//required: true,
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'spinnerfield',
name : 'sleep_max',
label: 'Sleeps',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'bedroom',
label: 'Bedrooms',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'rates',
label: 'Rates',
minValue: 50,
maxValue:5000,
incrementValue: 100,
cycle: false
},/*{
xtype: 'datepickerfield',
name : 'checkIn',
label: 'Check In',
destroyPickerOnHide: true,
},{
xtype: 'datepickerfield',
name : 'checkOut',
label: 'Check Out',
destroyPickerOnHide: true,
},*/{
xtype: 'selectfield',
name : 'themes',
label: 'Themes',
options: [
{text: 'Themes', value: ''},
{text: 'Skiing', value: 'skiing'},
{text: 'Golf', value: 'golf'},
{text: 'Beaches', value: 'beaches'},
{text: 'Adventure', value: 'adventure'},
{text: 'Family', value: 'family'},
{text: 'Fishing', value: 'fishing'},
{text: 'Boating', value: 'boating'},
{text: 'Historic', value: 'historic'},
{text: 'Biking', value: 'biking'},
]
},/*{
xtype: 'hiddenfield',
name : 'secret',
value: 'false'
},*/]
}],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
console.log(form);
console.log(result);
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Cancel',
handler: function() {
form.hide();
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Apply',
ui: 'confirm',
handler: function() {
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: false,
hideOnMaskTap: false,
height: 300,
width: 420,
});
}
},
/**
* This is called whenever any of the fields in the form are changed. It simply collects all of the
* values of the fields and fires the custom 'filter' event.
*/
onFieldChange : function(comp, value) {
//console.log(comp); console.log(value);
this.fireEvent('filter', this.getValues(), this);
}
});
Ext.reg('loanFilter', kiva.views.LoanFilter);
Its not clear what do you mean under "filters doesn't work".
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating
Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase
var formBase = {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
...