ExtJS 4, how to multi-select grid row as well as single row is also clickable?

0
votes

I am trying to create a grid using extjs 4.2.2. The grid contains several rows, if I click one row, then pops up another page which displays the detail info of that row. The grid is in a panel, so the view code is:

Ext.define("Application.view.foo.Panel", {
extend: "Ext.panel.Panel",
cls: 'foo.panel'
...
items: [
{
  itemId: "foo-bar",
  xtype: "grid",
  ...
  ,selType: 'checkboxmodel'
  ,columns: [
      xtype: 'templatecolumn'

and the code of listening row select event in controller is like:

"panel[cls~=foo.panel] #foo-bar": {
 select: function(selectionModel, record, index) { .... }

Now, I am going to add check box for each row in order to mass edit, I added selType: 'checkboxmodel', but the problem is that I cannot click the check box: if I click the box, it goes the the detail page, not just being 'checked', cuz the code in controller listens that 'row click' event.

Is there any suggestions to implement it? Thanks in advance.

2
extjscheckboxgridextjs4.2
get rid of itemClick listener, add top or bottom toolbar add a button with text "edit", listen to click on that button on controller, get all selected/checked rows and do whatever is necessary - code4jhon
I want to click the single row to view details, and also, I want to select multiple rows to do edit. - thinkman
put actionButtons, get rid of itemClick, add the button to the toolbar to mass edit - code4jhon

2 Answers

1
votes

I would suggest to change your row click listener to view row details with action column.

{
        xtype:'actioncolumn',
        width:50,
        items: [{
            // Url is just for example (not working)
            icon: 'extjs/examples/shared/icons/fam/showDetails.png',  // Use a URL in the icon config
            tooltip: 'Show details',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                // do your functionality here...
            }
}

In every row will appear an icon, and then you will have possibility to multiselect rows and to look details of every row as well. Hope that helps.

0
votes

Try to listen on cellclick event instead.

cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
   if(cellIndex != your_checkbox_column) {
      //do your info page stuff here    
   }
}