Related
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;
}
}
},
JsOnStore Coding
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, 'Route_Seq','Location_Name']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteModelSeq',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
extraParams: {
'_id' : '0',
},
reader: {
type: 'json',
//idProperty: '_id'
},
writer: {
type: 'json',
//id: '_id'
}
}
});
this is the combo box when selected changed then pass the extraparams to get the data and show at grid panel
xtype: 'combobox',
width: 191,
store: RouteNameStore,
displayField : "Route_Code",
fieldLabel: 'Route Code',
labelWidth: 70,
allowBlank: false,
editable: false,
listeners: {
select: function( combo, records, eOpts ) {
console.log("Combo selected _id : "+records[0].get('_id'));
RouteSeqStore.load({
params:{
_id: records[0].get('_id')
}
});
}
}
and get-routeseq.php get work fine, this is firebug return JSON data from get-routeseq.php
[{"Route_ID":"1","Route_Seq":"1","Route_LocationID":"1","_id":"1","Location_ID":"1","Location_Name":"TRY","AddBy_ID":"2"},
{"Route_ID":"1","Route_Seq":"2","Route_LocationID":"2","_id":"2","Location_ID":"2","Location_Name":"ABC","AddBy_ID":"2"}]
all working fine, but firebug with this error
TypeError: d.read is not a function
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
why?
replace model: 'RouteModelSeq',
with model: 'RouteSeqModel',
I have a model with an id property. This is the important part of the declaration.
Ext.define('E.model.portfolio.Portfolio', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'currencyId', type: 'int' },
{ name: 'startingCapital', type: 'float' },
{ name: 'startDate', type: 'date' },
{ name: 'endDate', type: 'date' },
{ name: 'isPrivate', type: 'boolean', defaultValue: true },
{ name: 'isPercentageAllocation', type: 'boolean', defaultValue: true },
{ name: 'currentAllocationPeriod', type: 'int', useNull: true },
{ name: 'frequency', type: 'int' },
{ name: 'rebalance', type: 'int' }
],
proxy: {
type: 'ajax',
url: '/someapi/action'
},
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'name' },
{ type: 'presence', field: 'currencyId' },
{ type: 'presence', field: 'startingCapital' },
{ type: 'presence', field: 'startPeriod' },
{ type: 'presence', field: 'endPeriod' }
],
}
However when I send this model to the server it's always missing the id property.
Here is the JSON that is sent up.
{
"name": "Unique Name Test",
"currencyId": 1,
"startingCapital": 1000000,
"startDate": null,
"endDate": null,
"isPrivate": false,
"isPercentageAllocation": true,
"currentAllocationPeriod": 201003,
"frequency": 2,
"rebalance": 0
}
As you can see all properties are there except ID.
Does anyone have any insight as to what excatly is happening here ?
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.
Hey there,
I would like to be able to drag an item (bookmark) from a grid to a tree (categories) but I don't want the dropped bookmark-item to be added to the categories-tree as a new node and I don't want it to be removed from the grid. I just want to catch the dropnode-event and update the category-id of the bookmark.
How can this be done? What I've got so far is the following:
http://jsfiddle.net/suamikim/A3T6W/
Ext.onReady(function() {
// define model for tree
Ext.define('Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'parentCatId', type: 'int' },
{ name: 'name', type: 'string' }
]
});
// define model for grid
Ext.define('Bookmark', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'catId', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'url', type: 'string' }
]
});
// Create the tree-panel
var catTree = Ext.create('Ext.tree.Panel', {
itemId: 'catTree',
title: 'Categories',
flex: 0.5,
hideHeaders: true,
rootVisible: false,
allowDeselect: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dropGroup: 'bkmDDGroup',
enableDrag: false,
appendOnly: true
}
},
store: Ext.create('Ext.data.TreeStore', {
model: 'Category',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'categories'
}
}
}),
root: [],
columns: [{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1
}],
listeners: {
afterrender: function(tree) {
var root = tree.getRootNode();
// load static data
root.appendChild([{
id: 0,
parentCatId: -1,
name: 'Cat1',
expanded: true,
categories: [{
id: 2,
parentCatId: 0,
name: 'Cat1.1',
categories: []
},{
id: 3,
parentCatId: 0,
name: 'Cat1.2',
categories: []
}]
},{
id: 1,
parentCatId: -1,
name: 'Cat2',
categories: []
}]);
// select the first item
tree.getSelectionModel().select(root.getChildAt(0));
},
selectionChange: function(model, selected, opts) {
bkmGrid.filterBookmarks((selected && selected[0]) ? selected[0].get('id') : -1);
}
}
});
// Create the grid-panel
var bkmGrid = Ext.create('Ext.grid.Panel', {
itemId: 'bkmGrid',
title: 'Bookmarks',
flex: 1,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'bkmDDGroup'
}
},
store: Ext.create('Ext.data.Store', {
model: 'Bookmark',
proxy: {
type: 'memory'
},
data: [
{ id: 0, catId: 0, title: 'bkm1', url: 'http://www.url1.com' },
{ id: 1, catId: 0, title: 'bkm2', url: 'http://www.url2.com' },
{ id: 2, catId: 1, title: 'bkm3', url: 'http://www.url3.com' },
{ id: 3, catId: 1, title: 'bkm4', url: 'http://www.url4.com' },
{ id: 4, catId: 2, title: 'bkm5', url: 'http://www.url5.com' },
{ id: 5, catId: 3, title: 'bkm6', url: 'http://www.url6.com' }
]
}),
columns: [{
text: 'Title',
dataIndex: 'title',
flex: 0.7
},{
text: 'URL',
dataIndex: 'url',
flex: 1,
renderer: function(value, meta) {
meta.tdAttr = 'data-qtip="' + value + '"';
return '' + value + '';
}
}],
filterBookmarks: function(catId) {
var store = this.getStore();
store.clearFilter();
if (catId >= 0) {
store.filter('catId', catId);
}
}
});
// Create window which holds the dataview
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [ catTree, bkmGrid ]
}).show();
});
This throws the following exception after dropping a bookmark on the tree:
"Uncaught TypeError: Object [object Object] has no method 'updateInfo'"
The exception is thrown in the appendChild-method which finally shouldn't be called at all. Therefore the exception doesn't matter but how can i prevent the tree from trying to add a new node after the drop?
Thanks
I just found a solution which looks like this:
http://jsfiddle.net/suamikim/A3T6W/4/
The "magic" is to just delete the records-array in the beforedrop-listener. Before deletion i saved the array to a custom config-object of my tree (this.droppedRecords) to be able to access the data again in the drop-listener:
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dropGroup: 'bkmDDGroup',
enableDrag: false,
appendOnly: true
},
listeners: {
beforedrop: function(node, data, overModel, dropPos, opts) {
this.droppedRecords = data.records;
data.records = [];
},
drop: function(node, data, overModel, dropPos, opts) {
var str = '';
Ext.iterate(this.droppedRecords, function(record) {
str += record.get('title') + ' (id = ' + record.get('id') + ') dropped on ' + overModel.get('name') + '\n';
});
alert(str);
this.droppedRecords = undefined;
}
}
},
That's it.
Thanks