PDA

View Full Version : Issues with infinite scroll and buffered grid [ExtJS4.1.1/ ExtJS4.2]



iplanit
10 Oct 2013, 2:01 AM
Hi,

I am trying to reproduce this example of buffered grid (http://docs.sencha.com/extjs/4.1.1/extjs-build/examples/grid/buffer-grid.html), but I face two problems:


Minimum page size is 20, less does not render the grid, which I do not understand why, but its fine as I have several records.
When reaching last row, the vertical scroll goes up, so you cannot reach the end and stop the scroller when last row has been reached. Which is a serious problem.

I am using remoteSort and remoteFilter, it works fine with pagingToolbar. In ExtJS4.2 the filter feature does not load for some reason, with 4.1 I have no issues related to features not loading.

Here is my code, I did various tests and copied some book examples but this is still happening, I will appreciate any comment constructive or destructive. Here is my code:



Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/ux_4.1');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.toolbar.Paging',
'Ext.grid.PagingScroller',
'Ext.ux.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.menu.ListMenu',
]);


Ext.define('MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.samplegrid',
title: 'Customers registered',
titleAlign: 'center',

initComponent: function () {

var grouping = Ext.create('Ext.grid.feature.Grouping');
// without this line filters does not autoload ??
var filters = Ext.create('Ext.ux.grid.FiltersFeature');
var store = Ext.create('Ext.data.Store', {
fields: ['id_customer', {name:'firstname',type: 'string'}, 'lastname','email','date_add'],
autoLoad: true,
pageSize: 20,
buffered: true,
remoteSort: true,
remoteFilter: true,

proxy: {
type: 'jsonp',
url: '/sites/jsonp/whatever',
callbackKey:'callback',
reader: {
type: 'json',
root: 'customers',
totalProperty: 'total',
},
}
});
// should not be necessary store.guaranteeRange(0,19);
var filters = {
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'string',
dataIndex: 'firstname'
},{
type:'numeric',
dataIndex: 'id_customer'
}]
};

Ext.apply(this, {
height: '400px',
minHeight: '200px',
width: '100%',
frame: false,
plugins: [],
features: [grouping,filters],
store: store,
verticalScroller: {
xtype: 'paginggridscroller',
/*
numFromEdge: 10,
trailingBufferZone: 10,
leadingBufferZone: 10
*/
},
invalidateScrollerOnRefresh: false,
disableSelection: true,
loadMask: true,
stripeRows: true,
columnLines: true,
title: 'Customers registered',
titleAlign: 'center',
columns: [{
id: 'id',
text: 'ID',
width: 80,
sortable: true,
dataIndex: 'id_customer',
}, {
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'firstname',
field: {
xtype: 'textfield'
},
tdCls: 'titleCase' ,
},
{
text: 'Lastname',
flex: 1,
sortable: true,
dataIndex: 'lastname',
field: {
xtype: 'textfield'
},
filter: { type: 'string'},
tdCls: 'titleCase'
}, {
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
renderer:function(value){
return value.toLowerCase();
},
field: {
xtype: 'textfield'
},
},{
text: 'Date registered',
flex: 1,
sortable: true,
dataIndex: 'date_add',
field: {
xtype: 'datecolumn',
},
}],
});

this.callParent(arguments);
},
listeners:{
'afterrender': function(grid){
console.log("after render", grid);
}
},
});


Here is the HTML using CDN to load ExtJS framework and CSS



<!DOCTYPE html>
<html lang="en">
<title>Grid example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<!-- start: Meta -->
<meta charset="utf-8">
<title>Prestastats dashboard - Log in</title>
<meta name="description" content="">
<meta name="author" content="iPLANiT">
<meta name="keyword" content="">
<!-- end: Meta -->

<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->

<!-- start: CSS -->
<link id="bootstrap-style" href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="/css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="/css/style-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->

<!-- modernizer -->
<script src="/js/modernizr.custom.js"></script>
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="/css/ie.css" rel="stylesheet">
<![endif]-->

<!--[if IE 9]>
<link id="ie9style" href="/css/ie9.css" rel="stylesheet">
<![endif]-->

<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<style>
table form { margin-bottom: 0; }
form ul { margin-left: 0; list-style: none; }
.error { color: red; font-style: italic; }
body { padding-top: 0px; }
</style>
<body>
<noscript>
<div class="alert alert-block span11">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
</div>

</noscript>
<!--content -->
</div>

<!-- products grid -->
<div style="width: 700px ;
margin-left: auto ;
margin-right: auto ;">
<h1>Customers</h1>
<div id="grid"></div>
</div>
<!-- here we load the previous js -->
<script src="/js/app.js"></script>
</body>
</html>


In the page, I also load a few plugins like jQuery and many others, however I did I test with no other js in the page,etc. And it makes no difference. The scrollbar still does not stop in last row.

Is there something I am doing wrong to render an infinite scrolling grid or a buffered grid in the code ? everything works fine except the scrollbar when using ExtJS4.1, with 4.2 the filter feature causes problems too.

I did tests with no features in the grid, and the problem with the buffered grid is not solved. Does not seem to have anything to do with remote filtering or remote sorting, however, your online example only works with local data.

Update: this video (https://docs.google.com/file/d/0B0ClmYxwWvBdZlhEaFR2Y2diUmc/edit?usp=sharing) shows the issue, its a copy of the example in Sencha docs. You can watch it with an HTML5 browser or VLC.

Kind regards

ettavolt
10 Oct 2013, 2:10 AM
As I know, there is no implementation for buffered grouping grid.

iplanit
10 Oct 2013, 2:18 AM
First of all thanks for your reply. I did try the same without grouping.

Actually, regardless of that, the issue still happens. But I think there is buffered or infinite scroll grids with grouping enabled. In fact, I have one working myself (no remote grouping). The issue is with the scroll in the last row. So I think what you mention is not related with the issue in my post.

Awaiting any other comment that may help to solve the problem.

Thanks in advance.