Infinite Grid only 1 column Issues - extjs

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()
});
});

Related

EXT JS 4 Grid with Filter and Pagination

I have a ext js grid with pagination and filtering on browser side. for example if there are 3 pages and i apply the filter to display last page records. Then it shows first and 2nd page blank and the filtered data is displayed on the last page. I have copied the code below for your reference. Can you please suggest what is wrong here?
<script>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/extjs4/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
Ext.Loader.setConfig({enabled: true});
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.tip.QuickTipManager.init();
var data2='jsonData from Server';
var mod2= Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [
{name:'ID',mapping:'ID'} ,
{name:'Creation Date/Time',mapping:'Creation Date/Time'} ,
{name:'Unit',mapping:'Unit'}
]
});
var storeMain2 = Ext.create('Ext.data.Store', {
model: mod2,
autoLoad: false,
buffered: false,
pageSize: 10,
data: Ext.decode(data2),
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'user'
//totalProperty: 'totalCount'
}
},
remoteSort:true,
remoteFilter:true,
remoteGroup:true
});
var filters = {
ftype: 'filters',
autoReload: false,
encode: true,
local: true
};
// grid with pagination
var grid2 = Ext.create('Ext.grid.Panel', {
stateful: true,
multiSelect: true,
enableColumnMove:false,
store: storeMain2,
stateId: 'stateGrid',
autoHeight: true,
autoWidth: true,
title: ' ',
columnLines: true,
renderTo: Ext.getBody(),
features: [filters],
filterable: true,
columns: [
{
text : 'ID',
sortable : true,
align:'center',
width: 70,
dataIndex: 'ID',
filter: { type: 'numeric'}
}, {
text : 'Creation Date/Time',
width: 150,
sortable : true,
align:'center',
dataIndex: 'Creation Date/Time'
}, {
text : 'Unit',
width: 150,
sortable : true,
align:'center',
dataIndex: 'Unit'
}
],
listeners: {
'afterrender':function(e){
var gridthWidth = this.getWidth();
this.setWidth(gridthWidth);
this.setAutoScroll(true);
},
'columnresize': function(e){
var gridthWidth = this.getWidth();
this.setWidth(gridthWidth);
this.setAutoScroll(true);
} ,
render: function(e) {
this.store.on('load',function(){
});
}
},
bbar: Ext.create('Ext.PagingToolbar', {
store: storeMain2,
displayInfo: true,
emptyMsg: ""
})
} );
});
</script>
As your question, the issue caused because of your store has two limitation to display the data.
The first is coming from pagination, the pagination has the property defined for only display one page size data (in your case maximum 10). Because of pagination limitation, the filter function is only applied to 10 records under the current page.
The filter is another property for the store. If you did not manually remove it when you switch to another page, it will apply to every page. As your description, I believe in your page 1 and page 2 do not have any record meets your filter condition only page 3 has. That is the reason you can only see the record in page 3.
If you want to do filter for all the records (page 1 + 2 + 3) and show all the filtered records in page 1, you'd better to do the function through server side. Pass the filter condition to server, and get the filtered data back and load these data into the store.
Hope the answer could help. If you have any question, let me know.
You have to let the pagingtoolbar know that there is filtering.
Add the following to the pagingToolbar config (same as you did in the gridPanel):
plugins: [filters]

ExtJS Paging Grid will not advance

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).

Extjs grid cant get store buffered working

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.

A million of rows in ExtJS infinite grid (strange effect)

