Develop Reference

Extjs 4.1: Ext.data.Store records are not loaded into second Ext.data.Store

I have the following model and store in my app.
My problem is that when I'm trying to load the records into the second store it doesn't work. I've tried different store methods and nothing (Store Manual).
In my app the first store records are loaded in a controller, where an Ajax call receives the data.products variable.
Any ideas what I'm doing wrong?
PS: I'm using ExtJs 4.1
Fiddle sencha
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
alias: 'model-product',
idgen: 'sequential',
fields: [
{ name: 'available', type: 'boolean', useNull: false, defaultValue: true },
{ name: 'country', type: 'int', useNull: false },
{ name: 'key', type: 'string', useNull: false },
{ name: 'name', type: 'string', useNull: false }
],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'products'
}
}
});
Ext.define('App.store.Product', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true,
groupField: 'id',
countryFilter: function(countryId) {
this.clearFilter();
this.filter('country', countryId);
return this;
},
getRecordsForCountry: function (countryId) {
var records = [];
this.findBy(function (record) {
if (record.get('country') === countryId) {
records.push(record.copy());
}
});
return records;
},
model: 'App.model.Product',
sorters: [ {
property: 'key',
direction: 'ASC'
} ],
sortOnLoad: true
});
Ext.onReady(function () {
var data = {
products: [{
country: 1,
key: 'test1',
name: 'Test1'
}, {
country: 2,
key: 'test2',
name: 'Test2'
}, {
country: 3,
key: 'test3',
name: 'Test3'
}]
};
var store = Ext.create('App.store.Product');
store.loadRawData(data, false);
var store2 = Ext.create('App.store.Product'),
records = store.getRecordsForCountry(1);
store2.add(records);
//tried also:
//store2.loadRecords(records);
//store2.loadData(records);
//store2.loadRawData(records);
var combobox = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store
});
var combobox2 = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store2
});
});
<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>

Apparently these two settings:
autoLoad: true,
autoSync: true
screws the whole store up and calls load with empty records (triggerd by loadRawData, loadRecords, clearFilter, filter).
After setting these two to false the loading happens only on explicit call to the load methods.
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
alias: 'model-product',
idgen: 'sequential',
fields: [
{ name: 'available', type: 'boolean', useNull: false, defaultValue: true },
{ name: 'country', type: 'int', useNull: false },
{ name: 'key', type: 'string', useNull: false },
{ name: 'name', type: 'string', useNull: false }
],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'products'
}
}
});
Ext.define('App.store.Product', {
extend: 'Ext.data.Store',
autoLoad: false,
autoSync: false,
groupField: 'id',
countryFilter: function(countryId) {
this.clearFilter();
this.filter('country', countryId);
return this;
},
getRecordsForCountry: function (countryId) {
var records = [];
this.findBy(function (record) {
if (record.get('country') === countryId) {
records.push(record.copy());
}
});
return records;
},
model: 'App.model.Product',
sorters: [ {
property: 'key',
direction: 'ASC'
} ],
sortOnLoad: true
});
Ext.onReady(function () {
var data = {
products: [{
country: 1,
key: 'test1',
name: 'Test1'
}, {
country: 2,
key: 'test2',
name: 'Test2'
}, {
country: 3,
key: 'test3',
name: 'Test3'
}]
};
var store = Ext.create('App.store.Product');
store.loadRawData(data, false);
var store2 = Ext.create('App.store.Product'),
records = store.getRecordsForCountry(1);
store2.add(records);
//tried also:
//store2.loadRecords(records);
//store2.loadData(records);
//store2.loadRawData(records);
var combobox = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store
});
var combobox2 = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store2
});
});
<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>

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 populating a panel with multiple data sources

I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.
I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.
the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.
`
var JSONSTORE = new Ext.data.JsonStore ({
// Store Configs
autoLoad: true,
url: 'json_data_call.php',
baseParams: {action: 'read'},
// Reader Configs
storeId: 'store1',
idProperty: 'store1',
root: 'data',
sortInfo: {
field: 'field_name',
direction: 'ASC'
},
fields: [
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'int'}
],
autoSave: false
});
JsonStore.on('exception',JsonSave,this);
JsonStore.on('load',function(){
autoDiagnosticsJsonStore.warn_err_loaded = true;
if(autoDiagnosticsJsonStore.warn_err_loaded)
{
console.log(autoDiagnosticsJsonStore);
}else{
console.log('ERROR');
}
});
/*
* ColumnModel
*/
var ColumnModel = new Ext.grid.ColumnModel ({
defaults: { menuDisabled: true },
columns: [
{header: 'Type', hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.ERR_TYPE == 'WARNING') {
metaData.css = 'cog_bg_orange';
}
if (record.data.ERR_TYPE == 'ERROR') {
metaData.css = 'cog_bg_red';
}
return value;
}
},
{header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
]
});
var errorGrid = new Ext.grid.GridPanel({
id: 'nmerrorGrid',
enableColumnMove: false,
autoHeight: true,
xtype: 'grid',
ds: JsonStore,
cm: ColumnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
$error_panel = "
var errorPanel = new Ext.Panel({
title: 'field_name',
collapsible: true,
anchor: '98%',
height: 300,
frame: true,
layout: 'fit',
items: [ errorGrid ]
});`

