Extjs variable in proxy api store using crud - php

I would put a variable in my proxy api store (using crud) but it not work.
The api config is an object , could you use a variable in object in javascript ?
I use Sencha Architect and he format api...
Do you have a suggest ?
My base store :
Ext.define('ModuleGestion.store.Pays', {
extend: 'Ext.data.Store',
requires: [
'ModuleGestion.model.Pays'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'ModuleGestion.model.Pays',
storeId: 'StorePays',
proxy: {
type: 'ajax',
api: {
create: 'http://visual04/ModuleGestion/php/Pays.php?action=create',
read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'http://visual04/ModuleGestion/php/Pays.php?action=update',
destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});
My model with variable in api proxy
var Url = 'http://visual04/ModuleGestion/php/';
var UrlPays = Url+'Pays.php';
Ext.define('ModuleGestion.store.Pays', {
extend: 'Ext.data.Store',
requires: [
'ModuleGestion.model.Pays'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'ModuleGestion.model.Pays',
storeId: 'StorePays',
proxy: {
type: 'ajax',
api: '{\r\n create: UrlPays+'action=create',\r\n read: UrlPays+'action=read',\r\n update: UrlPays+'action=update',\r\n destroy: UrlPays+'action=destroy'\r\n}',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});

You can use the UrlPays anywhere in your file, since you declared it in the global scope (i.e. outside of any function).
That should work if you fix this line:
api: '{\r\n create: UrlPays+'action=create',\r\n read: UrlPays+'action=read',\r\n update: UrlPays+'action=update',\r\n destroy: UrlPays+'action=destroy'\r\n}',
like this:
api: {
create: UrlPays + 'action=create',
read: UrlPays + 'action=read',
update: UrlPays + 'action=update',
destroy: UrlPays + 'action=destroy'
},
See the difference in the syntax highlighter?

Related

extjs6: how to display the json object records that are generated via jsonstore/proxy reader

var store = Ext.create('Ext.data.JsonStore', {
storeId:'thisstore',
proxy: {
type: 'ajax',
url: 'Stores/ShowModule/showGrid.php',
simpleSortMode: true,
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
},
fields: [a,b,c,d],
autoLoad: true
});
I am pretty newbie to extjs 6, and I got this jsonstore that would retrieve the data from the php output using proxy reader. I wonder how to print out the entire json object obtained from this jsonstore into console.log, as to verify if that's exactly the json structure I want.
Many thanks in advance.
In ExtJS 6 , after the store is loaded , you can print records in the console as :
console.log(store.getData());
Use Listeners in Store Config
var store = Ext.create('Ext.data.JsonStore', {
storeId:'thisstore',
fields: [a,b,c,d],
autoLoad: true,
config : {
proxy: {
type: 'ajax',
url: 'Stores/ShowModule/showGrid.php',
simpleSortMode: true,
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
},
listeners:{
load:function(store){
console.log(store.getData());
}
}
}
});

Extjs 4 store sync issue

I have the following code:
The Store :
Ext.define('strClientesRECO', {
extend: 'Ext.data.Store',
model: 'mdlClientesRECO',
autoLoad: false,
proxy: {
type: 'ajax',
pageParam: undefined,
startParam: undefined,
limitParam: undefined,
api: {
read: 'some url',
create: 'some url',
update: 'some url',
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
root: 'records',
encode: true,
writeAllFields: false
}
}
});
The grid has the following properties:
selModel: Ext.create('Ext.selection.CheckboxModel'),
selType: 'cellmodel',
plugins: [{
ptype: 'cellediting',
clicksToEdit: 2
}],
In the controller I have a listener to sync the store every cell update
Ext.ComponentQuery.query('viewGridClientesRECO')[0].getStore().addListener('update', this.onUpdateRecords, this);
onUpdateRecords: function() {
var storeGridClientes = Ext.ComponentQuery.query('viewGridClientesRECO')[0].getStore();
storeGridClientes.sync();
},
But in the PHP file that is executed when I update, if I print $_POST the records sends are correct, but it never sends the id of the edited row.

Extjs Don't load Grid. PHP

Somebody would helpme with this code:Grid dont load infomations.
Below is the code I'm using, but the grid carries no information.
Extjs
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country',
idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
Ext.create('Ext.grid.Panel', {
title: 'Retorno',
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
store:store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Area', dataIndex: 'area', flex: 1 }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
data.php here is the code with json code.
<?php
print '{
"total": 10,
"country": [
{
"name": "CULTIV",
"area": "6.96120082466223e-007"
},
{
"name": "asdASdasd",
"area": "123123123"
}
]
}';
?>
I think you need to set the store's autoLoad configuration to true. If you do not set this attribute, then you will need to call the load() method of the store.
Option 1
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
autoLoad:true,
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country'
//idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
Option 2
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country'
//idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
store.load();
I created a working fiddle for a demonstration.

Access uploaded file in JSON encoded data

I've encoded my form data into JSON. This has been achieved by the following ExtJS store configuration:
Ext.define('XXX.store.Registration', {
extend: 'Ext.data.Store',
model: 'XXX.model.Registration',
autoLoad: true,
pageSize: 15,
autoLoad: {
start: 0,
limit: 15
},
proxy: {
type: 'ajax',
api: {
create: './server/registration/create.php',
read: './server/registration/get.php',
update: './server/registration/update.php',
destroy: './server/registration/destroy.php'
},
reader: {
type: 'json',
root: 'registrations',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'registrations'
}
}
});
My server side code has been implemented in PHP. I can access the encoded form fields by using the field name as a key, as exemplified below:
$reg = $_REQUEST['registrations'];
$data = json_decode(stripslashes($reg));
$registerNum = $data->registerNum;
$folioNum = $data->folioNum;
One of the fields in my form is a fileuploadfield. How can I access the uploaded file from the uploaded JSON. Any assistance will be highly appreciated.

Sencha Touch and PHP Webservice

I'm currently learning sencha touch and as a test i wrote a little webservice and i want to display the resulting items in a list
But i can't get it to work...
Ext.define('GS.view.ListTest', {
extend: 'Ext.navigation.View',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
xtype:'listpanel',
config: {
title: 'Fifa List',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{Player1}',
store: {
autoLoad: true,
fields: ['MatchID','Player1', 'ScorePlayer1' ,'ScorePlayer2','Player2'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
}
}
}
}
});
I check and my json is valid ...
All it says in the console is Uncaught SyntaxError: Unexpected token :
try this
items: {
xtype: 'list',
itemTpl: '{match.Player1}',
store:new Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['match'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
})
}
}
Try something like this instead :
items: {
xtype: 'list',
itemTpl: '{match.Player1}',
store: {
autoLoad: true,
fields: ['match'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
}
}
}
Hope this helps
Looking at your webservice response I notice that it does not wrap the JSON answer in a function call like JSONP would require. You need to return an item like this:
Ext.data.JsonP.callback1({});
Where the argument of the function must be your actual JSON data instead of an empty object, and the name of the function "Ext.data.JsonP.callback1" is passed to your webservice as parameter named "callback" by the Ext Store.
You can however customize that parameter's name with callbackKey on the proxy:
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
url : 'http://domainB.com/users',
callbackKey: 'theCallbackFunction' // <--
}
});
For more detailed information on JSONP and how to implement it for an Ext Js Store you could refer to http://en.wikipedia.org/wiki/JSONP
and http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP

Categories