Since you are trying to add a checkbox (probably in the beginning of the grid itself) in a GridPanel, it is obvious that you want to use a custom selection model, CheckboxSelectionModel. By looking at GridPanel’s API you quickly realize that you need to set value of selModel with an instance of CheckboxSelectionModel. So, you write following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<code>var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel(); var manageDoctorGrid = new Ext.grid.GridPanel({ frame:false, autoHeight:true, height : 'auto', width:500, selModel : checkBoxSelMod, store: doctorSearchResultStore, columns: [ {header: " Doctor Name ", dataIndex: 'doctor_name', width: 249 }, {header: " Hospital Name ", dataIndex: 'hospital_name', width: 249 } ] });</code> |
Once you launch your application, you realize that nothing happened. This is where lack of ExtJS documentation hurts you. It never explicitly talks about defining a column, in the column list, which has a value of selection model object. Following piece of code works just alright:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<code>var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel(); var manageDoctorGrid = new Ext.grid.GridPanel({ frame:false, autoHeight:true, height : 'auto', width:500, selModel : checkBoxSelMod, store: doctorSearchResultStore, columns: [ checkBoxSelMod, {header: " Doctor Name ", dataIndex: 'doctor_name', width: 249 }, {header: " Hospital Name ", dataIndex: 'hospital_name', width: 249 } ] });</code> |
Above code adds a check box in the beginning of every row. You can switch position of check box by placing the selection model object at desired position in the column list. For example, if you want to see checkbox in the middle of doctor name and hospital name then place the object between these two columns.