Hello

I have a problem with component column, narrowed town to the example below

could you please explain me why bind event is called two times for first item in the grid?
any next item added, bind event is fired just single time

Store behind - there is very very complex grid behind this example, and calling binding two times, causes "flickering" when rendering


<%@ Page Language="C#" %>


<!DOCTYPE html>

<html>
<head runat="server">
    <title>Two bind events</title>
    
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>ComponentColumn as Editor</h1>
        <ext:Viewport runat="server">
            <Items>
                <ext:Panel runat="server"  Controller="MyController">
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>

<script>
    Ext.define('MyController',
        (function () {
            var publicInterface = {
                extend: 'Ext.app.ViewController',
                alias: 'controller.MyController',
                init: function (view) {
                    this.callParent(arguments);

                    var cnt = new UserPropertyEdit();
                    view.add(cnt);

                    var grid = cnt.down('grid');
                    grid.columns[0].on('bind', bindOnColumn, this);
                }
            };

            function bindOnColumn() {
                console.info('bind has been called'); // why this is called two times for first item?
            }

            return publicInterface;
        })());



    function addAttribute() {
        var rootPanelTemp = Ext.getCmp('rootPanelTemp');
        var grid = rootPanelTemp.down('grid');
        grid.store.add({
            Name:'data'
        });
    }

    Ext.define('UserPropertyEdit', {
        
        id:'rootPanelTemp',
        "extend": "Ext.Panel",
        items: [{
            store: {
                model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
                    extend: "Ext.data.Model",
                    fields: [ {
                        name: "Name",
                        type: "string"
                    }]
                }),
                autoLoad: true,
                proxy: {
                    type: 'memory'
                }
            },
            frame: true,
            margin: "5",
            reference: "dgvGrid",
            xtype: "gridpanel",
            buttons: [{
                reference: "btnAdd",
                iconCls: "#Add",
                text: "Add Extended Attribute",
                handler:addAttribute
            }],
            columns: {
                items: [{
                    xtype: "componentcolumn",
                    flex: 1,
                    dataIndex: "Name",
                    text: "First Column",
                    component: function () {
                        return [{
                            xtype: "textfield",
                            validateOnFocusLeave: true
                        }];
                    },
                    editor: true
                }]
            }
        }],
        layout: "fit"
    });
</script>
</html>