Событие beforecheckchange не запускается в версии extJS 4.1.1

Question

У меня была скрипка extJS, которая будет предупреждать пользователя при щелчке по галочке.

Вот код:

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     var myStore = Ext.create('Ext.data.Store',{ 
      data: [ 
       { 
        name: 'ex', 
        oldUser: 'Y' 
       }, 
       { 
        name: 'ea', 
        oldUser: 'N' 
       } 
      ], 
      fields: [ 
       { 
        name: 'name' 
       }, 
       { 
        name: 'oldUser' 
       } 
      ] 
     }); 
     Ext.create('Ext.grid.Panel', { 
      height: 250, 
      width: 579, 
      title: 'My Grid Panel', 
      renderTo: Ext.getBody(), 
      defaultListenerScope: true, 
      store: myStore, 
      columns: [ 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'name', 
        text: 'Name' 
       }, 
       { 
        xtype: 'checkcolumn', 

        dataIndex: 'oldUser', 
        text: 'OldUser', 
        listeners: { 
         // problem here! 
         beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert("asd"); } 
        } 
       } 
      ] 
     }); 
    } 
}); 

События beforecheckchange будет срабатывать, когда я использую ExtJS 4.2.0 и далее, но это не срабатывает, когда я использовал ExtJS 4.1.1 и версию до этого.

Но когда я проверяю api doc для версии 4.1.1, beforecheckchange указан как событие, которое я мог бы использовать.

Я хочу знать, почему в приведенном выше примере не работает 4.1.1

Answer 1

Похоже, Вы должны добавить CheckColumn вручную:

var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{ 
     text: 'OldUser', 
     dataIndex: 'oldUser', 
     listeners: { 
      beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); } 
     } 
    }); 

Попробуйте эту скрипку:

Ext.application({ 
name : 'Fiddle', 

launch : function() { 
    Ext.Loader.setConfig({enabled:true}); 
    var myStore = Ext.create('Ext.data.Store',{ 
     data: [ 
      { 
       name: 'ex', 
       oldUser: true 
      }, 
      { 
       name: 'ea', 
       oldUser: false 
      } 
     ], 
     fields: [ 
      { 
       name: 'name' 
      }, 
      { 
       name: 'oldUser' 
      } 
     ] 
    }); 

    var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{ 
     text: 'OldUser', 
     dataIndex: 'oldUser', 
     listeners: { 
      beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); } 
     } 
    }); 




    Ext.create('Ext.grid.Panel', { 
     height: 250, 
     width: 579, 
     title: 'My Grid Panel', 
     renderTo: Ext.getBody(), 
     defaultListenerScope: true, 
     store: myStore, 
     columns: [ 
      { 
       xtype: 'gridcolumn', 
       dataIndex: 'name', 
       text: 'Name' 
      }, 
      myCheckColumn 
     ] 
    }); 
} 
}); 

Но может возникнуть проблема с отображением флажка. Измените фоновое изображение в CheckHeader.css или создайте новое и добавьте его в приложение.

CheckHeader.css:

.x-grid-checkheader { 
height: 14px; 
background-image: url('images/unchecked.gif'); 
background-position: 50% -2px; 
background-repeat: no-repeat; 
background-color: transparent; 
} 

.x-grid-checkheader-checked { 
background-image: url('images/checked.gif'); 
} 

.x-grid-checkheader-editor .x-form-cb-wrap { 
text-align: center; 
}