I am following the code in the link below to page data on a Ext.grid.Panel without success. Data is rendered altogether in the panel without paging. Apparently, the paging toolbar has no data to display but it is correctly configured to the store that has the data and it is hanging as an item of the grid.
I have copied the exact configurations of store and grid from the example below but nothing happened. Why is the data not being paged?
http://jsfiddle.net/jardalu/TE4ah/
This is my store which is linked to the grid and the paging toolbar:
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
pageSize: 50,
remoteSort: true,
storeId: 'Users',
autoLoad: false,
model: 'AICWeb.model.User',
sortOnLoad: false,
proxy: {
type: 'ajax',
type: 'localstorage',
simpleSortMode: true,
reader: {
type: 'xml'
}
},
sorters: {
property: 'email'
}
}, cfg)]);
}
If you are using localstorage you need to implement the PagingMemoryProxy. This should be the only type on the proxy config, and enable the paging config:
proxy: {
type: 'pagingmemory'
enablePaging: true,
...
}
Related
I know how to do it in the store with the backend paging. But would you please give the suggestions about how to do it with the frontend paging?
You can use a memory proxy and set the config property enablePaging to true.
Example:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
pageSize: 5,
data: data,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'json',
rootProperty: 'people'
}
}
});
I created a fiddle for this:
https://fiddle.sencha.com/#view/editor&fiddle/3c6e
I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
I have a large dataset (over 80k records). So I am trying to implement buffer but I couldn't get it work. If I include buffered configuration I am getting error object doesn't support this property. When I remove it, works ok but of course it takes forever to load the data.
Here is my code
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});
Ext.require(['Ext.data.*', 'Ext.grid.*',
'Ext.grid.plugin.BufferedRenderer', 'Ext.ux.grid.FiltersFeature']);
Ext.define('Borrower', {
extend: 'Ext.data.Model',
fields: [{
name: 'Name',
type: 'string'
}, {
name: 'Num',
type:
'string'
}]
});
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
autoLoad: false,
model: 'Borrower',
pageSize: 100,
buffered: true, // getting error object doestn support this property in extjs-all-debug.js
proxy: {
type: 'rest',
url: 'borrBuff.xsp/byName',
reader: {
type: 'json',
root: 'items'
}
}
});
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = Ext.create('Ext.grid.Panel', {
id: 'testgrid',
store: store,
features: [filters],
plugins: 'bufferedrenderer',
columns: [{
text: 'Borr Name',
dataIndex: 'Name',
filterable: true
}, {
text: 'Number',
dataIndex: 'Num'
}]
});
})
Opening the grid in a window on button click
var grid = Ext.getCmp('testgrid');
var win = Ext.create('Ext.Window', {
title: 'Grid Filters Example',
height: 400,
width: 700,
modal: true,
layout: 'fit',
items: grid
}).show();
grid.getStore().load();
Just couldnt figure out what I am doing wrong. Appreciate any help in fixing this issue.
Is there any reason to fetch all the data from server?
I'd recommend using data paging with all the pros, speed being the first one (and some cons too). If you choose to use an infinite grid, it will work well. In fact the basic idea behind infinite grid is fetching data in chunks (data paging in other words).
Filtering works without any problems with this scenario, see sample. It's usually handled by server, which is built to do this kind of tasks.
How can I access custom root property from the store like built in properties such as idProperty, totalProperty, messageProperty etc. Please check the code for ref.
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count',
myCustomproperty: 'fieldInJson' // Somewhat like this
},
filterParam: 'query'
}
});
update: also I could be able to access the property via store
The jsonData object is available from the proxy.reader. You could access this data in the store load event by adding listener:
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count'
},
filterParam: 'query'
},
listeners: {
load: function (store,records,successful,eOpts) {
//older
console.log(store.proxy.reader.jsonData);
//4.2
console.log(store.getProxy().getReader().jsonData);
}
}
});
I am trying to implement Ext.ux.grid.filter.ListFilter using a data store (rather than a hardcoded list) as covered here in the ExtJS 4 API. The data comes in fine and I see a filter option on this column but it just says "Loading..." where the filter options are supposed to be:
I am pretty sure I have this configured as per the API specs but have not had any luck with this. Has anyone implemented this correctly?
The store I use to get the filter options is set up like this:
// get the levels for filtering
var levelStore = Ext.create('Ext.data.Store', {
fields: ['levels'],
proxy: {
type: 'ajax',
url: '../json?queryName=levels',
reader: 'json'
},
autoLoad: true
});
I implemented the filter config in the column like so:
{
header: 'Level',
dataIndex: 'levels',
width: 160,
sortable: true,
filter: {
type: 'list',
store: levelStore
}
Some thoughts I had:
Do I need my filter option data store to have a specific column title, like "name" instead of "level"?
Is this trying to get the store options before they are loaded from ajax, and there is some unspecified way of telling it to load these filter options after the ajax is returned?
Do I need to implement my filter configuration separate from the column config to use this one? (all my other filter configurations, are done right in the column config and seem to work fine)
EDIT:
The json response looks something like this, not sure if it is causing the trouble:
[{"levels":"Level 1"},{"levels":"Level 2"},{"levels":"Level 3"}]
I have it resolved now. I ended up configuring the filter with an empty options array options: [] and then put a callback on the store that adds the filter options to the empty options array. Like this:
The column model (with filter config):
{
header: 'Level',
dataIndex: 'levels',
itemId: 'levels',
width: 160,
sortable: true,
filter: {
type: 'list',
options: [],
phpMode: true,
}
}
The store:
var levelStore = Ext.create('Ext.data.Store', {
fields: ['levels'],
proxy: {
type: 'ajax',
url: '../json?queryName=levels',
reader: 'json'
},
autoLoad: {
callback: function() {
grid.getView().getHeaderCt().child('#levels').initialConfig.filter.options = levelStore.collect('levels');
}
}
});
('grid' is the variable that I named my grid with the filters)
I have the same when using ExtJs 4.0.2a. Ive find whatautoLoadmust false for store and some patch toExt.ux.grid.menu.ListMenu`.
The store:
var levelStore = Ext.create('Ext.data.Store', {
fields: ['levels'],
proxy: {
type: 'ajax',
url: '../json?queryName=levels',
reader: 'json'
},
autoLoad: false
});
And replace show method in ext-4.0.2a/examples/ux/grid/menu/ListMenu.js with:
show : function () {
var lastArgs = null;
console.debug('show filter menu');
return function(){
if (this.loadOnShow && !this.loaded) {
this.store.load();
}
if(arguments.length === 0){
this.callParent(lastArgs);
} else {
lastArgs = arguments;
this.callParent(arguments);
}
};
}()
This is simple
filter: {
type: 'list',
options: levelStore.collect('levels')
}