Results 1 to 4 of 4

Thread: [solved] Select records with CheckboxSelectionModel and Filters

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    36

    Default [solved] Select records with CheckboxSelectionModel and Filters

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


    PHP Code:
        grid.getSelectionModel().on('rowselect', function (smrowIdxr) {
            
    Ext.getCmp('detailsPanel').body.load({
                
    url'foo.php',
                
    scriptstrue,
                
    params: {
                    
    gridIdrowIdx,
                    
    idgrid.getSelectionModel().getSelected().get('id')
                }
            });
        }); 
    I have 2 problems:


    1. 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?
    2. 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:
    PHP 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({
            
    fieldsjsonRecord,
            
    storeId'jobApplicationsStore',
            
    idProperty'id',
            
    root'data',
            
    totalProperty'total',
            
    remoteGrouptrue,
            
    remoteSorttrue
        
    }); /* 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({
            
    clid362,
            
    dummy'dummy'
        
    }); /* GROUPING STORE   */
        
    var store = new Ext.data.GroupingStore({
            
    proxyproxy,
            
    readerreader,
            
    sortInfosortInfo,
            
    baseParamsbaseParams,
            
    groupField'visible',
            
    groupOnSorttrue,
            
    remoteSorttrue
        
    }); /* 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({
            
    filterscolFilters,
            
    encodefalse,
            
    localfalse
        
    }); /* COLUMNS MODEL    */
        
    var columns = new Object([sm,
        {
            
    id'id',
            
    dataIndex'id',
            
    name'id',
            
    type'int',
            
    header'Id',
            
    width20,
            
    sortabletrue,
            
    filterabletrue
        
    }, {
            
    id'company',
            
    dataIndex'company',
            
    name'company',
            
    type'string',
            
    header'Company',
            
    sortabletrue,
            
    filterabletrue,
            
    editor: new Ext.form.TextField({
                
    allowBlankfalse
            
    })
        }, {
            
    id'price',
            
    dataIndex'price',
            
    name'price',
            
    width40,
            
    type'float',
            
    header'Price [CHF]',
            
    sortabletrue,
            
    filterabletrue
        
    }, {
            
    id'date',
            
    dataIndex'date',
            
    name'date',
            
    dateFormat'Y-m-d H:i:s',
            
    width40,
            
    rendererExt.util.Format.dateRenderer('d/m/Y'),
            
    type'date',
            
    header'Date',
            
    sortabletrue,
            
    filterabletrue
        
    }, {
            
    id'visible',
            
    dataIndex'visible',
            
    name'visible',
            
    width40,
            
    type'boolean',
            
    header'Visible',
            
    sortabletrue,
            
    filterabletrue
        
    }, {
            
    id'size',
            
    dataIndex'size',
            
    name'size',
            
    width40,
            
    type'string',
            
    header'Size',
            
    sortabletrue,
            
    filterabletrue
        
    }]);
        var 
    colModel = new Ext.grid.ColumnModel(columns); /* COMBOS BOXES     */
        
    var recPerPageCombo = new Ext.form.ComboBox({
            
    valuerecPerPageCombo_value,
            
    id'recPerPageCombo',
            
    name'recPerPageCombo',
            
    stateId'recPerPageCombo',
            
    width40,
            
    store: new Ext.data.ArrayStore({
                
    fields: ['id'],
                
    data: [
                    [
    '10'],
                    [
    '25'],
                    [
    '50'],
                    [
    '100'],
                    [
    '200'],
                    [
    '500']
                ]
            }),
            
    mode'local',
            
    listWidth50,
            
    triggerAction'all',
            
    displayField'id',
            
    valueField'id',
            
    editablefalse,
            
    statefultrue,
            
    stateEvents: ['select'],
            
    getState: function () {
                return {
                    
    valuethis.getValue()
                };
            },
            
    applyState: function (state) {
                
    this.setValue(state.value);
            }
        }); 
    /* PAGING TOOLBAR   */
        
    var bbar = new Ext.PagingToolbar({
            
    storestore,
            
    beforePageText'',
            
    afterPageText'/ {0}',
            
    pageSizeparseInt(recPerPageCombo.value10),
            
    displayInfotrue,
            
    displayMsg'{0}-{1} / {2}',
            
    plugins: [filters],
            
    stateId'gridbbar',
            
    items: ['-'recPerPageCombo'/ page ']
        });
        
    recPerPageCombo.on('select', function (comborecord) {
            
    bbar.pageSize parseInt(record.get('id'), 10);
            
    bbar.doLoad(bbar.cursor);
            
    bbar.changePage(1);
        }, 
    this); /* GROUPING VIEW    */
        
    var view = new Ext.grid.GroupingView({
            
    forceFittrue,
            
    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)',
            
    statefultrue,
            
    stateId'mygrid',
            
    headertrue,
            
    bordertrue,
            
    frametrue,
            
    loadMasktrue,
            
    storestore,
            
    stripeRowstrue,
            
    colModelcolModel,
            
    minWidth720,
            
    loadMaskfalse,
            
    plugins: [filtersselectionPaging],
            
    autoExpandColumn'company',
            
    region'center',
            
    smsm,
            
    listeners: {
                
    render: {
                    
    fn: function () {
                        
    store.load({
                            
    params: {
                                
    start0,
                                
    limitparseInt(recPerPageCombo.value10)
                            }
                        });
                    }
                }
            },
            
    viewview,
            
    bbarbbar
        
    });
        
    /* BBAR BUTTONS     */
        
    var answer = new Ext.Button({
            
    id'answer',
            
    pressedtrue,
            
    text'Answer:',
            
    cls'x-btn-text-icon ext-js-answer',
            
    handler: function () {
                var 
    ids "";
                for (var 
    0selectionPaging.getSelections().lengthi++) {
                    if (
    0) {
                        
    ids += ',';
                    }
                    
    ids += selectionPaging.getSelections()[i].id;
                }
                var 
    params = [{
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }];
                
    win3('foo.php', {
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }, 800400truefalse00'le titre de la fentre')
            }
        });
        var 
    forward = new Ext.Button({
            
    id'forward',
            
    pressedtrue,
            
    text'Forward:',
            
    cls'x-btn-text-icon ext-js-forward',
            
    handler: function () {
                var 
    ids "";
                for (var 
    0selectionPaging.getSelections().lengthi++) {
                    if (
    0) {
                        
    ids += ',';
                    }
                    
    ids += selectionPaging.getSelections()[i].id;
                }
                var 
    params = [{
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }];
                
    win3('foo.php', {
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }, 800400truefalse00'le titre de la fentre')
            }
        });
        var 
    classify = new Ext.Button({
            
    id'classify',
            
    pressedtrue,
            
    text'Classify:',
            
    cls'x-btn-text-icon ext-js-classify',
            
    handler: function () {
                var 
    ids "";
                for (var 
    0selectionPaging.getSelections().lengthi++) {
                    if (
    0) {
                        
    ids += ',';
                    }
                    
    ids += selectionPaging.getSelections()[i].id;
                }
                var 
    params = [{
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }];
                
    win3('foo.php', {
                    
    var1'value 1',
                    
    var2'value 2',
                    
    idsids
                
    }, 800400truefalse00'le titre de la fentre')
            }
        });
        
    grid.getBottomToolbar().add(['->''-''<strong>With selected:</strong>'answerforwardclassify'-']); /* ACCORDION PANELS */
        
    var candidateProfile = new Ext.Panel({
            
    id'candidateProfile',
            
    title'Profil complet',
            
    html'&lt;L\'empty panel&gt;',
            
    borderfalse,
            
    cls'empty',
            
    autoScrolltrue,
            
    style: {
                
    backgroundColor'#fff'
            
    }
        });
        var 
    motivationMessage = new Ext.Panel({
            
    id'motivationMessage',
            
    title'Lettre de motivaion',
            
    html'&lt;L\'empty panel&gt;',
            
    borderfalse,
            
    cls'empty',
            
    style: {
                
    backgroundColor'#fff'
            
    },
            
    autoScrolltrue
        
    });
        var 
    jobApplicationDocs = new Ext.Panel({
            
    id'jobApplicationDocs',
            
    title'Documents (CV, certificats)',
            
    html'<div class=\"extjsacc_content\"><em>Veuillez slectionner une postulation dans le tableau ci-contre afin de consulter les documents (CV, certificats, etc.)</em></div>',
            
    borderfalse,
            
    cls'empty',
            
    autoScrolltrue,
            
    style: {
                
    backgroundColor'#fff'
            
    }
        });
        var 
    jobApplicationProcessing = new Ext.Panel({
            
    id'jobApplicationProcessing',
            
    title'Traitement du dossier',
            
    html'<div class=\"extjsacc_content\"><em>Veuillez slectionner une postulation dans le tableau ci-contre afin de la traiter</em></div>',
            
    borderfalse,
            
    cls'empty',
            
    autoScrolltrue,
            
    style: {
                
    backgroundColor'#fff'
            
    }
        }); 
    /* DETAILS PANELS   */
        
    var detailsPanel = new Ext.Panel({
            
    id'detailsPanel',
            
    title'Dossier de postulation',
            
    region'east',
            
    collapsibletrue,
            
    autoScrolltrue,
            
    splittrue,
            
    width500,
            
    minWidth400,
            
    margins'0 10 0 0',
            
    layout'accordion',
            
    layoutConfig: {
                
    animatetrue
            
    },
            
    frametrue,
            
    style: {
                
    backgroundColor'transparent'
            
    },
            
    items: [candidateProfilemotivationMessagejobApplicationDocsjobApplicationProcessing]
        }); 
    /* VIEWPORT PANELS  */
        
    var shim_north = new Ext.Panel({
            
    id'shim_north',
            
    region'north',
            
    height100,
            
    borderfalse,
            
    unstyledtrue,
            
    style: {
                
    backgroundColor'transparent'
            
    }
        });
        var 
    shim_west = new Ext.Panel({
            
    id'shim_west',
            
    region'west',
            
    width10,
            
    borderfalse,
            
    unstyledtrue,
            
    style: {
                
    backgroundColor'transparent'
            
    }
        });
        var 
    shim_south = new Ext.Panel({
            
    id'shim_south',
            
    region'south',
            
    height50,
            
    borderfalse,
            
    unstyledtrue,
            
    style: {
                
    backgroundColor'transparent'
            
    }
        });
        var 
    viewport = new Ext.Viewport({
            
    id'viewport',
            
    title'Gestion des postulations',
            
    layout'border',
            
    frametrue,
            
    style: {
                
    backgroundColor'transparent'
            
    },
            
    renderToExt.getBody(),
            
    items: [shim_northshim_westshim_southgriddetailsPanel]
        });

        
    grid.getSelectionModel().on('rowselect', function (smrowIdxr) {
            
    Ext.getCmp('candidateProfile').body.load({
                
    url'foo.php',
                
    scriptstrue,
                
    params: {
                    
    gridIdrowIdx,
                    
    idgrid.getSelectionModel().getSelected().get('id')
                }
            });
        });
    }); 

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    36

    Default Any clue ?

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

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    36

    Default Uncheck "hidden" rows

    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

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    36

    Default SOLVED

    That was the trick: {originalSelectAll: true} for the RowSelectionPaging
    and remoteSort: false !

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

Similar Threads

  1. CheckboxSelectionModel and select all
    By marman in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 26 Apr 2010, 1:08 PM
  2. CheckBoxSelectionModel select() problem
    By siberian in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 20 Jan 2010, 5:38 PM
  3. Replies: 2
    Last Post: 21 Aug 2009, 10:01 AM
  4. CheckboxSelectionModel select row functions
    By badgerd in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Oct 2008, 5:03 PM
  5. Using ids to select rows in checkboxselectionmodel
    By rwankar in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 18 Jan 2008, 12:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •