Develop Reference

ExtJS 3.4 - comboBox linked

First of all, sorry for my english.
Undoubtedly, before writing, I searched a lot, but without success.
I have two comboBox linked.
The first :
var groupe_cible = new Ext.data.JsonStore({
url : "data/fonctions_data.php?pFunction=access_group&user_id=" + p,
fields: [
{name: 'value', mapping: 'value', type: 'string'},
{name: 'id', mapping: 'id_group', type: 'int'}
],
autoLoad : true
});
json result :
[{"value":"fibre","id_group":1},{"value":"eau_pluviale","id_group":2}]
The second :
var param_cible = new Ext.data.ArrayStore({
//pruneModifiedRecords: true,
autoDestroy: true,
url : "data/fonctions_data.php?pFunction=access_param&user_id=" + p,
fields: [
{name: 'value', mapping: 'value', type: 'string'},
{name: 'id', mapping: 'id', type: 'int'},
{name: 'groupcode', mapping: 'groupcode', type: 'int'}
],
autoLoad : true
});
json result :
[{"value":"vias","id":2,"groupcode":2},{"value":"cahm","id":1,"groupcode":1},{"value":"agde","id":2,"groupcode":2}]
the link: id_group = groupcode
ComboBox =
var groupeCombo = new Ext.form.ComboBox({
id: "contenutypetraitementdict",
x: 5,
y: 55,
width : 150,
store: groupe_cible,
emptyText:'Choisir le type de traitement',
valueField: 'id',
displayField: 'value',
typeAhead: false,
editable: false,
mode: 'local',
allowBlank:false,
forceSelection: true,
border: false,
triggerAction: 'all',
//lastQuery: '',
selectOnFocus:true,
listeners: {
select : function(cmb, group, idx) {
autosStore = paramCombo.getStore();
paramCombo.clearValue();
autosStore.clearFilter();
autosStore.filterBy(function(item) {
var paramCode = item.get('groupcode');
var selected = (paramCode === group.data.id);
return selected;
});
paramCombo.enable();
}
}
});
var paramCombo = new Ext.form.ComboBox({
id: "contenutypetraitementdictparam",
x: 5,
y: 85,
width : 150,
store: param_cible,
emptyText:'Choisir le type de traitement',
allowBlank:false,
valueField: 'id',
displayField: 'value',
//border: false,
typeAhead: false,
editable: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
lastQuery: '',
selectOnFocus:true
});
Then both comboBox are in a FormPanel.
The link works, but i have a problem : see attachment
The drop-down list is linked, but there is always a default value.
To follow the example, if I click on the value "agde", the second item, at the end, I always have the first value ("vias").
The problem is hard to solve (no problem with Firebug).
Thank you.

Try to use filter
Filter the records by a specified property. Alternatively, pass an array of filter options to filter by more than one property. Single filter example: store.filter('name', 'Ed', true, true)
I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.
Ext.onReady(function () {
//groupe_cible store
var groupe_cible = new Ext.data.JsonStore({
fields: [{
name: 'value',
mapping: 'value',
type: 'string'
}, {
name: 'id',
mapping: 'id_group',
type: 'int'
}],
type: 'ajax',
url: 'groupe_cible.json',
type: 'json',
root: 'data',
autoLoad: true
});
//param_cible store
var param_cible = new Ext.data.JsonStore({
fields: [{
name: 'value',
mapping: 'value',
type: 'string'
}, {
name: 'id',
mapping: 'id',
type: 'int'
}, {
name: 'groupcode',
mapping: 'groupcode',
type: 'int'
}],
type: 'ajax',
url: 'param_cible.json',
type: 'json',
root: 'data',
autoLoad: true
});
//groupe_cible combo
var item1 = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
listClass: 'comboalign',
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
displayField: 'value',
emptyText: 'Select groupe_cible',
valueField: 'id_group',
store: groupe_cible,
listeners: {
select: function (combo, record) {
var param_cible = Ext.getCmp('param_cible'),
store = param_cible.getStore();
param_cible.setDisabled(false).setValue('');
store.clearFilter();
store.filter('groupcode', combo.getValue());
// You can also use getValue method of Combo
// store.filter('groupcode', record[0].get('id'));
}
}
});
//param_cible combo
var item2 = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
listClass: 'comboalign',
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
id: 'param_cible',
disabled: true, //initially param cibil will disable
emptyText: 'Select param_cible',
displayField: 'value',
valueField: 'id',
store: param_cible
});
//create panel with both combo
new Ext.Panel({
width: 250,
renderTo: document.body,
title: 'Filter in Combo on basis of selection',
items: [item1, item2]
});
});

How to load data in tagfield from XML

I am trying to load my data from the xmll to tagfield. But I am not sure what is getting failed. Can anybody please suggest me what is going wrong here.
I am using store for tagfield which is in different function. I don'y know even not able to do debugging also over there.
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store: this.TagStore,
//displayField: 'show',
valueField: 'id',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
debugger;
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "GET"
},
url: "localhost/MyApp/resources/data.xml",
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'xml',
rootProperty: 'R.D.Result'
},
extraParams: {
strIPXML: strIPXML
}
})
});
}
});
MyXml :
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
Can anybody help me how to load data through xml in extJS

