i am trying to update records displayed in editor grid..but instead of updating same record, a new record gets inserted into the database...what am i missing??pllzz help..following is my JsonStore code :
Ext.data.Api.restActions = {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE' };
ProdStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
ProdStore.superclass.constructor.call(this, Ext.apply({
storeId: 'ProdStore',
id:'ProdStore',
url: 'products.json',
root: 'proddata',
restful:true,
idProperty:'id',
successProperty:'success',
autoLoad:true,
autoSave:false,
batch:true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false}),
fields: [
{ name:'customer_id'},{ name: 'prodnm'},
{ name: 'qty'}, { name: 'rate' }, { name: 'amt'}
]
}, cfg));
}
});
new ProdStore();
The idProperty set on the store should be the field that represents unique rows in the database. Perhaps customer_id in this case?
If this does not fix the issue, I would have to see the back end code to see how the save is being handled.
Related
i am sending a ListofMap say 'ListofCSVMap' from my Grails(2.2.4) controller to Extjs (4.2.1) store
Like this
csvMap.put('Code', code)
csvMap.put('Number', number)
csvMap.put('Country', country)
listOfCsvMap.add(csvMap)
session.setAttribute("rows", listOfCsvMap)
render([items:listOfCsvMap] as JSON)
Now in my Extjs grid panel i am using the above listofCsvMap like this in my extjs store
var store1;
Ext.onReady(function() {
document.getElementById('legendId').style.display = "none";
store1 = new Ext.data.JsonStore({
storeId: 'myStore1',
pageSize: 20,
proxy: {
type: 'ajax',
url:'loadGrid',
reader: {
type: 'json',
root: 'items'
}
},
fields: ['Code','Number','Country']
});
i am editing a country using Roweditor Plugin like this
{
text : '<b>' + 'Country Of Origin' + '</b>',
//locked : true,
width : 110,
sortable : false,
dataIndex : 'Country',
editor : {
// for editable field, set a proper field xtype for it
xtype : 'combobox',
queryMode : 'remote',
editable : true,
id: 'countryDrop',
displayField : 'countryName',
valueField : 'countryName',
allowBlank : false,
store : new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'loadCountry',
reader: {
type: 'json'
}
},
autoLoad: true,
fields: [
{type: 'string', name: 'countryName'}
]
})
}
My requirement is when user edits the country field which is a combobox in the Extjs grid panel i want to return the entire updated Extjs store to my Grails Controller and update the listOfCsvMap which i am storing in session or is it possible to update the session attribute within the extjs grid it self after editing
Please help me with this !
I've been doing alot of searching but haven't found a clear answer for this. I have a set up textboxes that and a submit button and a Kendo UI grid. I want to post the data to the grid's datasource so that it will return the results based on the criteria. I am not using the MVC wrappers.
EDIT:
I've gotten closer but I can't seem to get the datasource to send the post data when I click submit. I've debugged and in my $("#fmSearch").submit it is hitting the jquery plugin and I've confirmed that it is converting the form data to JSON properly, but it seems as though it it not sending the updated information to the server so that the Action can read it.
Javascript
var dsGalleryItem = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Content("~/Intranet/GalleryItem/SearchGalleryItems")',
type: "POST",
data: $("#fmSearch").serializeFormToJSON(),
cache: false
}
},
schema: {
model: {
id: "galleryItemID",
fields: {
galleryItemID: {
nullable: true
},
imageName: {},
collectionName: {},
categoryName: {},
lastUpdatedOn: { type: "date" }
}
}
}
});
var gvResults = $("#gvResults").kendoGrid({
autoBind:false,
columns: [{
field: "imageName",
title: "Item Name",
template: "<a href='#Url.Content("~/Intranet/GalleryItem/Details/")#=galleryItemID#'> #=imageName#</a>"
}, {
field: "collectionName",
title: "Collection"
}, {
field: "categoryName",
title: "Category"
}, {
field: "lastUpdatedOn",
title: "Last Updated",
format: "{0:M/d/yyyy}"
}
],
selectable: "row",
change: onRowSelect,
dataSource: dsGalleryItem
});
$("#fmSearch").submit(
function (event) {
event.preventDefault();
dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });
});
MVC Action
[HttpPost]
public JsonResult SearchGalleryItems(string keyword, int? category, int? collection, DateTime? startDate, DateTime? endDate)
{
var galleryItemList = (from g in db.GalleryItems
//where g.imageName.Contains(keyword)
select new GalleryItemViewModel
{
galleryItemID = g.galleryItemID,
imageName = g.imageName,
collectionName = g.collection.collectionName,
categoryName = g.category.categoryName,
lastUpdatedOn = g.lastUpdatedOn
});
var galleryItemCount = Json(galleryItemList.ToList());
return Json(galleryItemList.ToList()); ;
}
The action is not setup to retrieve different data right now I just need to know how to connect the form to the grid.
Found the problem. I had this:
dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });
It needed to be this:
dsGalleryItem.read($("#fmSearch").serializeFormToJSON());
I tried to use model.save() to POST a new user. But I check request payload and found that it not only sent the data, but also sent other parts of the model. That makes my server cannot parse the payload.
The request payload generated :
{"phantom":true,"internalId":"ext-record-58","raw":{},"data":{"userId":0,"userName":"Amy"},"modified":{"userName":""},"hasListeners":{},"events":{},"stores":[],"dirty":true,"id":"AM.model.User-ext-record-58"}
But the desired request payload should be :
{"userId":0,"userName":"Amy"}
And I am aware that the "phantom" of my model is false before I call model.save(). But it becomes true in the request payload. Is it a clue?
Model:
Ext.define('AM.model.User',{
extend: 'Ext.data.Model',
fields: [
{ name: 'userId', type: 'int' },
{ name: 'userName', type: 'string' },
{ name: 'createdTime', type: 'string' },
],
idProperty: 'userId',
associations: [
{
type: 'hasOne',
model: 'AM.model.ModelA',
name:'modelA',
associationKey:'modelA',
getterName:'modelA'
},
{
type: 'hasOne',
model: 'AM.model.ModelB',
name:'modelB',
associationKey:'modelB',
getterName:'modelB'
}
],
proxy: {
type: 'rest',
success:true,
url:'../restful/users',
writer:{
type:'json',
getRecordData:function(record){ //parse createdTime to the format Y-m-d
record.set('createdTime', Ext.Date.format(new Date(record.get('createdTime')), "Y-m-d"));
return record;
}
},
reader: {
type: 'json'
}
}
});
This is the view which has the data to be posted. The view will fill the data to the model:
Ext.define('AM.view.UserRegisterForm',{
extend:'Ext.form.Panel.',
alias:'widget.userRegisterForm',
fields:new Array(), //I want to render the fields in xtemplate, so instead of adding the fields to items, I use an array to manage them.
retrieveData(model){
model.set('userName', this.fields[0].getValue());
model.set('createdTime',this.fields[1].getValue());
}
}
The function in the controller, which sends the POST request:
postUser:function(){
var userRegisterForm= this.getUserRegisterForm();
var userModel = this.getUserModel();
var user= new userModel();
var me = this;
userRegisterForm.retrieveFieldData(user);
console.log(user); //the data in console looks fine!
user.save({
success: function(response) {
//do something...
},failure:function(response) {
alert('fail');
}
});
}
You are returning the full record when you override getRecordData Where as you are just meant to return the records data. record.getData()
Some extra advice. Don't override getRecordData to set the models creation date. Use the models defaultValue property to give assign it a new Date if one doesn't exist.
So I have two stores that use the exact same model, they are exactly the same in every way (except for their names of course). I want two different stores.
app.stores.newsFeed = new Ext.data.Store({
model: 'app.models.feedData',
proxy: {
type: 'scripttag',
url: 'http://query.yahooapis.com/v1/public/yql',
extraParams: {
format: 'json'
},
reader: {
root: 'query.results.item'
}
}
});
app.stores.eventsFeed = new Ext.data.Store({
model: 'app.models.feedData',
proxy: {
type: 'scripttag',
url: 'http://query.yahooapis.com/v1/public/yql',
extraParams: {
format: 'json'
},
reader: {
root: 'query.results.item'
}
}
});
My question is can I save space by getting rid of code and use only one store instance so I don't have to re-declare another new Ext.data.Store again?
something like:
store = new Ext.data.Store(...);
app.stores.newsFeed = store;
app.stores.eventsFeed = store;
I tried this before but both were assigned to the same store so when one was changed so was the other.
Just extend extJS component and you can get fast instances of your component:
MyStore = Ext.extend(Ext.data.Store, {
constructor : function(config) {
config = Ext.apply({
model: 'app.models.feedData',
proxy: {
type: 'scripttag',
url: 'http://query.yahooapis.com/v1/public/yql',
extraParams: {
format: 'json'
},
reader: {
root: 'query.results.item'
}
}
}, config);
MyStore.superclass.constructor.call(this, config);
},
onDestroy : function(config) {
MyStore.superclass.onDestroy.apply(this, arguments);
}
});
And create as much independent instanses as you want:
app.stores.newsFeed = Ext.create(MyStore, {});
app.stores.eventsFeed = Ext.create(MyStore, {});
I am using ExtJs with Rails 3.x . How to delete/modify records from EditorGrid using Ext.Ajax.request method?
I tried using store.remove() and similar other methods but it doesn't remove record from database.
Thanks in advance !!
Code :
//** Destroy method **//
def destroy
puts 'destroy'
#unit = Unit.find(params[:id])
puts 'will destroy'
#unit.destroy
puts 'destroyed'
end
//** units.js **//
var delbtn = Ext.getCmp('btnDelete');
delbtn.on('click',function(){
var grid = Ext.getCmp('maingrid');
var selection = grid.getSelectionModel().getSelected();
Ext.Ajax.request({
url: '/units/destroy',
method: 'POST',
params: {
'id' : selection.data.id }
});
});//end del function
//** Store.js **//
Ext.data.Api.restActions = {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE' };
storeId: 'MyUnitStore',
root: 'data',
autoLoad: true,
autoSave: false,
//batch: true,
restful:true,
writer: new Ext.data.JsonWriter({
encode : false,
listful:false,
destroy: '/units/destroy',
update : '/edit'
}),
url: '/units.json',
fields: [
{
name: 'unitname'
},
{
name: 'description'
}
]
//** Edit Button **//
var store = Ext.getCmp('maingrid').getStore();
store.update();
store.remove() removes the data (record) from your grid's associated store only. It does not communicate with server side by itself. You need to use the Ajax request and communicate with Rails 3.x to get the appropriate record deleted.
var selection = grid.getSelectionModel().getSelected();
Ext.Ajax.request({
url: '/ExampleController/Delete',
method: 'POST',
params: {
'id': selection.data.id
},
success: function(result, request){
// Refresh the grid store and display
},
failure: function(result, request){
// Display delete error message
}
}