Comboboxgroup in a form doesn't fire dirtychange event for first 2 change

[aykutsoysal]

Hi Everyone,
I am using Extjs 4.1.1, with MVC
I have a checkboxgroup in a form like this:

{      
xtype:'form',      trackResetOnLoad:true,     
items:[{         
   xtype:'checkboxgroup',          
  fieldLabel:null,          
  columns:2,         
  vertical:false,         
   items:[            
    {boxLabel:'Administrator', name:'administrator'},            
     {boxLabel:'Manager', name:'manager'}         
   ]         
  }     
]}

and I am loading this form with:

    
form.getForm().loadRecord(item[0]);

I am handling dirtyChange event on the form with this function

dirtyChanged: function (form, dirty) 
{    
console.log("Dirtychange fired! " + dirty);   
}

I click the Manager checkbox twice, and after 3rd click I can see in my console that "Dirtychange fired!" is written.
Does anyone have an idea?
Thanks

[sword-it]

Hi aykutsoysal,

Form's dirtychange event work fine for checkbox group, see the sample example-
http://jsfiddle.net/maneeshgo/2BWsK/

[aykutsoysal]

indeed it works like that, but I think the problem is somewhere while loading a record from store to form. but I still can't find the reason, when I load another record, it does the same.

[aykutsoysal]

hi, I create simple script that produces the problem I am having, If you tick and untick manager nothing happens, but after that it starts to popup the alert.

//IsDirty Event
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{
name: 'name',
type: 'string'},
{
name: 'administrator',
type: 'boolean'},
{
name: 'manager',
type: 'boolean'}]
});

var store = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{
name: 'Hello World',
administrator: true,
manager: false}
]
});

var panel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
title: 'Test',
renderTo: document.body,
items: [{
title: 'Form',
xtype: 'form',
trackResetOnLoad:true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'},
{
xtype: 'checkboxgroup',
fieldLabel: 'Role',
columns: 2,
items: [
{
boxLabel: 'Administrator',
name: 'administrator'},
{
boxLabel: 'Manager',
name: 'manager'}
]}],

listeners: {
dirtychange: function() {
alert('hello');
}
}},
{
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}}]
});

var user = store.getAt(0);
panel.down('form').getForm().loadRecord(user);​

ps: I may have saved over your jsfiddle while tinkering