We Keep Coding

How to set load store in Buffered grid

I have a grid store where I am using Ext.data.Store and loading the value. below is the method where I am giving a post requesting, getting the data and loading by using store.on(load).
myGridStore: function(myXml) {
var me = this,store;
me.setLoading(true);
store = new Ext.data.Store({
proxy: new Ext.data.proxy.Ajax({
actionMethods: {
read: 'POST'
},
url: 'someUrl',
headers: {
'Accept': 'text/xml; charset=utf-8'
},
reader: {
type: 'xml',
record: 'I',
rootProperty: 'R'
},
extraParams: {
strIPXML: myXml
}
}),
sortOnLoad : true,
autoLoad: true,
remoteFilter: false,
multiSelect: true,
fields: me.fields,
});
store.on('load', function(thistore, records , successful , operation , eOpts){
me.store.loadData(thistore.data.items);
});
return store;
},
now I want my store to bufferedStore so for that I changed Ext.data.Store to Ext.data.BufferedStore But in bufferedStore I can not use store.on(load) Like I commented the code, below is the code and then grid is loading. But when second time I am applying the myXml I am not able to set the data because store.on(load) is not working.
myGridStore: function(myXml) {
var me = this,store;
me.setLoading(true);
store = new Ext.data.Store({
pageSize: 100,
leadingBufferZone: 100,
proxy: new Ext.data.proxy.Ajax({
actionMethods: {
read: 'POST'
},
url: 'someUrl',
headers: {
'Accept': 'text/xml; charset=utf-8'
},
reader: {
type: 'xml',
record: 'I',
rootProperty: 'R'
},
extraParams: {
strIPXML: myXml
}
}),
sortOnLoad : true,
autoLoad: true,
remoteFilter: true,
fields: me.fields,
});
/*store.on('load', function(thistore, records , successful , operation , eOpts){
me.store.loadData(thistore.data.items);
});*/
return store;
},
Can anyone help me how to make it work. How to set the data in bufferedStore which i can easily able to set in Ext.data.store
Error : LoadData may not be used on a buffered store - the store is a map of remote data

The ExtJS documentation for the store.load event says:
Note: If you are using a buffered store, you should use prefetch.
Have you tried moving your function to the prefetch event to see if that works for you?
...
store.on('prefetch', function(...

how load data from Json to Json in Extjs

in my case, i want, if click the button "drilldown" chart load new data from another Json. This is my Store
Ext.define('DWP3.store.konten.Coba', {
extend: 'Ext.data.Store',
alias: 'store.coba',
storeId: 'coba',
uses: [
'Ext.data.Store'
],
fields: [
{name: 'periode'},
{name: 'Teknik'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load2.php',
reader: {
type: 'json',
rootProperty: 'view_sum1'
}
},
autoLoad: true,
});
}
i want load the new data also from json which converted from mySQL. i want load this one :
newData : function(){
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'periode'},
{name: 'prodi'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load3.php', //from another load in php
reader: {
type: 'json',
rootProperty: 'view_sum2' // another root
}
},
autoLoad: true,
});
return store;
}
i call the function like this in my chart.js:
{
text:'Test',
handler:function(){
this.down('cartesian').getStore().newData();
}
}
in this case i want if click the button my store load new data but from another Json which converted from mySQL. it is possible to do that?or do you have any solution from my case?

I would advice you to declare your 2nd store the same way you did with the first one. And simply load it inside the handler of your drilldown :
handler : function() {
Ext.getStore('your new store ID').load();
}
But I'm not really sure what you really want, your question isn't clear to me.

Extjs Paging with additional Parameter

I'am working on a ExtJS 4.2 Project, where i want to use a Paging Toolbar to navigate through Images.
When i open the Window, all Images are correct, but when i click on the next button to see the next Images, the result is empty. Its because the Parameter Id isn't passed to the backend System.
I saw in other Threads an option like baseParams but they are not in the documentation and don't work.
//My Store Class
Ext.define('App.store.Images', {
extend: 'Ext.data.Store',
model: 'App.model.Images',
autoLoad: false,
autoSync: false,
storeId: 'Images',
pageSize: 8,
proxy: {
type: 'ajax',
url: '/getImages',
reader: {
type: 'json',
root: 'images',
totalProperty: 'total'
}
}
});
// This code is execute when i open the Window
var imagesStore = Ext.StoreManager.get('Images');
imagesStore.on('load', buildContent);
imagesStore.load({
params: {
id: record.get('id'),
start: 0,
limit: 8
}
});
Where can be additional Parameter be defined?

