We Keep Coding

extjs record destroy by desired property

I'm developing Exjs mvc application.
I have an Extjs model :
Ext.define('JC.model.File', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'fileName', type: 'string'},
{name: 'fileSize', type: 'string'},
{name: 'position', type: 'string'}
]
});
and a store:
Ext.define('JC.store.Files', {
extend: 'Ext.data.Store',
model: 'JC.model.File',
proxy: {
url: JC.Util.createUrl('upload/getfiles'),
type: 'ajax',
simpleSortMode: true,
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
},
api: {
create: '',
read: undefined,
update: undefined,
destroy: JC.Util.createUrl('upload/deletefile')
},
actionMethods:{create: 'POST', read: 'GET', update: 'POST', destroy: 'GET'}
}
});
and a grid panel with the following columns:
columns: [
{header: 'id', dataIndex: 'id', flex: 1},
{header: 'file name', dataIndex: 'fileName', flex: 1},
{header: 'file size', dataIndex: 'fileSize', flex: 1},
{header: 'position', dataIndex: 'position', flex: 1}, {
xtype: 'actioncolumn', items: [
{
icon: 'css/images/tree/black-trash-16.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().destroy(rec);
}
}
]
}
],
at the line:
grid.getStore().destroy(rec);
an ajax request is created as below:
http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=JC.model.File-6
I want the id requested for delete operation be my desired property of record i,e rec.id and I want it to be int type.I want the request to be something like this:
http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=6
How can I do that?

I have setup a fiddle to replicate the issue.
I only managed to get this working by changing the actionMethod for the destory action to POST and setting an idProperty on the model.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('File', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'fileName',
type: 'string'
}, {
name: 'fileSize',
type: 'string'
}, {
name: 'position',
type: 'string'
}]
});
Ext.define('Files', {
extend: 'Ext.data.Store',
model: 'File',
autoLoad: true,
proxy: {
url: 'data1.json',
type: 'ajax',
simpleSortMode: true,
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'totalCount'
},
api: {
create: '',
read: 'data1.json',
update: '',
destroy: 'delete.json',
},
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
}
}
});
var store = Ext.create('Files');
Ext.create('Ext.grid.Panel', {
title: 'Test',
store: store,
columns: [{
header: 'id',
dataIndex: 'id',
flex: 1
}, {
header: 'file name',
dataIndex: 'fileName',
flex: 1
}, {
header: 'file size',
dataIndex: 'fileSize',
flex: 1
}, {
header: 'position',
dataIndex: 'position',
flex: 1
}, {
xtype: 'actioncolumn',
items: [{
icon: 'css/images/tree/black-trash-16.png',
tooltip: 'Delete',
width:50,
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
rec.erase();
}
}]
}],
height: 300,
width: 600,
renderTo: Ext.getBody()
});
}
});
// Sample JSON Data
{
"success": true,
"totalCount": 5,
"items": [{
"id": 1,
"fileName": 'file1.png',
"fileSize": 93204,
"position": 1
}, {
"id": 2,
"fileName": 'file2.png',
"fileSize": 93204,
"position": 1
}, {
"id": 3,
"fileName": 'file3.png',
"fileSize": 93204,
"position": 1
}, {
"id": 4,
"fileName": 'file4.png',
"fileSize": 93204,
"position": 1
}, {
"id": 5,
"fileName": 'file5.png',
"fileSize": 93204,
"position": 1
}]
}

I know this is an old post but you can send the model data that you wish by defining the proxy.writer in the model, in the proxy writer definition you can define the transform.fn which returns the data to send to the server as the model.data:
writer: {
type: 'json',
allDataOptions: {changes: true, critical: true},
partialDataOptions: {changes: true, critical: true},
encode: true,
rootProperty: 'group',
transform: {
fn: function(data, request, isDraft, model) {
if(request) {
if(request.getAction() == 'destroy') {
data.id = me.get('id');
data.type = me.get('type');
}else if(request.getAction() == 'create') {
delete(data.id);
}
}
return data;
}
}
},

Proxy of ExtJS model

Im using ExtJS 4.2. I have following code:
Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'type',
type: 'string'
}, {
name: 'type_id',
type: 'int'
}],
proxy: {
type: 'ajax',
api: {
update: 'localhost/update'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
root: 'data',
encode: true
}
}
});
var record = new Model({
id: 100,
type_id: 2
});
record.phantom = false;
record.save({
success: function(record) {
console.log(record.get('type'));
}
});
Param of request localhost/update:
data: {id: 100, type_id: 2}
Response:
data: {id: 100, type_id: 2, type: 'type of record'}
Why it
console.log(record.get('type'));
displays null?

You may have to add "success": true to your response or set successProperty to null on your reader.

EXTjs grid model json noob

What am I doing wrong? Of all the fields displayed in the grid only Working Group. EXTjs 4.2.1.
Tried different variants that have been found here, but, alas, nothing has helped understand what is wrong here.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'WorckGroup', type: 'string' },
{ name: 'Statistics', type: 'auto' },
{ name: 'Specialist', type: 'string', mapping: 'Statistics.Specialist' },
{ name: 'ScallCount', type: 'int', mapping: 'Statistics.SCallCount' },
{ name: 'AverageDuration', type: 'auto', mapping: 'Statistics.AverageDuration' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'myModel',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid',
reader: {
type: 'json',
}
},
autoLoad: true
});
var basegrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'WG', width: 200, dataIndex: 'WorckGroup' },
{ header: 'SP', dataIndex: 'Specialist' },
{ header: 'SCC', dataIndex: 'SCallCount' },
{ header: 'AD', dataindex: 'AverageDuration' }
], });
json
[
{"WorckGroup":"3D",
"Statistics":[
{"Specialist":"В А","SCallCount":64,"AverageDuration":0.1136067},
{"Specialist":"К Т","SCallCount":170,"AverageDuration":0.1045816}]
{"WorckGroup":"SD",
"Statistics":[
{"Specialist":"B A","SCallCount":197,"AverageDuration":0.1364689}]
}
]

Your mappings don't make sense. Statistics is an array, so Statistics.Specialist doesn't map to anything.
Your root for the reader should probably be WorckGroup.Statistics and you should include the WorckGroup in each item.
reader: {
type: 'json',
root: 'WorckGroup.Statistics'
}
Then remove the mapping from each field in the model.

ExtJS 4.1 Infinite Grid Scrolling doesnt work

I want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('SCT.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'SCT.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'SCT.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('SCT.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller', 'Ext.ux.grid.FiltersFeature'],
My grid is still loading all data at once (about 8000 rows...) ...
i've searched for solutions and worked through tutorials.. i still dont get it.
please help me out... i dont get it at all...
UPDATE
this is my srv request:
and the response got 3MB (about 8k datasets... ) ..??

Your request dump shows that Ext effectively sends the limit param, so that's your server that is not handling it...
Just a piece of advice, but you should consider upgrading to last version of Ext, since buffered grid seems to have been simplified, and that will avoid you having to rework it if you eventually upgrade.

What is wrong with my DropDown editor for a jqxGrid column?

I have this jqxGrid setup:
var paymentSource = {
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' }
],
url: "#Url.Action("GetPaymentSchemes")"
};
var paymentAdapter = new $.jqx.dataAdapter(paymentSource, { autoBind: true });
var gridSource =
{
datatype: "json",
datafields: [
{ name: 'Name', type: 'string' },
{ name: 'PaymentSchemeId', type: 'number' },
{ name: 'IsActive', type: 'boolean' },
{ name: 'Remarks', type: 'string' }
],
url: "#Url.Action("GetParkades")"
};
var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$("#index-grid").jqxGrid(
{
theme: theme,
width: 900,
source: gridDataAdapter,
editable: true,
columns: [
{ text: "Name", datafield: "Name", width: 300 },
{
text: 'Payment Scheme',
datafield: 'PaymentSchemeId',
displayfield: 'Name',
columntype: 'dropdownlist',
createeditor: function(row, value, editor) {
editor.jqxDropDownList({ source: paymentAdapter, displayMember: 'Name', valueMember: 'Id' });
}
},
{ text: "Active", datafield: "IsActive", width: 50, columntype: 'checkbox' },
{ text: "Operator Remarks", datafield: "Remarks" }
]
});
The "Payment Scheme" column shows the same text value as the "Name" column when the page loads. When I double click "Payment Scheme", I get the correctly populated dropdown, but when I select a value, and leave the cell to end editing, the "Name" column now shows the same text as the "Payment Scheme" column. Do the two Name fields in different sources and adapters conflict? What is up here?