If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.
If you create a model for the records of your store, you can create a field that is calculated using the record's values.
Example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstName',
type: 'string'
},{
name: 'lastName',
type: 'string'
},{
name: 'fullName',
calculate: function (data) {
return data.firstName + ' ' + data.lastName;
}
}]
});
The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.

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);
}
},
});

Populate ComboBox ExtJS 4.2 using JSON

I have to populate a ComboBox in ExtJS 4.2 using JSON data received from a php.
Code so far :
DataStore:
var Cstates = new Ext.data.Store({
autoLoad: true,
url: 'data.php',
storeId: 'Cstates',
reader: new Ext.data.JsonReader({
root: 'state'
}),
idProperty: 'abbr',
fields: ['abbr', 'name']
});
ComboBox:
{
xtype: 'combo',
id: 'cmbState',
fieldLabel: ' Select state :',
triggerAction: 'all',
store: Cstates,
queryMode: 'local',
valueField: 'abbr',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
emptyText: '* All States',
forceSelection: true,
selectOnFocus: true,
allowBlank: false,
selectOnTab: true,
//hidden: true,
disabled: true
}
JSON received:
{state:[{"abbr":"E1","name":"EAST1"},{"abbr":"E2","name":"EAST2"}]}
Also later I need to populate this combobox with some other value that will be returned in the same format from a php using GET ie data.php?region=EAST.

Here is the chained combobox working example
// first combobox model definition
Ext.define('ArticleMainGroup', {
extend: 'Ext.data.Model',
fields: [
{name: 'PWHG', type: 'int'},
{name: 'PWHG_BEZ', type: 'string'}
]
});
// first combobox store definition
var articleMain = new Ext.data.JsonStore({
model: 'ArticleMainGroup',
autoLoad: true,
proxy: {
type: 'ajax',
url: '<?php echo base_url() ?>dashboard/promotion',
reader: {
type: 'json',
root: 'ArticleMainGroup',
idProperty: 'PWHG'
}
}
});
// second combobox store definition
var articleBase = new Ext.data.JsonStore({
model: 'ArticleBaseGroup',
proxy: {
type: 'ajax',
url: '<?php echo base_url() ?>dashboard/promotion',
reader: {
type: 'json',
root: 'ArticleBaseGroup',
idProperty: 'PWG'
}
}
});
// first combobox definition
{
xtype: 'combobox',
fieldLabel: 'ANA MAL GRUBU',
store: articleMain,
id: 'art-main-group',
queryMode: 'local',
autoSelect: true,
forceSelection: true,
triggerAction: 'all',
inputWidth: 240,
margin: '5 0 0 0',
listConfig: { cls: 'combo-dep' },
valueField: 'PWHG',
displayField: 'PWHG_BEZ',
listeners: {
select: function(combo) {
Ext.getCmp('art-base-group').setValue("");
/**
* this is the important part
* articleBase is a store definition which is bound to second combobox
* when we send a parameter by extraParams, the target store using this
* parameter via url string
* after that we should re-load the target store by load() method
* as a result, target combobox will populate based on this url parameter
* like http://localhost/dashboard?maingroup=10
*/
articleBase.proxy.extraParams = {'maingroup': combo.getValue()};
articleBase.load();
}
}
}
// second combobox definition
{
xtype: 'combobox',
fieldLabel: 'MAL GRUBU',
store: articleBase,
id: 'art-base-group',
queryMode: 'local',
autoSelect: false,
forceSelection: true,
triggerAction: 'all',
editable: false,
valueField: 'PWG',
displayField: 'PWG_BEZ',
inputWidth: 240,
margin: '10 0 0 0',
listConfig: { cls: 'combo-dep' },
listeners: {
select: function(combo) {
Ext.getCmp('art-sub-group').setValue("");
articleSub.proxy.extraParams = {'maingroup': Ext.getCmp('art-main-group').getValue(), 'basegroup': combo.getValue()}
articleSub.load();
}
}
}