Results 1 to 3 of 3

Thread: Cannot make click event fire in IE7/8 for disabled buttons

  1. #1
    Ext JS Premium Member itgrunt's Avatar
    Join Date
    May 2009
    Posts
    5

    Default Cannot make click event fire in IE7/8 for disabled buttons

    OK... Here is some test code I wrote for the scenario that I need.

    1. The screen loads. I need to override the click handlers for buttons and replace it with new click handlers.
    2. When the user clicks on a disabled button, the new click handler should be fired. (In my real project, a property grid displays the widget properties).
    3. In FF and Chrome the disabled buttons' new click event fires properly. However, this does not happen in IE.


    HTML Code:
        <html>
        <head>
            <link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css"/>
            <script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js">
            </script>
            <script type="text/javascript" src="../ext-3.2.1/ext-all.js">
            </script>
        </head>
        
        <body>
            <div id="main">
            </div>
            <script>
                Ext.onReady(function() {
    
                    var panel = new Ext.Panel({
                        id: 'panel',
                        layout: 'column',
                        autoHeight: true,
                        renderTo: 'main',
                        items: [
                            {
                            id: 'leftcolumn',
                            columnWidth: .5,
                            items: [{
                                xtype: 'button',
                                disabled: true,
                                readOnly: true,
                                text: 'click me',
                                handler: function(snder, e) {
                                    Ext.MessageBox.alert('original handler for button 1');
                                }}
                                                   ]},
                            {
                            id: 'rightcolumn',
                            columnWidth: .5,
                            items: [{
                                xtype: 'button',
                                disabled: false,
                                text: 'click me',
                                handler: function(snder, e) {
                                    Ext.MessageBox.alert('original handler', 'button 2\'s original handler');
                                }}]}
                        ]
                    });
    
    
                    alertButton = function(a, b, c) {
                        Ext.MessageBox.alert('button', 'overriden button event');
                    }
                    cascadeFunc = function(component) {
                        if (component.cascade) {
                            component.cascade(function(e) {
    
                                if (e.xtype == 'button' || e.type == 'button') {
                                    var btn = Ext.getCmp(e.id);
                                    btn.on('click', alertButton, this);
                                    if (e.disabled) {
                                        if (e.el.dom.className.indexOf('x-btn') != -1) {
                                            //Ext.fly(btn.container.dom.id).addListener('click', alertButton, this); //this workaround works
                                            Ext.fly(e.id).addListener('click', alertButton, this); //does not work when button is disabled.  Works fine for FFox and Chrome.
                                            btn.addListener('click', alertButton, this); //does not work when button is disabled.  Works fine for FFox and Chrome.
                                        }
    
                                    }
                                }
                            })
                        }
                    }
                    cascadeFunc(panel);
    
                });
            </script>
        </body>
    </html>
    Please note that I have a workaround. I am attaching the event to the button's container in the DOM:
    Ext.fly(btn.container.dom.id).addListener('click', alertButton, this);

    I have tested this code under ExtJS 3.0 and 3.2.1...

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    This isn't a bug with the framework. The expected behaviour is that a button doesn't fire any events when it's disabled. What you're doing here is building in custom behaviour. Moving to help.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member itgrunt's Avatar
    Join Date
    May 2009
    Posts
    5

    Default

    Thanks Evan. I suppose you're right. I guess I was just excited that I would be logging my first bug! ;-) I'll be sure to use the template next time too!

Similar Threads

  1. Dataview does not fire click or dblclick event
    By Bandorka in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 25 Nov 2008, 2:02 PM
  2. how to make Ext.Window to fire a double click event
    By dddu88 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 26 Feb 2008, 1:47 PM
  3. Cannot fire click event on Ext.Button
    By fermo111 in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 11 Dec 2007, 6:24 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •