Develop Reference

How load data from mySQL to JSON in EXTJS

I create file in my store folder, i want load my data from mySQL to JSon, so this is my code:
Ext.define('DWP3.store.konten.Coba', {
extend: 'Ext.data.Store',
alias: 'store.coba',
uses: [
'Ext.data.Store'
],
initComponent: function(){
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'periode'},
{name: 'Teknik Informatika S1'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load2.php',
reader: {
type: 'json',
rootProperty: 'view_aktif'
}
},
autoLoad: true
});
}
});
how can i load the data from store?
Can You Help me Please.

It seems better to me declared this way :
Ext.define('DWP3.store.konten.Coba', {
extend: 'Ext.data.Store',
alias: 'store.coba',
fields: [
{name: 'periode'},
{name: 'Teknik Informatika S1'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load2.php',
reader: {
type: 'json',
rootProperty: 'view_aktif'
},
autoLoad: true
});

Extjs : url in store

here is my store
Gave the url : '/rest/helloworld/submit',
var store = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['name', 'date', 'email'],
pageSize: 10, // items per page
proxy: {
method: 'GET',
url: '/rest/helloworld/submit',
disableCaching: false,
type: 'json',
root: 'result',
totalProperty: 'total'
}
});
But as i can see in the console of browser.
request for url is like : Request URL:http://localhost:8080/JAXRS-HelloWorld/proxy/json.js?_dc=1428776089867
Also i added disableCaching : false
but it still shows _dc=1428776089867
Please help

Try using the ajax proxy and the noCache property:
var store = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['name', 'date', 'email'],
pageSize: 10, // items per page
proxy: {
method: 'GET',
url: '/rest/helloworld/submit',
noCache: false,
type: 'ajax',
root: 'result',
totalProperty: 'total'
}
});

extjs 5 associations between two models

There are two model and connected stores: user and orders in frontend. There are two api calls in backend: getOrder(orderId), and getOrders().
In 'order store' I specified proxy settings for getOrders(). In 'order model' I specified proxy for getOrder(orderId).
When I call user's load method to get associated orders in this case uses model's proxy. Why not use proxy from store? Why it is not using.
P.S.: relation between user and order is descripted in backend and depends on authentication params of user.
User model code
Ext.define('Dev.models.User', {
extend: 'Ext.data.Model',
requires: ['Dev.stores.Orders'],
fields: [
//data
{name: "name", type: "string"},
{name: "userId", type: "string"}
],
proxy: {
type: 'ajax',
url: '/tcc/getmember',
idParam: 'memberId',
reader: {
type: 'json',
idProperty : 'memberId'
}
},
hasMany: {
model: 'Dev.models.Order',
name: 'orders',
storeConfig: {
type: 'orders',
filters: []
}
}
});
Order model code
Ext.define('Dev.models.Order', {
extend: 'Ext.data.Model',
idProperty : 'orderId',
fields: [
{name: "orderId", type: "string"},
{name: "title", type: "string"},
{name: "createMember", type: "string"}
],
proxy: {
type: 'ajax',
api: {
create: '/tcc/setorder',
read: '/tcc/getorder',
update: '/tcc/setorder',
destroy: '/tcc/deleteorder'
},
idParam : 'orderId',
reader: {
type: 'json',
idProperty : 'orderId'
}
},
belongsTo: {
model: "Dev.models.User",
name: 'user',
getterName: 'getUser',
foreignKey: 'userId',
primaryKey: 'createMember'
}
});
Order store code
Ext.define('Dev.stores.Orders', {
extend: 'Ext.data.Store',
model : 'Dev.models.Order',
alias: 'store.orders',
proxy : {
type : 'ajax',
api: {
create: '/tcc/setorder',
read: '/tcc/getorders',
update: '/tcc/setorder',
destroy: '/tcc/deleteorder'
},
reader : {
root: 'orders',
type : 'json',
idProperty : 'orderId'
}
}
});
Sample of usage
function doMemberOne(userId) {
Dev.models.User.load(userId, {
success: function(record, operation) {
console.log("User model was loaded successfully");
doOrders(record.orders());
},
failure: function(record, operation) {
console.log("User model was loaded unsuccessfully");
}
});
}
function doOrders(orderStore) {
orderStore.load({
callback: function(records, operation, success) {
if (success) {
console.log("Orders was loaded successfully");
} else {
console.log("Orders was loaded unsuccessfully");
}
}
});
}
Ext.onReady(function() {
Dev.Authentication.login("admin", "adminpass", "adminorg");
Dev.Authentication.on('login', function(resp) {
console.log("Login is successful.");
doMemberOne(resp.accountid);
});
});

