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.
Related
I use ExtJS 6.0.0, REST proxy with TreeStore. So when i remove some records from the store store.remove(records), then try to sync changes with server and call store.sync() and nothing happend! A callback function of sync not called.
url: '/admin/pages', return simple nested data in proper format.
View and update operations work well.
I made a simple code fragment just to illustrate the issue:
Ext.define('Pages', {
extend: 'Ext.data.TreeModel',
fields: [
{name: 'id', type: 'int'},
{name: 'parent_id', type: 'int'},
{name: 'title', type: 'string'}
]
});
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
model: 'Pages',
proxy: {
type: 'rest',
url: '/admin/pages',
}
});
var tree = Ext.create('Ext.tree.Panel', {
width: 500,
height: 300,
renderTo: Ext.getBody(),
rootVisible: false,
store: store,
multiSelect: true,
columns: [{
xtype: 'treecolumn',
text: 'title',
sortable: true,
dataIndex: 'title'
}],
tbar: [
{
text: 'Delete',
handler: function () {
var records = tree.getSelection();
store.remove(records); // remove nodes from tree
store.sync(); // do nothing!! WHY?
},
}
]
});
If the store is configured as autoSync:true the record's endEdit method will have already internally caused a save to execute on the store. We only need to save manually when autoSync is false, otherwise, we'll create duplicate transactions.
You need to the call the store.load() after you do the syncing using store.sync()
I am trying to implement a grid with a paging toolbar in ExtJS 5. I get the first page of data, however when advancing the grid will not update new data.
It appears that data.asp page is not being updated with a new starting value to update the .AbsolutePosition property of my recordset. So the grid keeps displaying the 1st page of information.
My code is below...
var gridStore = Ext.create('Ext.data.JSonStore', {
autoLoad: false,
fields: [
{name: 'field1', type: 'int'},
{name: 'field2', type: 'int'}
],
pageSize: 25,
proxy: {
type: 'ajax',
url: 'Data.asp',
reader: {
type: 'json',
rootProperty: 'rows',
totalProperty: 'totalCount',
}
}
});
gridStore.load({
params: {
start: 0,
limit: 25
}
});
grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-Spec',
store: gridStore,
columns: [
{text: 'Field 1', width: 10, sortable: true, dataIndex: 'field1'},
{text: 'Field 2', width: 10, sortable: true, dataIndex: 'field2'}
],
height: 100,
width: 20,
selModel: { mode: 'SINGLE' },
dockedItems: [{
xtype: 'pagingtoolbar',
store: gridStore,
dock: 'bottom',
displayInfo: true
}]
});
Your code has some typos, but in general it looks OK.
Problem may lay on server side - when using ajax proxy, you must implement paging on server side. If you have implemented paging on server side, use some developer tools (for example in Chrome) and see if page number is submitted correctly. You should see start/page number in address (eg: http://fiddle.jshell.net/echo/json/?_dc=1410854522824&page=2&start=5&limit=5).
I made fiddle: http://jsfiddle.net/seur2aLx/9/ you can compare your code to mine (note that Ext.ux.data.reader.Json is there only to fake some data for grid).
Here is the JS fiddle where I just copy pasted the sample example given by ExtJS and Kept only 1 column and that too locked. In this scenario we have 2 errors :
Its making continuous calls to backend till it gets last result. We
can check in fiddler that the calls are getting posted to backend
continously till the last page.
I am not able to scroll(vertical) in grid
Is it bug from ExtJS 4.2.1 Infinite Grid ? is there a solution ?
If we add 1 more column unlocked then its working fine (It will make only 1 request to backend and on scroll it will make next request depending on the scroller position)
Below is the same code :
Ext.onReady(function () {
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', ' ', 'threadid']
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
//remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
}
},
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
// grid columns
columns: [{
id: 'last',
text: "Last Post",
locked: true,
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});
});
I'm using Sencha Architect 3.0.1.
I'm trying to use a Model, a TreeStore, and a TreePanel.
The Model:
Ext.define('User.model.ModelClientList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id' }, { name: 'name' }, { name: 'status' } ],
proxy: {
type: 'direct',
directFn: 'UserClient.listClient',
reader: { type: 'json',root: 'data'}
}
});
The TreeStore:
Ext.define('User.store.StoreClientList', {
extend: 'Ext.data.TreeStore',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'User.model.ModelClientList',
storeId: 'StoreClientList'
}, cfg)]);
}
});
And the TreePanel:
{
xtype: 'treepanel',
height: 250,
itemId: 'MainClient',
width: 400,
title: 'Clients',
hideHeaders: false,
store: 'StoreClientList',
rootVisible: false,
viewConfig: {loadMask: true},
columns: [
{xtype: 'treecolumn',dataIndex: 'name',text: '..'},
{xtype: 'gridcolumn', dataIndex: 'status', text: '..'}
]
}
The json request to UserClient.listClient returns this:
{
"data":[
{"id":1,"name":"Pluto","status":3,"children":[
{"id":35,"name":"Mela","status":2,"leaf":true},
{"id":36,"name":"Pera","status":1,"leaf":true},
{"id":37,"name":"Arancia","status":1,"leaf":true}]},
{"id":2,"name":"Pippo","status":1,"leaf":true},
{"id":3,"name":"Paperino","status":2,"leaf":true}],
"success":true
}
Now, can someone explain me:
(1) Why, when I click on [+] icon of the first node the application does another ajax request instead of expanding what already got from the previous request
(2) Given this initial view:
Why when I click on the [+] it starts going crazy like this:
It was clearly a problem of Sencha Architect.
I rewrote from scratch in a new project the same architecture and now it works as expected.
Also, I noticed that something was going wrong with Architect becouse of simple operation made it show incomprehensible and undebuggable errors (like "Cannot set property 'DirectCfg' of null").
Unfortunately I cannot state that Sencha Architect is mature for large and complex project.. probably not even for small project. what a pity
I have this very basic example where I use a memoryproxy and pagingmemory toolbar to paginate through data (ideally).
This is extjs working with meteor which sends data directly without the need of a res/ajax/jsonp proxy so I must use memory since the data is already in the client long before extjs has even managed to render it's views.
My problem is that I cannot make the pagination to show a real overview of what's in the store. The refresh is not working and the paginate icons are dead since the pagination sees no items in the store after I load them.
I have a working code example up on jsfiddle: http://jsfiddle.net/rXsVG/5/
Full code example:
Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var store = new Ext.data.Store({
model: 'User',
autoLoad: true,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json'
}
}
});
Ext.create('Ext.grid.Panel', {
height: 500,
width: '100%',
renderTo: 'example-grid',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true
},
listeners: {
afterrender: function(grid, evt) {
console.log('Loading data');
var data = [];
for(var i = 1; i < 20; i++) {
data.push({
id: i,
name: 'Ed Spencer '+i
});
}
// Simulate a really busy server call
setTimeout(function(){
grid.getStore().loadData(data);
}, 500);
}
}
});
});
Also if you hit refresh on the paging toolbar all data will be gone. Any ideas?