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!
Related
I wanna save a model by sending data using post method to my web server,
I wrote these codes and noticed that sencha is sending data using the GET method.
how can I send the data using POST method?
my model code:
Ext.define('MyApp.model.emp.Roles', {
extend: 'MyApp.model.Base',
fields: [
{
type: 'int',
name: 'id'
},
{
type: 'string',
name: 'title'
},
],
proxy: {
type: 'ajax',
url : 'http://myweb.test/json/fa/myweb/managerole.jsp',
idParam: 'id',
extraParams: {
'action':'btnSave_Click'
},
method:'POST',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}
});
save calling code:
{
xtype: 'button',
text: 'ذخیره',
handler:function()
{
var user = Ext.create('MyApp.model.emp.Roles', {title: 'A Role From Sencha'});
user.set('title','hi');
user.set('id',-1);
user.save({
params: user.getData(),
callback: function (records, operation) {
Ext.Msg.alert('User Save', operation.getResponse().responseText);
},
methodName:'POST',
method:'POST',
});
}
}
If you are using model then you need to use only actionMethods.
actionMethods Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. Defaults to:
{
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
}
In this FIDDLE, I have created a demo using model and button. I hope this will help/guide your to achieve your requirement.
*NOTE I have used only local url. I don't have any live url. You can see in network request data is sending in url.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['version', 'code', 'framework', 'frameworkVersion', 'fiddleid', 'inspector', 'session'],
proxy: {
type: 'ajax',
url: 'local', //I am providing local url in your case you can provide your rest webservice url
useDefaultXhrHeader: false,
actionMethods: {
create: 'POST', //When you want to save/create new record
read: 'GET', //When you want to get data from server side
update: 'PUT', //When you want to update the record
destroy: 'DELETE' //When you want to delete the record
},
paramAsJson: true // if You want to encode the data from clint side then it should be true otherwise false
}
});
Ext.create({
fullscreen: true,
renderTo: Ext.getBody(),
xtype: 'panel',
title: 'sending data using POST method in sencha extjs rest webservice',
padding: 10,
items: [{
xtype: 'button',
text: 'Send Data',
margin: 15,
style: {
background: '#ccc'
},
height: 50,
width: '100%',
handler: function () {
var MyModel = Ext.create('MyModel', {
version: "2",
code: '',
framework: "291",
frameworkVersion: "",
fiddleid: "",
inspector: "",
session: ''
});
MyModel.save({
success: function (records, operation) {
//When data will save on sever side then response will come in success
Ext.Msg.alert('User Save', 'Data saved');
},
failure: function (records, operation) {
//If some error occure on server side the reponse will come in failure function
Ext.Msg.alert(`Error ${operation.error.status}`, operation.error.statusText);
}
});
}
}]
});
}
});
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
}
}
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
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());
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.