In fact you can define extraParams on the store proxy. You can do this just before the load method call :
Ext.apply(store.getProxy().extraParams, {
'yourId': yourId
});
or in your proxy config :
proxy: {
type: 'ajax',
url: '/getImages',
reader: {
type: 'json',
root: 'images',
totalProperty: 'total'
}
extraParams: {
'yourId': yourId
}
}

Backbone + kendoGrid, PUT not working

I'm trying to integrate kendoGrid on a Backbone View, this is my view code:
App.Views.UsersManager = Backbone.View.extend({
tagName: 'section',
id: 'users-manager',
className: 'tile',
template: Handlebars.compile($('#profile-usersManager-template').html()),
render: function () {
console.log('usersManager.render -> collection', this.collection);
var self = this;
this.$el.html(this.template());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/users',
type: 'GET',
dataType: 'json'
},
update: {
url: '/users',
type: 'PUT',
dataType: 'json'
}
},
schema: {
data: 'data'
},
batch: true
});
this.$('table.users-manager').kendoGrid({
scrollable: false,
sortable: true,
dataSource: dataSource,
toolbar: ["save"],
editable: true,
navigatable: true,
// filterable: true,
});
return this;
}
});
The view render correctly, and the kendoGrid correctly GET my users data from my SlimPHP framework, but when i try to modify an element of the grid and hit the "Save Changes" button provided by "toolbar: ["save"]", nothing happens, even on my firebug console... there's no server communication at all.
I'm new on kendo (and Backbone also) development, maybe i'm failing something on the syntax? :stuck:
Update after Atanas Korchev answer
this is my DataSource updated:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/users',
type: 'GET',
dataType: 'json'
},
update: {
url: '/users',
type: 'PUT',
dataType: 'json'
}
},
schema: {
data: 'data',
model: {
id: 'id',
fields: {
email: {},
name: {},
surname: {},
rank: {},
type: {}
}
}
},
batch: true
});
That not solve my issue, i wanna notice that my php code look like that actually:
$app->put('/users', function () use ($app, $db) {
exit('put ok');
});
Just to see if the client/server communication works... I know it will be an error, but I can't see any firebug error too, like the "Save Changes" button has no event... (I will try the Dennis Rongo suggestion.. but I dont think is the solution...)
Sorry for my bad english

Try describing your model in the DataSource settings:
schema: {
data: 'data',
model: {
id: "MyId"
}
}
You need to at least specify the id.

Solved by removing the data: 'data' from the schema object, there's the link kendoGrid batch editing!

How to set param of store.proxy

var gridStore = Ext.create('Ext.data.Store', {
model: 'Writer.Person',
autoLoad: true,
autoSync: false,
proxy: {
type: 'ajax',
api: {
read: '?operant=2',
create: '?operant=3',
update: '?operant=4',
destroy: '?operant=5'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message',
extraParams: {
user_id: "some text",
another_param: "more text"
}
}
}
});
I tried use baseParams 、 params ,I use fiddler to look ,the extjs no send this, how to do?? thanks

Check this, it shows some workaround for your problem: http://www.learnsomethings.com/2011/05/17/where-did-setextraparam-aka-setbaseparam-go-in-extjs-4-%E2%80%93-one-workaround/

I believe you're looking for extraParams, which is a config under the proxy. Example:
proxy: {
url: "some_page.jsp",
extraParams: {
user_id: "some text",
another_param: "more text",
// add as many as you need
}
}
These extra parameters will be sent in your requests. There are also default params set by the Ajax proxy class: pageParam, sortParam, groupParam, filterParam, limitParam. Set these to undefined to remove them from the request.