in ExtJS 4 i could create a filter to filter my grid.
When is set local to false, i could filter my store.
var filtersCfg = {
ftype: 'filters',
autoReload: false, //don't reload automatically
local: false, //remote filter
// filters may be configured through the plugin,
// or in the column definition within the headers configuration
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'name'
}, {
type: 'numeric',
dataIndex: 'price'
}, {
type: 'date',
dataIndex: 'dateAdded'
}, {
type: 'list',
dataIndex: 'size',
options: ['extra small', 'small', 'medium', 'large', 'extra large'],
phpMode: true
}, {
type: 'boolean',
dataIndex: 'visible'
}]
};
In EXTJS 7 i can only add a plugin:
plugins: {
gridfilters: true
},
How can i add a remote filter in EXTJS 7. Is this still possible? I can't find anything in the documentation.
Best regards
Edit:
I'm using a data.Store to get a json from my php/database. Sorting over the grid is not a problem. But how can i use a filter to send the parameters to my php?
var Store = new Ext.data.Store({
extend: 'Ext.data.Store',
autoLoad: true,
remoteSort: true,
fields: [
'columnA','columnB'
],
pageSize : 50,
proxy: {
type: 'ajax',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
url: 'data/URL.php',
reader: {
rootProperty: 'columns',
totalProperty: 'totalCount'
},
simpleSortMode: true,
extraParams: {
task: 'doFiltering'
}
},
sorters: [{
property: 'columnA',
direction: 'DESC'
}]
});
I found the solution.
I need to add remoteFilter: true to my store.
The whole time i was searching on the wrong place.
This was the solution: How to apply filter function to paging grid with local(memory) store in ExtJS6?
Thank you for your help.
In ExtJS 7 you must put filter config in column.
...
{
text: 'Email',
dataIndex: 'email',
flex: 1,
filter: {
type: 'string',
value: 'lisa'
}
},
...
Fiddle
Related
The total number of rows is correctly showing in pagination but Pagination is not updating the view when the next button is clicked.
I'm new to Sencha. In Mysql, I'm returning all rows. So that I can limit in client side. If I limit the rows in backend, I cannot have all the rows in client side.
View: List.js
/*** This view is an example list of people.
*/
Ext.define('CRUD.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'home',
requires: [
'CRUD.store.Personnel'
],
title: 'Heroes',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
layout: 'fit',
fullscreen: true,
store: {
type: 'personnel',
},
columns: [
{ text: 'Name', dataIndex: 'name', sortable: true, flex: 1 },
{ text: 'Email', dataIndex: 'email', sortable: true, flex: 1 },
{ text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 }
],
bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
// columns: [
// { text: 'Name', dataIndex: 'name', flex: 1 },
// { text: 'Email', dataIndex: 'email', flex: 1 },
// { text: 'Phone', dataIndex: 'phone', flex: 1 }
// ],
listeners: {
select: 'onItemSelected',
},
});
Store: Personnel.js
Ext.define('CRUD.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'CRUD.model.User',
id: 'list',
fields: [
'name', 'email', 'phone'
],
// data: [
// { name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
// { name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
// { name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
// { name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
// ],
autoLoad: {
start: 0,
limit: itemsPerPage
},
buffered: true,
pageSize: itemsPerPage,
remoteSort: true,
proxy: {
type: 'jsonp', //cross domain calls - json parser
url: 'http://localhost:8080/list',
enablePaging: true,
reader: {
type: 'json',
totalProperty: 'total'
},
},
// proxy: {
// type: 'memory',
// reader: {
// type: 'json',
// }
// },
});
bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
I have removed store inside bbar and it works. Thanks for being cooperative.
The way you're using the store, ExtJS will do a request every time you change the page, sending the page number parameter to the URL set to the store.
If you want to do client-side pagination using ExtJS, you must set your store's proxy type to memory, load your data into the store and then ExtJS Grid will handle pagination as you expect.
Do an Ext.Ajax.Request like that:
Ext.Ajax.request({
url: 'http://localhost:8080/list',
success: function(response) {
dataStore.setProxy({
type: "memory",
enablePaging: true,
data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure
});
dataStore.load();
}
});
For cross domain, you can make a call to Ext.data.JsonP.request() method and process the response as shown in the code below:
Ext.data.JsonP.request({
url: 'data1.json',
success: function (response) {
var myData = [];
Ext.Array.forEach(response.data, function (item) {
myData.push({
name: item.name,
email: item.email,
phone: item.phone
});
});
store.setProxy({
type: "memory",
enablePaging: true,
data: myData
});
store.load();
}
});
Check this fiddle for complete working example.
I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below
My proxy model is:
Ext.define('proxymodel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: false
}, {
name: 'gender',
type: 'auto'
}, {
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'int'
}],
identifier: 'sequential', // to generate -1, -2 etc on the client
proxy: {
type: 'rest',
//format: 'json',
//appendId: false,
idParam: "id",
//limitParam:"",
//filterParam: "",
//startParam:'',
//pageParam:'',
url: 'http://localhost:3000/posts',
api: {
read: 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update: 'http://localhost:3000/posts',
destroy: 'http://localhost:3000/posts'
},
headers: {
'Content-Type': "application/json"
},
reader: {
type: 'json',
rootProperty: 'posts',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
In Application.js, I have defined row editing plugin as:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
},
edit: function(editor, e) {
// commit the changes right after editing finished
e.record.commit();
}
}
});
And my store looks like:
Ext.define('Store', {
extend: 'Ext.data.Store',
storeId: 'peopleStore',
pageSize: 500,
//buffered: true,
//leadingBufferZone: 300,
pageSize: 5,
autoLoad: {
start: 0,
limit: 5
},
autoSync: true,
sorters: [{
property: 'age',
direction: 'ASC'
}],
groupField: 'gender'
});
Can anyone point out my mistake?
I have tried to reload my store after editing in 'edit' function of rowEditing but it didn't work.
Thanks for your time.
As full answer by request:
Have you tried Ext.data.StoreManager.lookup('peopleStore').reload() ?
My Simplified Store:
Ext.define('PT.store.DealTree', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'rest',
url: '/dealTree',
reader: { type: 'json', root: 'children', successProperty: 'success' },
},
root: { name: 'children', expanded: true }
})
My Simplified Grid:
Ext.define('PT.view.deal.DealSelectionGrid', {
extend: 'Ext.tree.Panel',
alias: 'widget.dealSelectionGrid',
rootVisible: false,
fields: ['text', 'date'],
store: 'DealTree',
columns: [
{ xtype: 'treecolumn', text: 'Deal', dataIndex: 'text' },
{ xtype: 'datecolumn', text: 'Date', dataIndex: 'date' }
]
});
Example of simplified response:
[ { text: 'aNode',
id: 522f7dd2323544c424000034,
leaf: true,
date: '2013/10/10' } ]
nothing appears in the Date column, yet the text, leaf, id all work perfectly. I'm clearly missing something. Currently, I'm not using a model because each level is a different model, which isn't supported by default - hence I let ExtJS add all the NodeInterface decoration for me.
The fields configuration goes into the store, not the tree component.
For example, your code is showing the date with this store:
Ext.define('PT.store.DealTree', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'rest',
url: '/dealTree',
reader: { type: 'json', root: 'children', successProperty: 'success' }
},
// fields option here!
fields: ['text', 'date'],
root: {
name: 'children',
expanded: true,
children: [{
text: 'aNode',
id: '522f7dd2323544c424000034',
leaf: true,
date: '2013/10/10'
}]
}
});
Here, store loads data from databse(firebug shows) but all rows are empty...Please help.I cant find the reason behind...
Store
autoLoad: true,
model: 'CustomerService.model.OrderModel',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
proxy: {
type: 'ajax',
url: 'data/Getall.php',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
Here is Model:
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model'
});
here is view:
Ext.define('CustomerService.view.customer.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.mylist',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false
}),
store: 'OrderStore',
forceFit: true, //Fit to container:: columnLines:true, height:132, width:200, autoResizeColumns:true, initComponent:function(){
this.columns = [{
header: 'name',
dataIndex: 'name'
}, {
header: 'Quantity',
dataIndex: 'quantity',
}, {
header: 'Received Quantity',
dataIndex: 'receivedquantity'
}];
this.callParent(arguments);
}
});
If your using a model in your store you should define the fields in your model instead of defining them in your store.
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
});
Ext.data.Store fileds:
This may be used in place of specifying a model configuration. The
fields should be a set of Ext.data.Field configuration objects. The
store will automatically create a Ext.data.Model with these fields. In
general this configuration option should only be used for simple
stores like a two-field store of ComboBox. For anything more
complicated, such as specifying a particular id property or
associations, a Ext.data.Model should be defined and specified for the
model config.
In my ExtJS application I use EditorGridPanel to show data from server.
var applicationsGrid = new Ext.grid.EditorGridPanel({
region: 'west',
layout: 'fit',
title: '<img src="../../Content/img/app.png" /> Приложения',
collapsible: true,
margins: '0 0 5 5',
split: true,
width: '30%',
listeners: { 'viewready': { fn: function() { applicationsGridStatusBar.setText('Приложений: ' + applicationsStore.getTotalCount()); } } },
store: applicationsStore,
loadMask: { msg: 'Загрузка...' },
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: { 'rowselect': { fn: applicationsGrid_onRowSelect} }
}),
viewConfig: { forceFit: true },
tbar: [{
icon: '../../Content/img/add.gif',
text: 'Добавить'
}, '-', {
icon: '../../Content/img/delete.gif',
text: 'Удалить'
}, '-'],
bbar: applicationsGridStatusBar,
columns: [{
header: 'Приложения',
dataIndex: 'ApplicationName',
tooltip: 'Наименование приложения',
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: '<img src="../../Content/img/user.png" />',
dataIndex: 'UsersCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество пользователей приложения',
sortable: true
}, {
header: '<img src="../../Content/img/role.gif" />',
dataIndex: 'RolesCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество ролей приложения',
sortable: true}]
});
When I use JsonStore without reader it works, but when I try to update any field it uses my 'create' url instead of 'update'.
var applicationsStore = new Ext.data.JsonStore({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}],
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
I believe that the problem is that I don't use reader, but when I use JsonReader grid stops showing any data at all.
var applicationReader = new Ext.data.JsonReader({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}]
});
var applicationsStore = new Ext.data.JsonStore({
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
reader: applicationReader,
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
So, does anyone know what the problem might be and how to solve it. The data returned from my server is Json-formated and seams to be ok
{"message":"test","total":2,"applications":[{"ApplicationId":"f82dc920-17e7-45b5-98ab-03416fdf52b2","ApplicationName":"Archivist","UsersCount":6,"RolesCount":3},{"ApplicationId":"054e2e78-e15f-4609-a9b2-81c04aa570c8","ApplicationName":"Test","UsersCount":1,"RolesCount":0}]}
I had the same problem.. I solved it establishing Success Property in the json store and returning success true in the response from my create Method.. here is my code. Hope it helps
var EStore = new Ext.data.JsonStore
({
api: { read: 'getAssignedJobs',
create: 'createAssignedJobs',
update: 'updateAssignedJobs',
destroy: 'destroyAssignedJobs'},
root: 'jobData',
idProperty: 'Id',
autoSave: false,
autoLoad: true,
batch: true,
successProperty: 'success',
writer: new Ext.data.JsonWriter({ encode: true, writeAllFields: true }),
fields: [
{ name: 'Id', type: 'int', mapping: 'Id' },
{ name: 'ResourceId', type: 'int', mapping: 'fitter_id' },
{ name: 'StartDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'EndDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'status', type: 'int' },
{ name: 'job_id', type: 'int' }
]
});
and this is my Create method from Server Side..
public JsonResult createAssignedJobs(string jobData)
{
var Jsondata = (JobfitterToScheduler)new JavaScriptSerializer().Deserialize<JobfitterToScheduler>(jobData);
JobToFitterRepo jobtofitter = new JobToFitterRepo();
if (Jsondata != null)
{
jobtofitter.insertJobToFitter(13, Jsondata.fitter_id, 0, DateTime.Now, DateTime.Now);
return this.Json(new { success = true, jobData = Jsondata });
}
return null;
}
Looking at the source for Ext.data.Api I would say that the verbs are screwed up:
restActions : {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE'
},
For me the create should be a PUT and the update should be a POST. But I guess the Sencha guys have a different idea.
Btw, the source is taken from Ext 3.3.1
I guess you could override the restActions object to work as you would expect:
Ext.data.Api.restActions = {
create : 'PUT',
read : 'GET',
update : 'POST',
destroy : 'DELETE' };
As I've managed to know the Store 'id' config option is depricated.
I think the JsonStore keys off the record id on whether to do a POST vs PUT. So if the id is non-user generated the it will issue a POST, and a PUT otherwise. I am referring to record.id not record.data.id.
Not sure about the first part (my stores make the correct calls with similar code) but I can shed light on the 2nd part of your question.
Ext.data.JsonStore does NOT accept a reader object - it only takes fields and always makes its own reader, as you can see from the source
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
constructor: function(config){
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
and is confirmed as being "as per docs" in Ext 2.x
http://www.sencha.com/forum/showthread.php?57189-2.x-Closed-Bug-in-Ext.data.JsonStore-cconstructor
So if you supply your own reader you must, in this case, make an Ext.data.Store instead (this caught me out too)