PDA

View Full Version : CheckboxModel on grid with filter or PagingToolbar



jonathanglima
18 Nov 2011, 6:09 AM
Hello.

I was trying to use a CheckboxModel on a dynamic grid panel with paging and filterFeature (see ux from 4.0.7) but everytime I page and/or filter, it does not maintain the selected rows I checked on CheckboxModel.

Is this a bug? Is this normal? :-?

What I'm really trying to do is mark a list of data so that the user can do a relationship.
Example:
I have a list of users and a list of user groups. Inside a user group form, I'd like to have the users list so that I can check what users I want inside that user group.

I'll post an example of the code below.

My example:


Ext.define('My.Model', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'status'
],
idProperty: 'id'
});

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
pageSize: 10,
model: 'My.Model',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'teste.json',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
},
simpleSortMode: true
},
sorters: [{
property: 'status',
direction: 'ASC'
}]
});

var filters = {
ftype: 'filters',
encode: true,
local: false,
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'name'
}, {
type: 'boolean',
dataIndex: 'status'
}]
};


var grid = Ext.create('Ext.grid.Panel', {
store: store,
features: [filters],
id: 'myGrid',
renderTo: Ext.getBody(),
title: 'My Grid',
width: 700,
selModel: Ext.create('Ext.selection.CheckboxModel', {
mode: 'SIMPLE'
}),
columns: [
{
text : 'Id',
flex: 0.2,
sortable: true,
dataIndex: 'id',
filterable: true
},{
text : 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
filterable: true
},{
text : 'Status',
flex: 0.4,
sortable: true,
renderer: function(val) {
if(val == '1') {
return 'On';
} else {
return 'Off';
}
},
dataIndex: 'status',
filterable: true
}
],
viewConfig: {
stripeRows: true
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Showing from {0} to {1}. Total: {2}',
emptyMsg: "Empty grid!"
})
});



Store's JSON that is loaded in the example above:


{
"success":"1",
"total":"16",
"data":[{
"id":"1",
"name":"Administrador",
"status":"1"
},{
"id":"20",
"name":"\\zxcaf",
"status":"1"
},{
"id":"19",
"name":"rgzxfw345wtsr",
"status":"1"
},{
"id":"18",
"name":"zxcfgq345",
"status":"1"
},{
"id":"17",
"name":"retzxdfwq345",
"status":"1"
},{
"id":"16",
"name":"perfil de teste",
"status":"1"
},{
"id":"12",
"name":"\u00e7a\u00e3\u00e3\u00e3\u00f3\u00ed\u00ec",
"status":"1"
},{
"id":"11",
"name":"\u00c3\u00a7\u00c3\u00a3\u00c3\u00a3\u00c3\u00a3\u00c3\u00a3\u00c3\u00a3\u00c3\u00b3\u00c3\u00ad\u00c3\u00ac",
"status":"1"
},{
"id":"10",
"name":"\u00e3\u00f3\u00ed\u00e7\u00e7\u00e7\u00e7",
"status":"1"
},{
"id":"28",
"name":"zxcfgq345",
"status":"1"
}]
}


Thx in advance.

tobiu
18 Nov 2011, 6:41 AM
it is the default behaviour of the framework to only keep the selections of the currently active page.

I recommend to search the forums via:
www.sencha.com/forum/search.php

for this, since this topic popped up before and as far as i remember there was a custom routine to save the checked records somewhere out there :)

jonathanglima
18 Nov 2011, 8:52 AM
Yeah, I've been searching for hours and still can't find an answer that I can apply at extjs 4.0.7.
Still, I know that I could do it manually using listeners, but the paging/filtering fires the store.load or something like that and the store fires the selectionModel deselect all. That fires the deselect listener, stopping me from using the deselect listener to control the selected items manually through it.

Any ideas?

jonathanglima
18 Nov 2011, 12:33 PM
I'm trying to use the beforeload event from the store, but when I paginate away, the grid deselects all my rows before the beforeload event. Any ideas on how to deal with that?

tobiu
18 Nov 2011, 12:44 PM
http://www.sencha.com/forum/showthread.php?61282-Ext.ux.grid.RowSelectionPaging

this ux was written for ext 2, i think at the last page there is a first version for ext 4.
at least it should point you into the right direction.

jonathanglima
21 Nov 2011, 5:43 AM
http://www.sencha.com/forum/showthread.php?61282-Ext.ux.grid.RowSelectionPaging

this ux was written for ext 2, i think at the last page there is a first version for ext 4.
at least it should point you into the right direction.

It points, but it doesn't work.

I think we could ask this feature for the sencha dev team.