Multiple select checkbox is not returning values in Extjs 4.2 grid

Question

I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.

Bellow is my code..

###########################################################################

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

Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging',
    'Ext.ux.PreviewPlugin',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager',
    'Ext.selection.CheckboxModel'
]);

Ext.onReady(function(){
Ext.tip.QuickTipManager.init();

Ext.define('ForumThread', {
    extend: 'Ext.data.Model',
   fields: [

       {name: 'patient_name'},
       {name: 'referrer_provider'},
       {name: 'admit_date'},
       {name: 'added_date'},                  
               {name: 'billing_date'},
       {name: 'dob'},
               {name: 'loc_name'},
       {name: 'physician_name'},
       {name: 'imploded_diagnosis_name'},                  
               {name: 'imploded_procedure_name'},
       {name: 'imploded_optional_name'},
       {name: 'imploded_quick_list_name'},
       {name: 'med_record_no'},
               {name: 'message'}
            ],

    idProperty: 'bill_id'
});

var url = {
    remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    pageSize: 10,
    model: 'ForumThread',
    remoteSort: true,
    proxy: {
        type: 'jsonp',
        url: (local ? url.local : url.remote),
        reader: {
            root: 'charges_details',
            totalProperty: 'total_count'
        },
        simpleSortMode: true
    },
    sorters: [{
        property: 'patient_name',
        direction: 'DESC'
    }]
});

    var filters = {
    ftype: 'filters',
    // encode and local configuration options defined previously for easier reuse
    encode: encode, // json encode the filter query
    local: local,   // defaults to false (remote filtering)

    // Filters are most naturally placed in the column definition, but can also be
    // added here.
    filters: [{
        type: 'string',
        dataIndex: 'patient_name'
    }]
};

// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model

var createColumns = function (finish, start) {

    var columns = [
        {
            menuDisabled: true,
            sortable: false,
            xtype: 'actioncolumn',
            width: 50,


            items: [{
                icon   : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png',  // Use a URL in the icon config
                tooltip: 'Patient Profile',
                renderer: renderTopic,
                handler: function(grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    //alert("Bill Id: " + rec.get('bill_id'));
                    //Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
                    window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
                }
            }, 
        ]
        },
        {
        dataIndex: 'patient_name',
        text: 'Patient Name',
        sortable: true,
        // instead of specifying filter config just specify filterable=true
        // to use store's field's type property (if type property not
        // explicitly specified in store config it will be 'auto' which
        // GridFilters will assume to be 'StringFilter'
        filterable: true
        //,filter: {type: 'numeric'}
    }, {
        dataIndex: 'referrer_provider',
        text: 'Referring',
        sortable: true
        //flex: 1,
    }, {
        dataIndex: 'admit_date',
        text: 'Admit date',
    }, {
        dataIndex: 'added_date',
        text: 'Sign-on date'
    }, {
        dataIndex: 'billing_date',
        text: 'Date Of Service',
        filter: true,
        renderer: Ext.util.Format.dateRenderer('m/d/Y')
    }, {
        dataIndex: 'dob',
        text: 'DOB'
        // this column's filter is defined in the filters feature config
    },{
        dataIndex: 'loc_name',
        text: 'Location',
        sortable: true
    },{
        dataIndex: 'physician_name',
        text: 'Physician (BILLED)',
        sortable: true
    },{
        dataIndex: 'imploded_diagnosis_name',
        text: 'Diagnosis'
    },{
        dataIndex: 'imploded_procedure_name',
        text: 'Procedure'
    },{
        dataIndex: 'imploded_optional_name',
        text: 'OPT Template'
    },{
        dataIndex: 'imploded_quick_list_name',
        text: 'Quick List'
    },{
        dataIndex: 'med_record_no',
        text: 'Medical Record Number'
    },{
        dataIndex: 'message',
        text: 'TEXT or NOTES'
    }



    ];

    return columns.slice(start || 0, finish);
};


var pluginExpanded = true;


var selModel = Ext.create('Ext.selection.CheckboxModel', {

        columns: [
        {xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
        ],
    checkOnly: true,
    mode: 'multi',
    enableKeyNav: false,


    listeners: {
        selectionchange: function(sm, selections) {
            grid.down('#removeButton').setDisabled(selections.length === 0);
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    //width: 1024,
    height: 500,
    title: 'Charge Information',
    store: store,
    //disableSelection: true,
    loadMask: true,
    features: [filters],
    forceFit: true,
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    // grid columns
    colModel: createColumns(15),

    selModel: selModel,

    // inline buttons
    dockedItems: [
       {
        xtype: 'toolbar',
        items: [{
            itemId: 'removeButton',
            text:'Charge Batch',
            tooltip:'Charge Batch',
            disabled: false,
            enableToggle: true,
    toggleHandler: function() {  // Here goes the delete functionality
                alert(selModel.getCount());
                var selected = selModel.getView().getSelectionModel().getSelections();
                alert(selected.length);
                var selectedIds;
                if(selected.length>0) {
                    for(var i=0;i<selected.length;i++) {
                        if(i==0)
                        {
                                selectedIds = selected[i].get("bill_id");
                        }   
                        else
                        {
                                selectedIds = selectedIds + "," + selected[i].get("bill_id");
                        }
                    }
                }

                alert("Seleted Id's: "+selectedIds);return false;

            }









        }]
    }],



    // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying charges {0} - {1} of {2}',
        emptyMsg: "No charges to display"
    }),
    renderTo: 'charges-paging-grid'
});

store.loadPage(1);
});

#

It's giving the numbers in alert dialogue of the selected rows,here alert(selModel.getCount()); But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow var selected = selModel.getView().getSelectionModel().getSelections(); I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).

Answer 1

Try this

var selected = selModel.getSelection();

Instead of this

var selected = selModel.getSelectionModel().getSelections();

Answer 2

You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.

selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!