PDA

View Full Version : [solved] Select records with CheckboxSelectionModel and Filters



mfrancey
11 Mar 2011, 6:16 AM
Hi,

I use JSON data store
I have an EditorGridPanel working fine with filters.
I use CheckboxSelectionModel for selecting all records.
I use an event: when i select a row, I fire content to a panel (code below):



grid.getSelectionModel().on('rowselect', function (sm, rowIdx, r) {
Ext.getCmp('detailsPanel').body.load({
url: 'foo.php',
scripts: true,
params: {
gridId: rowIdx,
id: grid.getSelectionModel().getSelected().get('id')
}
});
});I have 2 problems:



When I select all the records through the header checkbox, it makes as many request as the number of row, which could be very long and not useful. Would it be possible to disable the on('rowselect'... only when I use the header checkbox?
I have a total of 27 records (not filtered)

When I filter datas, the JSON response is correct
ex: {"total":"11","data":[{ the_datas }]}

Then when I click on the "check all" checkbox in the header, the JSON response is
{"total":"11","data":[{ the_datas }]} and even if I see the correct filtered datas in the grid, every row is checked (I can see it by removing the filter)

Thanks for your help, I've been searching for a long time...


Here's the full code:


var selectionPaging = null;
Ext.onReady(function () {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var selectionPaging = new Ext.ux.grid.RowSelectionPaging();
var sm = new Ext.grid.CheckboxSelectionModel();
var recPerPageCombo_value = parseInt("25"); /* JSON RECORD */
var jsonRecord = new Ext.data.Record.create([{
name: 'id',
type: 'int'
}, {
name: 'company',
type: 'string'
}, {
name: 'price',
type: 'float'
}, {
name: 'date',
dateFormat: 'Y-m-d H:i:s',
type: 'date'
}, {
name: 'visible',
type: 'boolean'
}, {
name: 'size',
type: 'string'
}]); /* READER */
var reader = new Ext.data.JsonReader({
fields: jsonRecord,
storeId: 'jobApplicationsStore',
idProperty: 'id',
root: 'data',
totalProperty: 'total',
remoteGroup: true,
remoteSort: true
}); /* PROXY */
var proxy = new Ext.data.HttpProxy({
url: '/jsonDatas.php',
method: 'POST'
}); /* SORT INFO */
var sortInfo = new Object({
field: 'visible',
direction: 'ASC'
}); /* BASE PARAMS */
var baseParams = new Object({
clid: 362,
dummy: 'dummy'
}); /* GROUPING STORE */
var store = new Ext.data.GroupingStore({
proxy: proxy,
reader: reader,
sortInfo: sortInfo,
baseParams: baseParams,
groupField: 'visible',
groupOnSort: true,
remoteSort: true
}); /* COLUMNS FILTERS */
var colFilters = new Object([{
dataIndex: 'id',
type: 'numeric'
}, {
dataIndex: 'company',
type: 'string'
}, {
dataIndex: 'price',
type: 'numeric'
}, {
dataIndex: 'date',
type: 'date'
}, {
dataIndex: 'size',
type: 'list',
options: ['small', 'medium', 'large', 'extra large']
}, {
dataIndex: 'visible',
type: 'boolean'
}]); /* FILTERS */
var filters = new Ext.ux.grid.GridFilters({
filters: colFilters,
encode: false,
local: false
}); /* COLUMNS MODEL */
var columns = new Object([sm,
{
id: 'id',
dataIndex: 'id',
name: 'id',
type: 'int',
header: 'Id',
width: 20,
sortable: true,
filterable: true
}, {
id: 'company',
dataIndex: 'company',
name: 'company',
type: 'string',
header: 'Company',
sortable: true,
filterable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
id: 'price',
dataIndex: 'price',
name: 'price',
width: 40,
type: 'float',
header: 'Price [CHF]',
sortable: true,
filterable: true
}, {
id: 'date',
dataIndex: 'date',
name: 'date',
dateFormat: 'Y-m-d H:i:s',
width: 40,
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
type: 'date',
header: 'Date',
sortable: true,
filterable: true
}, {
id: 'visible',
dataIndex: 'visible',
name: 'visible',
width: 40,
type: 'boolean',
header: 'Visible',
sortable: true,
filterable: true
}, {
id: 'size',
dataIndex: 'size',
name: 'size',
width: 40,
type: 'string',
header: 'Size',
sortable: true,
filterable: true
}]);
var colModel = new Ext.grid.ColumnModel(columns); /* COMBOS BOXES */
var recPerPageCombo = new Ext.form.ComboBox({
value: recPerPageCombo_value,
id: 'recPerPageCombo',
name: 'recPerPageCombo',
stateId: 'recPerPageCombo',
width: 40,
store: new Ext.data.ArrayStore({
fields: ['id'],
data: [
['10'],
['25'],
['50'],
['100'],
['200'],
['500']
]
}),
mode: 'local',
listWidth: 50,
triggerAction: 'all',
displayField: 'id',
valueField: 'id',
editable: false,
stateful: true,
stateEvents: ['select'],
getState: function () {
return {
value: this.getValue()
};
},
applyState: function (state) {
this.setValue(state.value);
}
}); /* PAGING TOOLBAR */
var bbar = new Ext.PagingToolbar({
store: store,
beforePageText: '',
afterPageText: '/ {0}',
pageSize: parseInt(recPerPageCombo.value, 10),
displayInfo: true,
displayMsg: '{0}-{1} / {2}',
plugins: [filters],
stateId: 'gridbbar',
items: ['-', recPerPageCombo, '/ page ']
});
recPerPageCombo.on('select', function (combo, record) {
bbar.pageSize = parseInt(record.get('id'), 10);
bbar.doLoad(bbar.cursor);
bbar.changePage(1);
}, this); /* GROUPING VIEW */
var view = new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}); /* GRID */
var grid = new Ext.grid.EditorGridPanel({
id: 'mygrid',
title: 'Le titre du tableau (poil au dos)',
stateful: true,
stateId: 'mygrid',
header: true,
border: true,
frame: true,
loadMask: true,
store: store,
stripeRows: true,
colModel: colModel,
minWidth: 720,
loadMask: false,
plugins: [filters, selectionPaging],
autoExpandColumn: 'company',
region: 'center',
sm: sm,
listeners: {
render: {
fn: function () {
store.load({
params: {
start: 0,
limit: parseInt(recPerPageCombo.value, 10)
}
});
}
}
},
view: view,
bbar: bbar
});
/* BBAR BUTTONS */
var answer = new Ext.Button({
id: 'answer',
pressed: true,
text: 'Answer:',
cls: 'x-btn-text-icon ext-js-answer',
handler: function () {
var ids = "";
for (var i = 0; i < selectionPaging.getSelections().length; i++) {
if (i > 0) {
ids += ',';
}
ids += selectionPaging.getSelections()[i].id;
}
var params = [{
var1: 'value 1',
var2: 'value 2',
ids: ids
}];
win3('foo.php', {
var1: 'value 1',
var2: 'value 2',
ids: ids
}, 800, 400, true, false, 0, 0, 'le titre de la fenêtre')
}
});
var forward = new Ext.Button({
id: 'forward',
pressed: true,
text: 'Forward:',
cls: 'x-btn-text-icon ext-js-forward',
handler: function () {
var ids = "";
for (var i = 0; i < selectionPaging.getSelections().length; i++) {
if (i > 0) {
ids += ',';
}
ids += selectionPaging.getSelections()[i].id;
}
var params = [{
var1: 'value 1',
var2: 'value 2',
ids: ids
}];
win3('foo.php', {
var1: 'value 1',
var2: 'value 2',
ids: ids
}, 800, 400, true, false, 0, 0, 'le titre de la fenêtre')
}
});
var classify = new Ext.Button({
id: 'classify',
pressed: true,
text: 'Classify:',
cls: 'x-btn-text-icon ext-js-classify',
handler: function () {
var ids = "";
for (var i = 0; i < selectionPaging.getSelections().length; i++) {
if (i > 0) {
ids += ',';
}
ids += selectionPaging.getSelections()[i].id;
}
var params = [{
var1: 'value 1',
var2: 'value 2',
ids: ids
}];
win3('foo.php', {
var1: 'value 1',
var2: 'value 2',
ids: ids
}, 800, 400, true, false, 0, 0, 'le titre de la fenêtre')
}
});
grid.getBottomToolbar().add(['->', '-', '<strong>With selected:</strong>', answer, forward, classify, '-']); /* ACCORDION PANELS */
var candidateProfile = new Ext.Panel({
id: 'candidateProfile',
title: 'Profil complet',
html: '&lt;L\'empty panel&gt;',
border: false,
cls: 'empty',
autoScroll: true,
style: {
backgroundColor: '#fff'
}
});
var motivationMessage = new Ext.Panel({
id: 'motivationMessage',
title: 'Lettre de motivaion',
html: '&lt;L\'empty panel&gt;',
border: false,
cls: 'empty',
style: {
backgroundColor: '#fff'
},
autoScroll: true
});
var jobApplicationDocs = new Ext.Panel({
id: 'jobApplicationDocs',
title: 'Documents (CV, certificats)',
html: '<div class=\"extjsacc_content\"><em>Veuillez sélectionner une postulation dans le tableau ci-contre afin de consulter les documents (CV, certificats, etc.)</em></div>',
border: false,
cls: 'empty',
autoScroll: true,
style: {
backgroundColor: '#fff'
}
});
var jobApplicationProcessing = new Ext.Panel({
id: 'jobApplicationProcessing',
title: 'Traitement du dossier',
html: '<div class=\"extjsacc_content\"><em>Veuillez sélectionner une postulation dans le tableau ci-contre afin de la traiter</em></div>',
border: false,
cls: 'empty',
autoScroll: true,
style: {
backgroundColor: '#fff'
}
}); /* DETAILS PANELS */
var detailsPanel = new Ext.Panel({
id: 'detailsPanel',
title: 'Dossier de postulation',
region: 'east',
collapsible: true,
autoScroll: true,
split: true,
width: 500,
minWidth: 400,
margins: '0 10 0 0',
layout: 'accordion',
layoutConfig: {
animate: true
},
frame: true,
style: {
backgroundColor: 'transparent'
},
items: [candidateProfile, motivationMessage, jobApplicationDocs, jobApplicationProcessing]
}); /* VIEWPORT PANELS */
var shim_north = new Ext.Panel({
id: 'shim_north',
region: 'north',
height: 100,
border: false,
unstyled: true,
style: {
backgroundColor: 'transparent'
}
});
var shim_west = new Ext.Panel({
id: 'shim_west',
region: 'west',
width: 10,
border: false,
unstyled: true,
style: {
backgroundColor: 'transparent'
}
});
var shim_south = new Ext.Panel({
id: 'shim_south',
region: 'south',
height: 50,
border: false,
unstyled: true,
style: {
backgroundColor: 'transparent'
}
});
var viewport = new Ext.Viewport({
id: 'viewport',
title: 'Gestion des postulations',
layout: 'border',
frame: true,
style: {
backgroundColor: 'transparent'
},
renderTo: Ext.getBody(),
items: [shim_north, shim_west, shim_south, grid, detailsPanel]
});

grid.getSelectionModel().on('rowselect', function (sm, rowIdx, r) {
Ext.getCmp('candidateProfile').body.load({
url: 'foo.php',
scripts: true,
params: {
gridId: rowIdx,
id: grid.getSelectionModel().getSelected().get('id')
}
});
});
});

mfrancey
14 Mar 2011, 1:45 AM
Would it be possible to pass the filters to the CheckboxSelectionModel ?

Something like Ext.grid.CheckboxSelectionModel(filters_params_here)

Didn't find a working solution for the moment. Thanks for helping...

mfrancey
14 Mar 2011, 2:41 AM
May be I've been following a wrong way...

Should I simply uncheck the "hidden" rows (the filtered ones...)? But how to do this? An example would be welcome

mfrancey
14 Mar 2011, 6:10 AM
That was the trick: {originalSelectAll: true} for the RowSelectionPaging
and remoteSort: false !

var selectionPaging = new Ext.ux.grid.RowSelectionPaging({originalSelectAll: true});