PDA

View Full Version : BufferedStore Grid bugs: Grouping + Sorting



juanbill
1 Jun 2014, 8:01 PM
Hi:

When using Ext.data.BufferedStore I noticed 2 bugs and after searching a bit I am not sure if they are been looked at.


Firstly with grouping. The expand and collapse icons are not present with BufferedStored. I modified the infinite scroll example and compared with a normal Ext.data.Store example.

We have made the code on the server side to output grouped rows, so `remote grouping' is already present (not present in example code below as it calls the sencha server). Would like the expand and collapse icon as we want it to start collapsed.

Here is the code with the BufferedStore:



Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', './ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer',
'Ext.ux.form.SearchField'
]);

Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
mapping: 'topic_title'
}, {
name: 'forumtitle',
mapping: 'forum_title'
}, {
name: 'forumid',
type: 'int'
}, {
name: 'username',
mapping: 'author'
}, {
name: 'replycount',
mapping: 'reply_count',
type: 'int'
}, {
name: 'lastpost',
mapping: 'post_time',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'topic_id'
],
idProperty: 'post_id'
});



// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', { // BufferedStore / Store
id: 'store',
model: 'ForumThread',
//groupField: 'username',
// The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we
// are forced to use 50 here instead of a possibly more efficient value.
pageSize: 50,
// This web service seems slow, so keep lots of data in the pipeline ahead!
leadingBufferZone: 1000,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/topics-remote.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,

// Parameter name to send filtering information in
filterParam: 'query',

// The PHP script just use query=<whatever>
encodeFilters: function(filters) {
return filters[0].value;
}
},
listeners: {
totalcountchange: onStoreSizeChange
},
remoteFilter: true,
remoteSort: true,
autoLoad: true
});

function onStoreSizeChange() {
grid.down('#status').update({count: store.getTotalCount()});
}

function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?p={1}" target="_blank">{0}</a>',
value,
record.getId()
);
}

window.onresize = function updateGridSize(){
grid.setY($(window).height()*0.5);
grid.setWidth($(window).width());
grid.setHeight($(window).height()*0.5);
}

var grid = Ext.create('Ext.grid.Panel', {
width: $(window).width(),
height: $(window).height()*0.5,
collapsible: false,
title: 'Patient List',
store: store,
loadMask: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
width: 400,
fieldLabel: 'Search',
labelWidth: 50,
xtype: 'searchfield',
store: store
}, '->', {
xtype: 'component',
itemId: 'status',
tpl: 'Matching threads: {count}',
style: 'margin-right:5px'
}]
}],
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false,
emptyText: '<h1 style="margin:20px">No matching results</h1>'
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: true
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: true
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true
}],
features: [{
ftype: 'grouping',
startCollapsed: true,
}],
tbar: {
items: [
{text:'Group by Author', handler:function(){store.group({property:'username', direction:'ASC'})}},
{text:'Clear Grouping', handler:function(){store.clearGrouping()}}
]
},
renderTo: 'bottomContent',
});
});


Secondly, in the above example I have set `remoteSort: true' however when I check the network console, there is no `sort' parameter been sent across the network.

After searching around, it seems the grouping bug with the BufferedStore have been around since 4.1.1 (http://www.sencha.com/forum/showthread.php?240198-Expand-Collapse-buttons-issue-in-grouping-grid-with-Buffered-store).

Would the next beta release address the above issue? as both the grouping and remote sorting is our deciding factor of getting a license.

Thanks
J.

juanbill
2 Jun 2014, 5:33 PM
Hi:

I have just tested the latest version 5.0.0.970 using BufferedStore and remoteSort.
I am unable to see the param `sort' been sent across the network.

Do I need to create sorters for each column like this thread?

http://www.sencha.com/forum/showthread.php?284772

If so, how would I do it for multiple columns as I want the ability to sort by more than one column.

I also noticed that the infinite scroll example is now not found. http://dev.sencha.com/ext/5.0.0/examples/grid/infinite-scroll.html




Thanks.

J.

juanbill
2 Jun 2014, 9:18 PM
Hi:

I created the sorters for the Ext.data.BufferedStore with remoteSort: true,

I can see the param 'sort' being sent across network and direction.
However when I goto the column header and select sort in another direction, it doesn't change the param of direction.

Seems like its set to the default

code



sorters: [
{ property: 'NAME' , direction: 'ASC'},
{ property: 'DOB' , direction: 'DSC'},
],
});


any leads?

Thanks
J.

n00b
15 Jun 2014, 12:37 AM
+1, doesn't work, no sort property/order is sent with ajax unless you explicitly set :

sorters: [{
property: 'colname',

direction: 'DESC'
}],

in the Ext.data.BufferedStore but still, with this piece of code, only the specified column is sorted, the others are ignored even if the sort arrow appears on column headers.

Visible in the example here : http://dev.sencha.com/extjs/5.0.0/ex...red-store.html


(http://dev.sencha.com/extjs/5.0.0/ex...red-store.htmlSame)Same subject on this thread : http://www.sencha.com/forum/showthread.php?284772-remoteSort-doesn-t-work-with-BufferedStore