Just got sometime to play with your issue on sencha fiddle, Here is the basic working code (Atleast seeing tagfield store populated). Used: Ext JS 5.1.1.451 - Gray
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store:Ext.getStore('TagStore'),
displayField: 'name',
valueField: 'value',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId:'TagStore',
fields: [{
name: 'value',
mapping: "#ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "#TITLE",
type: 'string'
}],
proxy: {
type: 'ajax',
url: "data1.xml",
reader: {
type: 'xml',
record: 'E',
rootProperty:'EMAIL'
}
}
});
return combstore;
}
});
var form = Ext.create('MyApp.view.main.List');
form.TagStore();
var store = Ext.getStore('TagStore');
form.child('[xtype=tagfield]').bindStore(store);
}
});
data1.xml
<?xml version="1.0" encoding="UTF-8"?>
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>

ExtJs: Get store data on store creation

I have an in-line store that is inside of a simple combobox. This store has some default inline-data. Now I'm looking for an event that gets fired once the store is created and this event needs to supply me with the data that is in the store.
I tried it like this:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
let records = store.getData()
records.forEach(record => {
console.log(record.getField('name'))
})
}
}
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody()
});
But it doesn't work. store.getData() doesn't seem to contain my records.
There's my fiddle:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h53

Use this now store show console data:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
datachanged : function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
store.load();
}
},
});

I finally managed to solve the problem by accessing the store after it's combobox is rendered:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h7c
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
let store = me.getStore()
console.log("Event fired!")
store.each(record => {
console.log(record.get('name'))
})
}
},
});

You can easily do this by creating store afterrender of combo box and set store to combo box.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
}
},
});

How to fire onSelect of a extjs 3.4 combo when loading a Store?

Here is my code -
Store = new Ext.data.JsonStore({
url: 'url',
totalProperty: 'count',
id: 'Code',
root: 'rows',
autoLoad: true,
triggerAction: 'all',
fields: ['title', 'description'],
listeners: {
load: {
fn: function (store) {
Ext.getCmp('Combo').setValue(store.getAt('1').get('title'));
Ext.getCmp('Combo').fireEvent('select');
}
}
}
}
);
xtype: 'combo',
id: 'Combo',
store: Store,
fieldLabel: 'title',
displayField: 'title',
valueField: 'title',
typeAhead: false,
editable: false,
allowBlank: false,
mode: 'local',
emptyText: 'Select...',
forceSelection: true,
triggerAction: 'all',
name: 'DefaultCombo',
selectOnFocus: true,
width: 150
, onSelect: function () {
alert('message');
}
Combobox value is being set here, but onSelect is not firing here.
I am using 3.4 version

I tested out this in a fiddle. The onSelect function appears to only fire when a selection is made. However, if you add a listener for the select event instead that fire's in either case.
listeners: {
select:function(){
console.log('Select Event Fired!')
}
},

Wrong sort order in combobox with extjs

I'm having a data sort problem with a combobox.
Data source is JSON. Data is sorted in sql. Resulting set(in sql) and JSON result looks fine:
{"rows":[{"id":"TOT","txt":" Alle diagnosen"},{"id":"612","txt":"(acute) bloeding distale tract. digestivus*"},{"id":"042","txt":"(auto)-intoxicatie"},{"id":"402","txt":"(benigne) peptisch ulcus*"},{"id":"10","txt":"(bij)niertumor"},{"id":"652","txt":"(chorio)retinitis.. etc etc
Resulting data looks fine(=same sort order as JSON result) when I inspect the store with with firebug:
However, the resulting combobox has a different(wrong) sorting(first 2 are ok):
It is not sorted on the display value, nor on the id value. There is no sorter added anywwhere.
Combo:
{
xtype: 'combobox',
id: 'ComboDiag',
itemId: 'ComboDiag',
width: 280,
fieldStyle: '',
name: 'ComboDiag',
fieldLabel: 'Diagnose',
labelWidth: 90,
displayField: 'txt',
queryMode: 'local',
store: 'ComboDiagStore',
typeAhead: true,
valueField: 'id',
listeners: {
render: {
fn: me.onComboDiagRender,
scope: me
}
}
}
Store:
Ext.define('AppPitDash.store.ComboDiagStore', {
extend: 'Ext.data.Store',
alias: 'store.ComboDiagStore',
requires: [
'AppPitDash.model.ComboDiagModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'ComboDiagStore',
model: 'AppPitDash.model.ComboDiagModel',
proxy: {
type: 'ajax',
url: './php/get-data-diagCombo.php',
reader: {
type: 'json',
root: 'rows'
}
}
}, cfg)]);
}
});
Model:
Ext.define('AppPitDash.model.ComboDiagModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'txt'
}
]
});
I'm using Sencha Architect 2, first time.
This is rather an annoyance than a showstopper, but still help would be appreciated.

Try adding remoteSort: true to callParent method in store definition.

Try to use:
remoteGroup: true,
remoteSort: true,
sortInfo: { field: 'order', direction: 'DESC' },