Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: resize event fired instead of onClick for Ext.Button elements

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    34

    Exclamation resize event fired instead of onClick for Ext.Button elements

    Hi all,
    I am running into a very weird bug in Ext JS. I am using buttons(ExtJS) button all over my application and have been developing in Firefox. I recently tried to run my app in IE6 and to my surprise, the onclick event is not fired on all my button elements. None work. The toggleHandler function works fine, but not onClick. I did some debugging and it came out that the 'resize' event is being fired instead. I have no idea what is causing this. Anybody ran into something similar?

  2. #2

    Default

    You mean the "click" event, right. Do you have some code to post?

  3. #3
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Are you binding to the 'click' event of the button? Are you using the handler function configuration of Button?

    Could you post a single example of defining your button and binding the event handler?
    Aaron Conran
    @aconran

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    34

    Default

    Thanks for the response. Yes I mean the click event. Here is a sample code i am using:

    Code:
    buttons.push({
                id: 'viewFirmBckgBtn',
                xtype: 'button',
                enableToggle: true,
                style: 'padding-left: 5px;',
                width: 120,
                text: '<b>My Background</b>',
                toggleHandler: function(button, pressed) {
                    button.addClass('x-btn-pressed');    
                    if (Ext.getCmp('view3177Btn'))            
                        Ext.getCmp('view3177Btn').getEl().removeClass('x-btn-pressed');
                    if (Ext.getCmp('rptTimeBtn'))
                        Ext.getCmp('rptTimeBtn').getEl().removeClass('x-btn-pressed');
                    if (Ext.getCmp('assignmentBtn'))
                        Ext.getCmp('assignmentBtn').getEl().removeClass('x-btn-pressed');                                
                },
                handler: function(){
                    my.popups.firmInformation(buttonConfig.eventId);
                }
            });
    
    var buttonPanel = new Ext.Panel({
            border: false,
            hideBorders: true,    
            width: browserSize.width - 10 - 13,
            style:'float:right',
            autoHeight:true,    
            items: [{
                xtype: 'panel',
                border: false,
                hideBorders: true,
                layout: 'column',
                defaults: {
                    cls: 'standardLabel'
                },
                items: buttons
            }]
        });
        
        return buttonPanel;
    By the way, the issues that i encountered are better and exactly documented in this thread here:

    http://www.sencha.com/forum/showthre...k-event-object

    and the fix suggested by Condor from the ExtJS team on a related thread here:
    http://www.sencha.com/forum/showthre...k-event-object

    seemed to work except that in my version there was only two instances of
    Code:
    Ext.EventObject.setEvent(e)
    Is that an acceptable solution?

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    34

    Default

    I just found out that applying the fix from Condor introduces another issue with ComboBoxes. Trying to select a value from a ComboBox field yields this error:

    Code:
    htmlfile: Member not found
    at /common/scripts/thirdParty/ext/ext-all-debug.js [3326] 
        JScript anonymous function
        code: me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1)
    at /common/scripts/thirdParty/ext/ext-all-debug.js [3312]
        JScript anonymous function
        code: this.setEvent(e.browserEvent || e)
    at common/scripts/thirdParty/ext/ext-all-debug.js [2894]
        h
        code: e = new Ext.EventObjectImpl(e)
    at /common/scripts/thirdParty/ext/ext-all-debug.js [1881]
        JScript anonymous function
        code: fn.apply(scope, args || [])
    The code i invoked is:

    Code:
    new Ext.form.ComboBox({
            id: nameId,
            hideLabel: false,
            displayField: 'racActionDesc',
            valueField: 'racActionVal',
            mode: 'local',
            triggerAction: 'all',
            value: (val?val:'1'),
            editable: false,
            width: 100,
            store: myActionStore,
            listeners: {
                select: function(cb, rec){
                    if (eventId == null) {
                        var selectedList = marcs.util.selection.getSelectedRecords(selectedField);
                        count = selectedList.length;
                    }
                    else 
                        count = 1;
                    if (count > 0) {
                        var field = Ext.getCmp(nameId);
                        var selVal = field.value;
                        if (selVal > 0) {
                            marcs.popups.racActionParam(eventId, selVal, field.lastSelectionText);                                
                        }
                    }
                    else {
                        alert('Please select at least one item to continue...');
                    }                        
                }
            }
        });

  6. #6
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    You should not need to do that.

    This typically happens when you are using a debugger and the global EventObject points to something new and is no longer accurate... What is the buttonConfig object in your handler?
    Aaron Conran
    @aconran

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You are using toggle buttons wrong!

    YOU don't set the pressed/unpressed state. The whole point is that it does all that for you.

    Configure all the buttons which should be associated with a toggleGroup

    Then you just implement a toggle handler, and depending on the "state" do what you need. Ext handles setting the state and the styling.

  8. #8
    Sencha User
    Join Date
    Jul 2010
    Posts
    34

    Default

    Quote Originally Posted by aconran View Post
    You should not need to do that.

    This typically happens when you are using a debugger and the global EventObject points to something new and is no longer accurate... What is the buttonConfig object in your handler?
    The buttonConfig object is a parameter i received in the function where the code is extracted from. It's just an object that contains a set of true/false values determining which buttons should be created.

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Posts
    34

    Default

    Quote Originally Posted by Animal View Post
    You are using toggle buttons wrong!

    YOU don't set the pressed/unpressed state. The whole point is that it does all that for you.

    Configure all the buttons which should be associated with a toggleGroup

    Then you just implement a toggle handler, and depending on the "state" do what you need. Ext handles setting the state and the styling.
    Indeed, I'll update my code but the toggle should not affect the click event firing right?

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Your code should be
    Code:
    buttons.push({
                id: 'viewFirmBckgBtn',
                xtype: 'button',
                enableToggle: true,
                style: 'padding-left: 5px;',
                width: 120,
                text: '<b>My Background</b>',
                toggleGroup: 'same-as-the-related-buttons',
                toggleHandler: function(button, pressed) {
                    if (pressed) {
                        my.popups.firmInformation(buttonConfig.eventId);
                    }
                }
            });

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: 20 Jan 2010, 9:45 AM
  2. resize event fired and stomping on button click event object
    By davem in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 3 Dec 2009, 2:15 PM
  3. Replies: 4
    Last Post: 23 Mar 2008, 9:49 PM
  4. rowclick call button onclick event
    By timt in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 27 Feb 2008, 5:15 AM

Posting Permissions

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