I have a grid with store, and I want to load on render or click a button, but when I try to load the grid, got an url is undefined error. I need to use Ext direct, so no url. What should I do?
Ext.define('My.view.Grid' ,{
extend: 'Ext.grid.Panel',
//...
store: 'MyStore',
//...
}
Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.JsonStore',
//...
model: 'My.model.MyModel',
proxy: {
type: 'direct',
directFn: Ext.direct.Class.function,
paramOrder: ['start', 'limit', 'sort', 'active'],
reader: {
type: 'json',
root: "data",
idProperty: 'id',
totalProperty: "all"
},
extraParams: {
active: 1
}
},
remoteSort: true,
sorters: ['name']
//...
Extend your store from Ext.data.Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.Store',
// ...
});
If you see the source code of Ext.data.JsonStore, you will see that there is predefined an ajax proxy:
constructor: function(config) {
config = Ext.apply({
proxy: {
type : 'ajax',
reader: 'json',
writer: 'json'
}
}, config);
this.callParent([config]);
}
Related
I have the below code that I am trying to get the list of dates using Ajax and display those on the page as links to elsewhere. So each entry would be a link that when you click would take you elsewhere. Though the treelist is not loading any items...
Data
{
"success": true,
"data": [
"2018-10-08T00:00:00",
"2018-10-05T00:00:00",
"2018-10-04T00:00:00",
"2018-10-03T00:00:00",
]
}
Code
Ext.define('...', {
extend: 'Ext.form.Panel',
xtype: '...',
requires: [
'...'
],
layout: 'border',
items: [{
xtype: 'container',
store: {
proxy: {
type: 'ajax',
url: '...',
useDefaultXhrHeader: true,
withCredentials: true,
reader: {
type: 'json',
rootProperty: 'data'
},
}
}
}]
});
You can display a grid with your data. It can show clickable links.
To do this you need to make a grid with your ajax store and a grid renderer like this:
// Ajax store
Ext.create('Ext.data.Store', {
storeId: 'mystore',
autoLoad: true,
proxy: {
type : 'ajax',
url : '/file.php',
actionMethods: {
read: 'POST'
},
reader : {
type: 'json'
},
extraParams : {
key : 'val'
},
fields : [
{name: 'date', type: 'string'}
]
}
})
// Grid
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
columns: [
{
text: 'link column',
dataIndex:'link',
renderer: function(value) {
if(value) {
// here you can format your output
return ''+value+'';
}
}
}
]
})
Please look whole example in a Fiddle
I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
How can I access custom root property from the store like built in properties such as idProperty, totalProperty, messageProperty etc. Please check the code for ref.
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count',
myCustomproperty: 'fieldInJson' // Somewhat like this
},
filterParam: 'query'
}
});
update: also I could be able to access the property via store
The jsonData object is available from the proxy.reader. You could access this data in the store load event by adding listener:
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count'
},
filterParam: 'query'
},
listeners: {
load: function (store,records,successful,eOpts) {
//older
console.log(store.proxy.reader.jsonData);
//4.2
console.log(store.getProxy().getReader().jsonData);
}
}
});
am new to Sencha Touch. I tried to consume web service but its keeps saying "Unable to load data using the supplied configuration.Open in Browser". My store is
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://api.twitter.com/1/statuses/public_timeline.json',
reader: {
type: 'json',
rootProperty: 'errors'
}
}
}
});
and my model is
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'message'
},
{
name: 'code'
}
]
}
});
Thanks for your help in advance.
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
/*url: 'http://api.twitter.com/1/statuses/public_timeline.json',*/Url not valid
reader: {
type: 'json',
rootProperty: 'errors'
}
}
}
});
I am trying to centralize my configuration of EXTJS stores within my application, however, I cannot seem to figure out how to make this happen. I am using ExtJS 4.1.
I have a base store, which I want to hold all of the repetitive configuration stuff, and then my more specific stores to hold what's actually different.
Ext.define('My.store.Abstract', {
extend: 'Ext.data.Store',
autoload:false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false
},
simpleSortMode: true
}
});
Then I would like to provide the store specific stuff on a store by store basis --
Ext.define('My.store.Products', {
extend: 'My.store.Abstract',
storeId: 'Products',
model: 'My.model.Product',
proxy: {
api: {
create: '/myurl/create',
read: '/myurl/index',
update: '/myurl/update',
destroy: '/myurl/delete'
}
}
});
What I am finding is that it just doesnt behave at all. I believe it has something to do with the proxy, but I just can't track it down.
What is the correct way to do this? I would prefer not to replicate the same configuration stuff (from my abstract store) across the 350+ stores in my application. As of now, that it what I have, and I thought I was trying to implement a pretty basic concept .. to no avail.
I know things are not working, as basic as the pageSize, or even the autoLoad .. because they are not being respected at all.
I've played around with constructors, and calling the parent.
Any help would be greatly appreciated.
You can't do it that way because you're expecting to to merge the objects which it just won't do.
Instead, you'll want to look at something like this (untested):
Ext.define('Base', {
extend: 'Ext.data.Store',
autoLoad: false,
constructor: function(config) {
// applyIf means only copy if it doesn't exist
Ext.applyIf(config, {
proxy: this.createProxy()
});
this.callParent([config]);
},
createProxy: function() {
return {
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false
},
simpleSortMode: true
}
}
});
Ext.define('Sub', {
extend: 'Base',
createProxy: function(){
var proxy = this.callParent();
proxy.api = {
create: 'create',
update: 'update'
};
return proxy;
}
});
Here is another way:
Base store (app/store/Base.js):
Ext.define('Admin3.store.Base', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true
});
Base proxy (app/proxy/Base.js):
Ext.define('Admin3.proxy.Base', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.base',
reader: {
type: 'json',
root: 'items',
successProperty: 'success',
messageProperty: 'message'
},
listeners: {
exception: function(proxy, response, operation){
console.log(response, operation);
Ext.Msg.show({
title: 'Remote Exception',
msg: typeof operation.getError() === 'string' ? operation.getError() : operation.getError().statusText,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
}
});
Concrete store (app/store/Users.js):
Ext.define('Admin3.store.Users', {
extend: 'Admin3.store.Base',
model: 'Admin3.model.User',
proxy: Ext.create('Admin3.proxy.Base', {
api: {
read: 'data/read.php',
update: 'data/update.php'
}
})
});
I think the other answers here might be a bit more complicated than they need to be. As of version 4.0.0, ExtJS has an Ext.Object.merge() method that will allow an approach very close to what the asker was attempting.
Using the values that the asker has, I'd define my "abstract" store like this:
Ext.define("Ext.ux.data.Store", {
extend: "Ext.data.Store",
constructor: function(config) {
var defaults = {
autoload: false,
proxy: {
type: "ajax",
reader: {
type: "json",
root: "data",
totalProperty: "total",
successProperty: "success",
messageProperty: "message"
},
writer: {
type: "json",
encode: true,
writeAllFields: true,
root: "data",
allowSingle: false
},
simpleSortMode: true
}
};
this.callParent([Ext.Object.merge({}, defaults, config)]);
}
});
I'd then create my concrete stores like this:
Ext.create("Ext.ux.data.Store", {
storeId: "ExampleStore",
model: "ExampleModel",
autoLoad: true, // This overrides the defaults
proxy: {
api: {
read: "/example/read" // This overrides the defaults
}
}
});
This approach will also work for multiple levels of components. You could, for instance, model a read-only store:
Ext.define("Ext.ux.data.ReadonlyStore", {
extend: "Ext.ux.data.Store",
constructor: function(config) {
var overrides = {
proxy: {
api: {
create: undefined,
update: undefined,
destroy: undefined
}
}
}
this.callParent([Ext.Object.merge({}, config, overrides)]); // Note that the order of parameters changes here
}
});