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.
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;
}
}
},
I am trying to add filtering to a simple ExtJS 5 Grid. I am using a simple example provided by the installation and looks like it is working fine, except in IE when I try to do filtering all the records get wiped.
Has anyone seen this issue? Here is the code that I am using.
`$("#SearchEmployees").click(function () {
var criteria = $("#employeeName").val();
if (criteria == '' || criteria == null) {
alert("Please apply search criteria.");
return;
}
var baseurl = $("#hdnUrlSearch").val();
var data = (function () {
$("#employeesSearchGrid").empty();
$.ajax({
type: "POST",
url: baseurl,
dataType: "json",
data: { employeeName: criteria },
async: false
}).done(function (retData) {
data = retData;
}).fail(function (xhr) {
alert(xhr.responseText);
});
return data;
})();
Ext.define('EmployeeSearch', {
extend: 'Ext.data.Model',
fields: [
'FullName',
'DepartmentName',
'PhoneNumber',
'EmailAddr'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'EmployeeSearch',
proxy: {
type: 'ajax'
},
data: data
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
forceFit: true,
columns: [{
header: 'Name',
dataIndex: 'FullName',
flex: 1,
filter: 'string',
width: 440
}, {
header: 'Department',
dataIndex: 'DepartmentName',
filter: 'string',
flex: 1,
width: 200
}, {
header: 'Direct Phone',
dataIndex: 'PhoneNumber',
filter: 'string',
flex: 1,
width: 240
}, {
header: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
filter: 'string'
}],
renderTo: 'employeesSearchGrid',
frame: true,
plugins: ['gridfilters']
});
});`
The issue was fixed by adding height of the grid. Once I did that filtering and sorting got fixed. Here is how my grid looks like now:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: 'Name',
dataIndex: 'FullName',
flex: 1,
width: 440,
sortable: true,
filter: 'string'
}, {
text: 'Department',
dataIndex: 'DepartmentName',
flex: 1,
width: 200,
sortable: true,
filter: 'string'
}, {
text: 'Direct Phone',
dataIndex: 'PhoneNumber',
flex: 1,
width: 240,
sortable: true,
filter: 'string'
}, {
text: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
sortable: true,
filter: 'string'
}],
forceFit: true,
split: true,
renderTo: 'employeesSearchGrid',
height: 210,
frame: true,
plugins: ['gridfilters']
});
I have the following JSON being returned from my PHP script to populate my Kendo grid:
data: [{id:1, sku:-, theName:Two tier wedding veil, basePrice:77.00, dimensions:-, weight:-,…},…]
querytime: "0.0000"
rowcount: 4
Which works great. As you can see I have added an extra parameter called "querytime".
How do I access that on the JS side of things so I can append that to the footer of the grid?
I have tried:
console.log($('#productGrid').data("kendoGrid").dataSource);
To try and find where my extra parameter is located but to no avail.
How can I access my customer parameter?
var columns = [
{
field: 'dateRaw',
title: 'Date added',
width: '90px',
template: '<span class="data" data-menu-id="1" data-item-id="#=id#" data-item-type="products"><abbr title="At #=time#">#=dateFormatted#</abbr></span>'
},
{
field: 'sku',
title: 'SKU',
width: '120px'
},
{
field: 'theName',
title: 'Name'
},
{
field: 'dimensions',
title: 'Dimensions',
//width: '120px'
},
{
field: 'weight',
title: 'Weight',
width: '80px'
},
{
field: 'basePrice',
title: 'Price',
width: '60px',
format: '{0:n}'
}]
$('#productGrid').kendoGrid({
rowTemplate: '',
dataSource: {
transport: {
read: {
type: 'POST',
dataType: 'json',
url: 'Ajax',
data: {
call: 'Product->productGrid'
}
}
},
schema: {
data: 'data',
querytime: 'querytime',
total: 'rowcount',
model: {
id: 'id',
fields: {
dateRaw: {
type: 'date'
},
id: {
type: 'number'
},
sku: {
type: 'string'
},
basePrice: {
type: 'number'
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
error: function(e) {
modalError(e.errorThrown + "<br/>" + e.status + "<br/>" + e.xhr.responseText)
}
},
height: 700,
autoBind: false,
filterable: true,
sortable: true,
pageable: true,
columns: columns
})
you are pretty close:
querytime is available inside the options object of your dataSource:
$('#productGrid').data('kendoGrid').dataSource.options.querytime
I am having trouble adding new entries to a store / grid in ExtJS 4.2. The create action runs on the server and returns a generated id for the new record. I can start on edit on the row that does not show up in the grid. The error I get after syncing is: Uncaught TypeError: Cannot read property 'parentNode' of null.
projectStore.js:
var projectStore = Ext.create('Ext.data.Store', {
model: 'ProjectModel',
storeId: 'projectStore',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: webPath+'server.php?action=createProjectStore',
read: webPath+'server.php?action=readProjectsStore',
update: webPath+'server.php?action=updateProjectStore',
destroy: webPath+'server.php?action=destroyProjectStore'
},
extraParams: {
token: userDetails.token,
userName: userDetails.UserName
},
reader: {
type: 'json',
successProperty: 'success',
idProperty: "ProjectID",
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true,
allowSingle: false
},
listeners: {
exception: function(proxy, response, operation){
// Ext.MessageBox.show({
// title: 'REMOTE EXCEPTION',
// msg: operation.getError(),
// icon: Ext.MessageBox.ERROR,
// buttons: Ext.Msg.OK
// });
operation.records[0].reject();
}
},
onUpdateRecords: function(records, operation, success) {
console.log(records);
}
}
});
projectModel.js:
Ext.define('ProjectModel', {
extend: 'Ext.data.Model',
idProperty: 'ProjectID',
fields: [ {
name: 'ProjectID',
type: 'int'
}, 'AccountName', 'AccountID', 'ProjectName', 'Deleted']
});
userProfileProjects.js
Ext.require([
'Ext.grid.Panel',
'Ext.form.*',
'Ext.window.Window',
'Ext.data.*'
]);
$(document).data('mcal.userAccountFixPopupOpen', false);
$(document).data('mcal.newProjectRecord', false);
var userProfileProjectRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
Ext.define('User.Project.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.userProjectsGrid',
initComponent: function(){
this.editing = userProfileProjectRowEditing;
this.onRemoveProject = function(grid, rowIndex, colIndex) {
grid.getStore().removeAt(rowIndex);
}
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
items: ['->',
{
text: 'Add Project',
handler : function() {
userProfileProjectRowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('ProjectModel', {
ProjectName: 'New Project'
});
projectStore.insert(0, r);
$(document).data('mcal.newProjectRecord', true);
userProfileProjectRowEditing.startEdit(0, 0);
}
},
{
iconCls: 'icon-refresh',
text: 'Refresh',
scope: this,
handler: this.onRefresh
}]
}],
columns: [
{
text: 'Account',
width: 115,
sortable: true,
hidden: false,
dataIndex: 'AccountID',
renderer: function(value){
var accountID = userAccountTimeLimitedStore.getAt(userAccountTimeLimitedStore.find('key', value));
return accountID.get('AccountName');
},
editor: {
xtype: 'combobox',
valueField: 'key',
displayField: 'AccountName',
triggerAction: 'all',
queryMode: 'local',
store: userAccountTimeLimitedStore
},
flex: 1
},
{
text: 'Project',
width: 115,
sortable: true,
dataIndex: 'ProjectName',
field: {
type: 'textfield'
},
flex: 1,
hidden: false
},
{
xtype:'actioncolumn',
text: 'Delete',
width:45,
align: 'center',
editRenderer: function(){ return ''},
items: [{
icon: webPath+'/images/remove.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: this.onRemoveProject
}]
}
],
selType: 'rowmodel',
plugins: [this.editing]
});
this.callParent();
},
onRefresh: function(){
this.store.reload();
}
});
function initUserProjectGrid(){
window.main = Ext.create('Ext.container.Container', {
padding: '0 0 0 0',
width: 380,
height: 200,
renderTo: Ext.get('userProjectGridDiv'),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
itemId: 'userProfileProjectGrid',
xtype: 'userProjectsGrid',
title: 'Projects',
flex: 1,
store: 'projectStore'
}]
});
// main.getComponent('userProfileProjectGrid').editing.editor.form.findField('AccountName').disable();
var localEdit = main.getComponent('userProfileProjectGrid').editing;
localEdit.on('beforeedit', function(editor, context, eOpts){
if($(document).data('mcal.newProjectRecord') != true){
localEdit.editor.form.findField('AccountID').disable();
}else{
localEdit.editor.form.findField('AccountID').enable();
}
});
localEdit.on('afteredit', function(){
$(document).data('mcal.newProjectRecord', false);
});
}
I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.
Json-reply from server is:
{
"totalCount":"2",
"companies":[
{
"id":"1",
"name":"Name1",
"region":"Reg1",
"address":"Addr1",
"dealCount":"3",
"dealAmount":"19250",
"latestDealDate":"2012-01-09"
},
{
"id":"2",
"name":"Name2",
"region":"Reg2",
"address":"Addr2",
"dealCount":"2",
"dealAmount":"12150",
"latestDealDate":"2012-01-08"
}
]
}
JavaScript code, which creates store, grid, e.t.c. is:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.layout.*'
]);
Ext.onReady(function(){
// Define data model
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name', 'region', 'address',
{
name: 'dealCount',
type: 'int'
},
{
name: 'dealAmount',
type: 'int'
},
{
name: 'latestDealDate',
type: 'string'
}
],
idProperty: 'id'
});
// Create data store
var companies = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Company',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php'
}),
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
// Create data grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: companies,
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Region',
dataIndex: 'region'
},
{
text: 'Address',
dataIndex: 'address'
},
{
text: 'Deal Count',
dataIndex: 'dealCount'
},
{
text: 'Deal Amount',
dataIndex: 'dealAmount'
},
{
text: 'Latest Deal Date',
dataIndex: 'latestDealDate'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: companies,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// Load first data page
companies.loadPage(1);
});
Firebug shows, that server responds with json-data, but grid remains empty. How can I fix it?
You should define reader inside proxy (at least that helped for me). Eg:
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php',
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
})
})
Working sample: http://jsfiddle.net/ycDzL/3/