JsOnStore Coding
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, 'Route_Seq','Location_Name']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteModelSeq',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
extraParams: {
'_id' : '0',
},
reader: {
type: 'json',
//idProperty: '_id'
},
writer: {
type: 'json',
//id: '_id'
}
}
});
this is the combo box when selected changed then pass the extraparams to get the data and show at grid panel
xtype: 'combobox',
width: 191,
store: RouteNameStore,
displayField : "Route_Code",
fieldLabel: 'Route Code',
labelWidth: 70,
allowBlank: false,
editable: false,
listeners: {
select: function( combo, records, eOpts ) {
console.log("Combo selected _id : "+records[0].get('_id'));
RouteSeqStore.load({
params:{
_id: records[0].get('_id')
}
});
}
}
and get-routeseq.php get work fine, this is firebug return JSON data from get-routeseq.php
[{"Route_ID":"1","Route_Seq":"1","Route_LocationID":"1","_id":"1","Location_ID":"1","Location_Name":"TRY","AddBy_ID":"2"},
{"Route_ID":"1","Route_Seq":"2","Route_LocationID":"2","_id":"2","Location_ID":"2","Location_Name":"ABC","AddBy_ID":"2"}]
all working fine, but firebug with this error
TypeError: d.read is not a function
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
why?
replace model: 'RouteModelSeq',
with model: 'RouteSeqModel',
Related
xtype : 'combo',
allowBlank : false,
hideTrigger : true,
name : 'dummyName',
itemId : 'value',
fieldLabel : 'Value',
labelWidth: 40,
store : {
fields : ['value'],
proxy : {
type: 'ajax',
url: '/DUMMY/URL/',
reader: {
type: 'json',
rootProperty: 'results'
}
}
},
displayField: 'value',
valueField : 'value',
queryMode : 'remote',
queryParam : 'search',
typeAhead : false,
minChars : 0,
queryDelay : 500,
emptyText : 'mandatory',
msgTarget : 'none',
listConfig : {
maxHeight : 220
},
So this sends the AJAX call and show suggestions on typing the first letter. However, I want to show the suggestions when the combo is focused and even before the typing starts.
I could send out the AJAX call using the 'focus' listener. However, it doesn't show the suggestions.
listeners:{
'focus': function(){
this.store.load();
}
}
You can check if picker is created. If its created just show otherwise invoke trigger function.
Here is example :
Ext.application({
name: 'Fiddle',
launch: function () {
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'combo example',
layout: 'fit',
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
focus: function (component) {
component.store.load(function () {
if (Ext.isEmpty(component.picker)) {
component.onTriggerClick();
} else {
component.picker.show();
}
});
}
}
}]
});
}
});
Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2a04
Im using ExtJS 4.2. I have following code:
Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'type',
type: 'string'
}, {
name: 'type_id',
type: 'int'
}],
proxy: {
type: 'ajax',
api: {
update: 'localhost/update'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
root: 'data',
encode: true
}
}
});
var record = new Model({
id: 100,
type_id: 2
});
record.phantom = false;
record.save({
success: function(record) {
console.log(record.get('type'));
}
});
Param of request localhost/update:
data: {id: 100, type_id: 2}
Response:
data: {id: 100, type_id: 2, type: 'type of record'}
Why it
console.log(record.get('type'));
displays null?
You may have to add "success": true to your response or set successProperty to null on your reader.
What am I doing wrong? Of all the fields displayed in the grid only Working Group. EXTjs 4.2.1.
Tried different variants that have been found here, but, alas, nothing has helped understand what is wrong here.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'WorckGroup', type: 'string' },
{ name: 'Statistics', type: 'auto' },
{ name: 'Specialist', type: 'string', mapping: 'Statistics.Specialist' },
{ name: 'ScallCount', type: 'int', mapping: 'Statistics.SCallCount' },
{ name: 'AverageDuration', type: 'auto', mapping: 'Statistics.AverageDuration' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'myModel',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid',
reader: {
type: 'json',
}
},
autoLoad: true
});
var basegrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'WG', width: 200, dataIndex: 'WorckGroup' },
{ header: 'SP', dataIndex: 'Specialist' },
{ header: 'SCC', dataIndex: 'SCallCount' },
{ header: 'AD', dataindex: 'AverageDuration' }
], });
json
[
{"WorckGroup":"3D",
"Statistics":[
{"Specialist":"В А","SCallCount":64,"AverageDuration":0.1136067},
{"Specialist":"К Т","SCallCount":170,"AverageDuration":0.1045816}]
{"WorckGroup":"SD",
"Statistics":[
{"Specialist":"B A","SCallCount":197,"AverageDuration":0.1364689}]
}
]
Your mappings don't make sense. Statistics is an array, so Statistics.Specialist doesn't map to anything.
Your root for the reader should probably be WorckGroup.Statistics and you should include the WorckGroup in each item.
reader: {
type: 'json',
root: 'WorckGroup.Statistics'
}
Then remove the mapping from each field in the model.
I have a combobox and when I load it with a particular value (not empty/default), it rendered blank.
I think it's because the properties name and valueField are different. Create/update works and the values are in the combo. Can you help?
{
xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Organisme',
name: 'idOrganismePriseEnCharge',
displayField: 'Organisme',
store: 'Organismes',
valueField: 'idOrganisme'
}
My Model:
Ext.define('MG.model.TypeAide', {
extend: 'Ext.data.Model',
idProperty: 'idTypeAide',
fields: [
{
name: 'idTypeAide'
},
{
name: 'TypeAide'
},
{
name: 'Montant'
},
{
name: 'idOrganismePriseEnCharge'
},
{
name: 'Organisme'
}
]
});
My store:
Ext.define('MG.store.TypesAides', {
extend: 'Ext.data.Store',
requires: [
'MG.model.TypeAide'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MG.model.TypeAide',
storeId: 'StoreTypesAides',
proxy: {
type: 'ajax',
api: {
create: 'http://localhost/MG/php/TypesAides.php?action=create',
read: 'http://localhost/MG/php/TypesAides.php?action=read',
update: 'http://localhost/MG/php/TypesAides.php?action=update',
destroy: 'http://localhost/MG/php/TypesAides.php?action=destroy'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});
valueField should match a field from the model you're using. In your case it's idOrganisme and there is no such field in the model.
I have setup a SenchaTouch/PhoneGap app that pulls information from an external XML feed. My problem is this will obviously only work when online.
How do I go about storing the information from the external feed in the local storage to be used offline?
Here is the app data store code:
App.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
idProperty: 'id',
type: 'xml',
root: 'events',
record: 'event'
}
}
});
App.eventstore.read();
Update after Ilya139's answer:
I've implemented the code, but now my list is empty... :(
Store
App.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
idProperty: 'id',
type: 'xml',
root: 'events',
record: 'event'
}
}
});
App.eventstore.read();
App.eventstore.each(function(record){record.save();});
App.offlineeventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'localstorage',
id:'events'
}
});
App.offlineeventstore.read();
Model
Ext.regModel('Event', {
fields: [
{name: 'id', mapping: '#id', type: 'integer'},
{name: 'title', type: 'string'},
etc etc...
],
proxy: {
type: 'localstorage',
id:'events'
}
});
And the list is set to use the offline store:
items: [{
xtype: 'list',
store: App.offlineeventstore,
itemTpl: '{title}',
grouped: true,
indexBar: true,
Add this to the Event model:
proxy: {
type: 'localstorage',
id:'events'
}
And then for each event that you download call save() like this:
App.eventstore.each(function(record){record.save();});
Then to load:
App.offlinestore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'localstorage',
id:'events'
}});
Update
App.eventstore.load(function(){
App.eventstore.each(function(record){record.save();});
offlineeventstore.load();
});