JSON Store can't load PHP data - EXTJS 4 - javascript

Ext.define('GoogleMarkerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'ID', type: 'int'},
{name: 'Locating', type: 'int'},
{name: 'MainPower', type: 'int'},
{name: 'Acc', type: 'int'},
{name: 'PowerOff', type: 'int'},
{name: 'Alarm', type: 'int'},
{name: 'Speed', type: 'int'},
{name: 'Direction', type: 'int'},
{name: 'Latitude', type: 'float'},
{name: 'Longitude', type: 'float'},
{name: 'DateTime', type: 'date'},
{name: 'MainID', type: 'int'},
{name: 'IOState', type: 'int'},
{name: 'OilState', type: 'int'}]
});
var MarkerStore = Ext.create('Ext.data.JsonStore', {
model: 'GoogleMarkerModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-googlemarker.php',
baseParams: { //here you can define params you want to be sent on each request from this store
mainid: 'value1'
},
reader: {
type: 'json',
idProperty:'MainID',
}
}
});
this code i use to call the MarkerStore and passing the parameter mainid with value 1
MarkerStore.load({
params: { //here you can define params on 'per request' basis
mainid: 1,
}
})
when i use web browser to get-googlemarker.php and mainid=1 will return those value
http://localhost/GPS/examples/tabs/get-googlemarker.php?mainid=1
[{"ID":"1808","Locating":"1","MainPower":"0","Acc":"1","PowerOff":"1","Alarm":"128","Speed":"0","Direction":"293","Latitude":"5.391788482666016","Longitude":"100.29693603515625","DateTime":"2013-02-19 15:44:36","MainID":"1","IOState":"0","OilState":"0"}]
but i m trying to list out all data,unfortunately the JSON store are null, i suspect the data are not store in the MarkerStore, below code are i m trying to list out the data,but is nothing write on console FireBug.
MarkerStore.each( function (model) {
console.log( model.get('MainID') );
});
any idea?

Try to remove autoload = true property from the store.

MarkerStore.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(records[i].get('Latitude'));
lati = records[i].get('Latitude');
};
});
should use this code, then will print the data on console. the above question print store data code are wrong,actually data are success saved in JSON store

Your code works, but the main problem is when you call MarkerStore.each the store is empty at this time(Ajax is Asynchronous). Your script is faster as the ajax with the data. If you use the following simple snippet you will see your "mainID".
setTimeout(function(){
MarkerStore.each( function (model) {
console.log( model.get('MainID') );
});
}, 1500, MarkerStore);

Related

Sencha touch json saving in raw instead of data

I have the following JSON
{"pic":[{"id":"10","title":"Perro","descripcion":"Un lindo perrito","puntos":"300","ext":"jpeg","image_time":"2014-07-28 03:58:31","data":"","URL":"pug.jpeg"},{"id":"12","title":"Pugs","descripcion":"\u00danete a la fuerza","puntos":"123","ext":"jpeg","image_time":"2014-07-30 07:05:42","data":"","URL":"image.jpg"},{"id":"14","title":"burro","descripcion":"lindo burro","puntos":"678","ext":"png","image_time":"2014-07-30 16:25:44","data":"","URL":"1456105_475563429219279_7985916_n.png"}]}
And the following model:
Ext.define('hptest2.model.pic', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'URL', type: 'String'},
{name: 'puntos', type: 'int'},
{name: 'title', type: 'String'},
{name: 'descripcion', type: 'String'},
{name: 'data', type: 'String'},
{name: 'ext', type: 'String'},
{name: 'image_time', type: 'String'},
]
}
});
And its store:
Ext.define('hptest2.store.pic', {
extend: 'Ext.data.Store',
config: {
model: 'hptest2.model.pic',
proxy: {
type: 'ajax',
url: 'data/pic.php'
},
reader: {
type: 'json',
rootProperty: 'pic'
}
}
});
But when I use a tpl on a view... I just can't access the data from the store
View:
{
title: 'Promociones',
iconCls: 'star',
items: [
{
xtype: 'panel',
store : 'pic',
tpl:new Ext.XTemplate('<div>{URL} with {puntos}</div>'),
}
]
}
The data is stored in raw but not in data
At console with Ext.getStore('pic') in data -> all -> data ... all my columns from my model appear as follow:
data: Object
URL: null
data: null
descripcion: null
ext: null
id: "ext-record-6"
image_time: null
puntos: null
title: null
but in data -> all -> data -> raw I am able to visualise all data that I wished I could access through my view
pic: Array[3]
0: Object
URL: "pug.jpeg"
data: ""
descripcion: "Un lindo perrito"
ext: "jpeg"
id: "10"
image_time: "2014-07-28 03:58:31"
puntos: "300"
title: "Perro"
__proto__: Object
1: Object
2: Object

Laoding JSON data into Ext.data.Tree store on click on a button

I have created a tree panel in ExtJs 4.1 and that panel is associated with store. I have some JSON data available in a variable. How can I load that into into tree store on click of a button.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
});
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.TreeStore', {
autoLoad: false,
model: 'User',
proxy: {
type: 'memory',
}
});
How can I load data on click of a button?
var store = Ext.create('Ext.data.TreeStore', {
model: yourModel, // make sure the model fits
proxy: {
data : yourData, // this is your var with json
type: 'memory',
reader: {
type: 'json'
}
},
});
Check out the answers over here: Load static data to Ext.data.TreeStore
To run your code on a button click, do:
Ext.create('Ext.Button', {
text: 'Click me',
handler: function() {
// load the store
}
});
Try store.data = data, It appears that there is no methods like 'setData', just try store.data = data maybe it will work
you can use store.loadData method on buttons click. Check doc here.