I've made an application with ExtJS infinite grid like this example.
My application receives data from a database.
It worked perfectly with the small amounts of rows (by 100000).
But now a database contains one million of rows. And I observed a strange effect: data are not loaded completely. Each time the grid shows different number of rows (maximum 859176). But I need to load all rows from a database.
Does anybody know how to solve this problem?
My code:
Ext.require ([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function () {
Ext.define('DoctorsList', {
extend: 'Ext.data.Model',
fields: [
'id', 'fio', 'specialization', 'photo'
],
idProperty: 'id'
});
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'DoctorsList',
buffered: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: 'get_doctors.jsp',
reader: {
root: 'data',
totalProperty: 'total'
}
},
autoLoad: true
});
Ext.create('Ext.grid.Panel', {
height: 600,
title: 'Doctor\'s list',
collapsible: true,
store: store,
columns: [
{
text: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},
{
text: 'Full name',
dataIndex: 'fio',
width: 300,
sortable: true
},
{
text: 'Specialization',
dataIndex: 'specialization',
width: 150,
sortable: true
},
{
text: 'Photo',
dataIndex: 'photo',
width: 100,
sortable: false,
renderer: function(value) {
return '<img width="100" src="images/' + value + '" />';
}
}
],
renderTo: 'doctors-list'
});
});
ADDITION:
Here you can see last request and response to get_doctors.jsp. You can notice there that the field 'total' has number 1005000 but last row has ID 423165. And here is the screen of MS SQL database selection. You can see there that used table has 1005000 rows totally.
ADDITION 2:
This bug appears in Firefox and IE8, but it does not appear in Opera, Google Chrome and Safari.
Thanks!

infinite scroll not rendering

I'm trying to use ExtJS4.1 infinite scroll feature.
The ajax calls are being made, the data returned, but only the first page loads.
What am I doing wrong? When I scroll down nothing happens.
My code:
Store:
Ext.define('BM.store.Tests', {
extend: 'Ext.data.Store',
model: 'BM.model.Test',
storeId: 'Tests',
buffered: true,
leadingBufferZone: 50,
pageSize: 25,
purgePageCount: 0,
autoLoad: true
});
The proxy is in the model:
proxy: {
type: 'ajax',
api: {
create: '../webapp/tests/create',
read: '../webapp/tests',
update: '../webapp/tests/update'
},
reader: {
type: 'json',
root: 'tests',
successProperty: 'success'
}
}
The grid:
Ext.define('BM.view.test.MacroList', {
extend: 'Ext.grid.Panel',
alias:'widget.macro-test-list',
store: 'Tests',
// loadMask: true,
// selModel: {
// pruneRemoved: false
// },
// viewConfig: {
// trackOver: false
// },
verticalScroller: {
numFromEdge: 5,
trailingBufferZone: 10,
leadingBufferZone: 20
},
initComponent: function() {
this.columns = [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'datecolumn',
dataIndex: 'created',
text: 'Date Created',
format: 'd-M-Y'
},
{
xtype: 'datecolumn',
dataIndex: 'changed',
text: 'Last Updated',
format: 'd-M-Y'
}
];
this.callParent(arguments);
}
The only thing that's different between my implementation and the one in the examples, is that my grid is not rendered to the body.
The viewport contains a border layout.
The grid is part of the west region panel:
{
collapsible: true,
region: 'west',
xtype: 'macro',
width: 500
}
The macro panel:
Ext.define('BM.view.Macro', {
extend: 'Ext.panel.Panel',
alias: 'widget.macro',
title: 'Tests',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
id: "macro-test-list-id",
xtype: 'macro-test-list',
flex: 1
},
{
id: "macro-report-panel-id",
xtype: 'macro-report-list',
title: false,
flex: 1
},
{
id: "macro-report-list-id-all",
xtype: 'macro-report-list-all',
flex: 1,
hidden: true,
layout: 'anchor'
}
]
});
I've tried many many things, changing layouts, giving the grid a fixed height, etc...
Nothing works, scroll down, and the grid doesn't refresh.
One other piece of information: The DB contains 53 records of data. I'm getting the 3 ajax calls, but only the first 25 records appear (as I requested).
Any thoughts?
It sounds like you might be forgetting to put the total property in the server's JSON response. Does your answer have a structure like this:
{
"total": 53,
"tests": [(...)]
}
The totalProperty name is defined in the Reader configuration and defaults to total.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-cfg-totalProperty
You need to upgrade to ExtJS 4.2!

Resources