extjs 3.4 - expander in nested grid is getting the record from parent row instead of its own row

Question

Basically I have a parent grid with row expander, when we expand each row, it will show the children grid with row expander as well.

I realized that when I click on the expander in nested grid, it's getting the record from parent row instead of its own data.

Which causing other errors to render the expanded body content.

What am I doing wrong in my code?

buildNestedGrid: function (ruleId) {
    var nestedExpander = new Ext.ux.grid.RowExpander({
        id: 'nestedExpander',
        tpl: new Ext.Template(
            '<div id="childRulesGrid"></div>',
            {
                compiled: true,
                disableFormats: true
            }                
        )            
    });

    //build grid
    var nestedGrid = new Ext.grid.GridPanel({
        id: 'childRuleGrid',
        store: this.buildStoreForChildRules(ruleId),
        height: 150,
        hideHeaders: true,
        columns: [
            nestedExpander,
            {
                id: 'id',
                header: 'Id',
                dataIndex: 'Id'
            },
            {
                id: 'parentId',
                header: 'Parent Id',
                dataIndex: 'ParentId'
            },
            {
                id: 'condition',
                header: 'Condition',
                dataIndex: 'Condition'
            },
            {
                id: 'conclusion',
                header: 'Conclusion',
                dataIndex: 'Conclusion'
            },
            {
                id: 'createdBy',
                header: 'Created By',
                dataIndex: 'CreatedBy'
            },
            {
                id: 'createdOn',
                header: 'Created On',
                dataIndex: 'CreatedOn'
            }
        ],
        viewConfig: {
            forceFit: true
        }
    });        

    nestedGrid.render('childRulesGrid');     


}