2 functions in a store

I have the following code, in the field value, is there a way that I can have 1 more function there beside removeEmptyString function?
var input1store = new Ext.data.Store({
fields: [{name: 'name', convert:removeEmptyString}],
proxy:{
type: 'ajax',
url: 'www.requesturl.com?format=json&source1',
reader: {
type: 'json',
root: 'xml.result'
}
},
autoLoad:false,
sorters: [{property: 'name', direction: 'asc'}]
});
To make it clear, I want 1 more function in the following code:
fields: [{name: 'name', convert:removeEmptyString}],
Can't you just create a function that will do both?
{
name: 'name',
convert: function(v){
return myOtherFn(removeEmptyString(v));
}
}

Cannot get store record field value in Sencha Touch

When I attempt to find a record in an ArrayStore using Sencha Touch 2, no records are returned.
store.findExact('Symbol', 'GOOG')
returns -1.
As shown in the screenshot below,
store.getRange()
returns 44 records, and
store.first()
returns a record, but
store.first().get('Ask')
returns undefined.
Additionally, when I do
store.getAt(1).getData()
I get an object only containing the field 'id: "ext-record-2"'.
Why can I not retrieve records using store.findExact(), and why does record.get('column') return undefined?
Found the problem...
I was trying to reuse a model across ExtJS and Sencha Touch applications. Sencha Touch expects "fields" to be defined inside "config," whereas ExtJS does not.
ExtJS:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
});
Sencha Touch:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
}
});
A workaround:
var myModelConfig = {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
}
};
myModelConfig.fields = myModelConfig.config.fields;
Ext.define('MyModel', myModelConfig);

Passing an array from EXTJS to PHP by URL

I have a checkbox grid panel in ExtJS which I want to post selected rows to a PHP function.
When an user click the button, the selected rows should be send to php then php get this rows by $_REQUEST as a parameter.
Could anybody point me right direction to post an array and decode in PHP?
The Model :
Ext.define('LabelModel', {
extend: 'Ext.data.Model',
fields:
[
{name: 'LABEL_ID', type: 'int'},
{name: 'STORE_NO', type: 'int'},
{name: 'DNR_NO', type: 'int'},
{name: 'DNR_DESCRIPTION', type: 'string'},
{name: 'DEPARTMENT', type: 'int'},
{name: 'ARTICLE_NO', type: 'int'},
{name: 'SUBSYS_ARTICLE_NO', type: 'int'},
{name: 'ARTICLE_DESCRIPTION', type: 'string'},
{name: 'ARTICLE_TYPE', convert: checkType},
{name: 'START_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'END_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'PRODUCT_PRICE', type: 'float'},
{name: 'UNIT_PRICE', type: 'float'},
{name: 'SHELF_PRICE', type: 'float'},
{name: 'LABEL_TEXT', type: 'string'},
{name: 'STATUS', type: 'string'},
{name: 'COLLI_CONTENT', type: 'int'},
{name: 'ACTUAL_STOCK', type: 'int'},
{name: 'PWHG', type: 'int'},
{name: 'PWG', type: 'int'},
{name: 'MP_NO', type: 'int', convert: checkType},
{name: 'INVOICE_TEXT', type: 'string', convert: checkType},
{name: 'LABEL_TYPE', type: 'string'},
{name: 'LABEL_SIGN', type: 'string', convert: checkType}
]
});
The Store :
var labels = Ext.create('Ext.data.JsonStore', {
model: 'LabelModel',
successProperty: 'success',
proxy: {
type: 'ajax',
url: 'lib/db/get-label-list.php',
timeout: 120000,
reader: {
type: 'json',
root: 'labelList',
idProperty: 'LABEL_ID'
}
}
});
Button Handler :
xtype: 'button',
width: 90,
text: 'GÖNDER',
cls: 'x-btn-gonder',
handler: function(){
var ppt = Ext.getCmp('labelType').getValue();
var sb = Ext.getCmp('basic-statusbar');
var count = Ext.getCmp('labelGrids').getSelectionModel().getCount();
var rows = Ext.getCmp('labelGrids').getSelectionModel().getSelection();
var cmb = Ext.getCmp('labelType');
if(ppt == null) {
dialog.show();
} else {
if(count > 0) {
for (var i = 0; i < count; i++)
{
console.log(rows[i].data.LABEL_TYPE, rows[i].data.LABEL_ID);
cmb.reset(); // clear combobox selected value after send to printer
}
// set statusbar text after print
sb.setStatus({
text: 'Etiketler yazıcıya gönderildi..!',
iconCls: 'x-status-saved',
clear: true
});
// remove checked items
Ext.select('.x-grid-row-selected').each(function (element) {
Ext.getCmp('labelGrids').getSelectionModel().deselectAll();
});
} else if(count == 0) {
sb.setStatus({
iconCls: 'x-status-error',
text: 'Lütfen yazdırmak istediğiniz etiketleri seçiniz!'
});
}
winPaper.hide();
}
}

Categories

Resources