We Keep Coding

How to know how many items were selected in a multiSelect combobox

I have a combo box with the multiSelect property and I want to know how can I know how many items were selected. I tried with:
combobox.store.getCount();
but it tells me the total of items in my combo box instead of the total of items selected by the user. Basically I want to make a condition that will trigger when the user selects more than one option in the combobox

You can use combo.getPicker() method and picker have method to get selected records
In this FIDDLE, I have created a demo using combobox with multi-select. I hope this will help you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
// The data store containing the list of states
Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
storeId: 'states',
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.panel.Panel', {
title: 'Combo Example',
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
margin: 10,
fieldLabel: 'Choose State',
store: 'states',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
multiSelect: true,
}],
bbar: ['->', {
text: 'Get Selected',
handler: function () {
var selectionModel = this.up('panel').down('combo').getPicker().getSelectionModel();
record = selectionModel.getSelection();
console.log(record);
Ext.Msg.alert('Info', 'Number of Selected record is ' + selectionModel.getCount());
//Ext.Msg.alert('Info', 'Selected record is <br> '+ record.map(r=>{return r.get('name')}).join('<br>'));
}
}]
});
}
});

Here is a possible solution. Go to multiselect-demo.html, open your browser console (F12 on Google Chrome and Firefox) and type :
f = Ext.getCmp("multiselect-field");
f.on("change", function () {
console.log(this.getValue().length)
});
Then see what's happening when you change the selected values in the "MultiSelect Test". For more informations, see : http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.ux.form.MultiSelect-method-getValue.

selectize.js and vue.js 2 ajax loaded optons

I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry

I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.

Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager

I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}

If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();

This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}

how to disable a particular option in sencha touch

I have a select field in sencha touch as below.
var filter = new Ext.form.Select({
options: [
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' },
{ text: 'Proximity', value: 'Proximity' }
],
id:'FilterSelect'
label: 'Filter By'
});
I would like to know how to disable or hide a particular option value, as on some events I need to hide/disable the "Proximity option" and vice versa.

Whenever you want to change the options, simply call setOptions() like this:
filter.setOptions([
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' }
]);
The docs have an additional example: http://docs.sencha.com/touch/1-1/#!/api/Ext.form.Select

Adding items dynamically from javascript array in Sencha Touch

I have this code
var filter = {
items: [{
xtype: 'fieldset',
title: 'Choose',
items: [
// I need to put checkboxes here
]
}]
};
I need to dynamically add checkbox items:
{
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
The data that I need to add is stored in JS array, and checkbox can be checked or unchecked
Please help,
Thank you in advance

What is your issue? When do you add? What is the event?
filter.items[0].items[filter.items[0].items.length] = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
or
var checkbox = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
var itemArr = filter.items[0].items;
itemArr[itemArr.length]=checkbox;

What is filter, is it a Container or does it extend from it (Panel, FormPanel, etc.)?
If so, you can use the add() method to dynamically add to it.
It's also good to note, that posting in the Sencha Forums will get your a much faster response.