[OPEN] [#1859] Bind event with component column

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [OPEN] [#1859] Bind event with component column

    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>
  2. #2
    Hello @lbrohan!

    I can't really tell why this event is triggered in the first place; I don't see documentation on this event (bind) in Ext.grid.colum.Column supported event list.

    So it seems your code relies on unsupported event and you should avoid using it; that is, it may work now, but there's no guarantee its behavior is going to change in the future if there's no designed handler for it.

    I believe you should look up from the link above for supported events that fulfill the task you need to accomplish. Then if the chosen event also fires twice for the same record, we can investigate its reasons.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Oh wait, I seem to have jumped too quick to conclusions; you are talking about the component column, which does have the bind event!..

    Checking up your example to get down to the reason why it fires twice and a possible hint on how to avoid this. We'll get back to you soon!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Okay, I have checked your test case; getting parse errors. Can you review it?

    Notwithstanding, I tried a test case based on Grid Panel > Component Column > Overview and it is not firing the event twice for any record in the grid; if I have 5 rows, the event fires 5 times; and I made it print the element's unique ID (Index in the related example), and it is not popping the same ID twice at any point.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello

    I'm sorry you got the parse error - I tried on two vistual studio versions on standalone projects and it works fine for me.
    Can I please ask what error says?

    I createt my sample from the sample you pointed me to. Till the component column is created in ascx/aspx it works fine - bind event is called just once, but once it is added dynamically, first time it is called twice. Based on my ivestigation its is caused by something related to "refresh" event of the grid view to be called 10 miliseconds defered... but it quite above my knowledge of extjs internals

    Thanks for help
    Louise
  6. #6
    The Controller setting needs to reference a System.Web.Mvc.ControllerBase derivate at line 18, where you have <ext:Panel runat="server" Controller="MyController">.

    Okay, it seems you are using the non-mvc-capable version of Ext.NET DLL (NuGet package), so this setting is not included -- in turn it just passes the config as controller: 'Mycontroller' to client-side.

    To get equivalent code using MVC Ext.NET version I will just change it to:

    <ext:Panel runat="server">
        <CustomConfig>
            <ext:ConfigItem Name="controller" Value="MyController" />
        </CustomConfig>
    </ext:Panel>
    Will follow up in a moment...
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Dynamic header column component direct event Issue
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 21, 2015, 10:56 PM
  2. [OPEN] [#774] Component Column Editor add row not working properly
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 08, 2015, 12:05 PM
  3. Replies: 2
    Last Post: Aug 21, 2014, 8:55 AM
  4. [CLOSED] Component Column - Combobox change event issue in IE 8
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 08, 2014, 3:49 PM
  5. Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM

Posting Permissions