Store create works, store define not

I got a store for messages and it worked fine.
Now I need the same store, but with different initialization so I wanted to reuse it.
Before:
Ext.create('Ext.data.JsonStore', {
model: 'my.MessageModel',
storeId: 'importantStore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'ajax/ajAsProof.php',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'messages',
idProperty: 'id'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
encode: true,
root: 'messages'
}
},
...
}
Ext.define('my.MessagesGrid', {
extend: 'Ext.grid.Panel',
store: 'myGrid',
...
}
Ext.create('my.MessageGrid', {
store:'importantStore',
renderTo: 'myGridId'
});
After:
Ext.define('my.ImportantStore', {
extend: 'Ext.data.JsonStore',
model: 'my.MessageModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'ajax/ajAsProof.php',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'messages',
idProperty: 'id'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
encode: true,
root: 'messages'
}
},
...
}
Ext.define('my.MessagesGrid', {
extend: 'Ext.grid.Panel',
store: 'myGrid',
...
}
var importantStore = Ext.create('my.ImportantStore', {
storeId: 'importantStore',
... // my custom settings to come here, like filters or parameters
});
Ext.create('my.MessageGrid', {
store:'importantStore',
renderTo: 'myGridId'
});
This fails. Firefox/Firebug gives me a
TypeError: url is undefined ext-all-debug.js (line 14429)
this.$cache = dom.id ? Ext.cache[dom.id] : null;
All defined in the same js file within the Ext.ready() call. ExtJS 4.2.1.883 used.
Any ideas on what's wrong? Doing the same to make the grid reusable works fine, but fails with the store.

"url is undefined"
Are you actually putting some value to url config on your store ?
Ext.define('my.ImportantStore', {
extend: 'Ext.data.JsonStore',
model: 'my.MessageModel',
autoLoad: true,
url: '../myServletOrRestService' // do you have this config ?
...
}

After days of looking for a reply I got the solution, mostly by coincidence... coming from C# background I wasn't aware of the prototypean horrors that comes with ExtJS and JavaScript.
Ext.define('my.ImportantStore', {
extend: 'Ext.data.JsonStore',
model: 'my.MessageModel',
autoLoad: true,
constructor: function(config) {
config = config || {};
this.initConfig(config);
this.proxy = Ext.create('Ext.data.proxy.Ajax', {
extraParams: config.extraParams
// other config
});
...
this.callParent(arguments);
}
});
Ext.create('my.ImportantStore', {
storeId: 'importantStore',
extraParams: {
...
}
});
If the components (in this case the proxy) isn't created within the container, when using Ext.define the proxy (or settings for that case) will be shared above all instances, which is counter intuitive for people who were familiar with OOP programming and class inheritance and never worked with prototype styled inheritance which works via cloning.

loading data to store but no data visible in grid

So I load json to the store but no data visible in grid. What am I doing wrong? Here is the grid:
{
xtype: 'gridpanel',
title: 'Clients List',
store: Ext.create('Ext.data.Store', {
model: 'app.model.modelClients',
proxy: Ext.create('Ext.data.HttpProxy', {
type: 'ajax',
headers: { 'Accept': 'application/json' },
url: 'client.php',
noCache: false,
startParam: undefined,
filterParam: undefined,
limitParam: undefined,
pageParam: undefined
}),
reader: new Ext.data.JsonReader({
root: 'records',
id: 'id',
fields: ['first_name', 'last_name', 'phone']
}),
listeners: {
load: function (self, records, successful, eOpts) {
var fields = records[0].fields;
console.log(fields.getAt(0));
}
},
autoLoad: true
}),
flex: '1',
columns: [
{ text: 'Name', dataIndex: 'first_name' },
{ text: 'Last Name', dataIndex: 'last_name' },
{ text: 'Phone', dataIndex: 'phone' }
]
}

ah. you have the reader at the wrong level. It is part of the proxy
proxy: {
type: "ajax",
url: "...",
reader: {