Extjs Paging with additional Parameter - javascript

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
}
}

Related

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(...

ExtJS - Saving nested data to .json file

I created a store, where I'm loading nested data from .json file:
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
storeId:'2013',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
To add any new data to grid I use:
var asdfg = Ext.getStore(myNewGrid);
asdfg.add({lastname: nowa, firstname: nowa2);
Everything works fine until I refreshed the page. After it I lose all changes.
My model 'User' file:
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
border: false,
views: [
'user.List'
],
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}});
Is it any simple way to save and commit my new changes similar to loading? To start my web use Sencha Cmd v.4.0.4
just use autoSync:true in your store.
in that case adding type:rest to your proxy will make it easier.
look at this example: http://dev.sencha.com/deploy/ext-4.0.1/examples/restful/restful.html

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!

Sending parameters in ExtJS 4.1

This is my code:
Ext.define('gridOptionsModel', {
extend: 'Ext.data.Model'
});
var gridOptionsStore = Ext.create('Ext.data.JsonStore', {
autoDestroy: true,
model: 'gridOptionsModel',
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: '/application.php?way=system&case=updateFields41',
extraParams: {meta: 'true'},
reader: {
type: 'json',
root: 'gridoptions'
}
}
});
And this is the part where it reloads the data from the url but does not send the desired parameters
gridOptionsStore.load({proxy: {
extraParams: {gridData: grid.getState()}}
});
I have tried everything possible but cannot made it to POST the gridData parameter.
you can add the extra param before the load.
gridOptionsStore.getProxy().extraParams.gridData = grid.getState();
gridOptionsStore.load();
This works for me.
instead of setting a property directly, use a method when available:
gridOptionsStore.getProxy().setExtraParam('gridData', grid.getState());

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.

Categories