What's New?

[CLOSED] Override Button Method

Page 1 of 2 12 LastLast
  1. #1
    Mar 02, 2012, 11:07 AM

    [CLOSED] Override Button Method

    Hi,

    I'm trying to make visible buttons when it has been focused, my idea is to set x-btn-over class because it highlight.
    I've this piece of code:
    buttonListenersOverride: function () {
        Ext.Button.override({
            onBlur: function (e) {
                this.el.removeClass('x-btn-focus');
                this.el.removeClass('x-btn-over');
            },
            onFocus: function (e) {
                if (!this.disabled) {
                    this.el.addClass('x-btn-focus');
                    this.el.addClass('x-btn-over');
                }
            }
        });
    }
    And I call this method like this (I tried ithout Ext.onReady too):
    Ext.onReady(function () {
                buttonListenersOverride();
            });
    What's wrong? Or it would be any workaround for my problem?
    Last edited by Daniil; Mar 05, 2012 at 8:26 AM. Reason: [CLOSED]
  2. #2
    Mar 02, 2012, 12:07 PM
    Hi,
    Here you are.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .x-btn-focus button {
            color: red;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" Text="Button1" />
        <ext:Button runat="server" Text="Button2" />
    </form>
</body>
</html>
  3. #3
    Mar 02, 2012, 12:42 PM
    No, I don't explain it very well.

    I know that x-btn-focus style exists an I've a sample with this code to highlight it:
    .x-btn-focus button
{
    border: dotted 1px #fff8da;
}
    But I want to use the same style of x-btn-over that is defined already.
    To do it, I try to override this behavior with my custom function for all existing buttons in the application but I don't know how to do it
  4. #4
    Mar 02, 2012, 12:44 PM
    Don't you want to just override "x-btn-over" as well?

    Example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
 
    <style type="text/css">
        .x-btn-focus button {
            color: red;
        }
        
        .x-btn-over button {
            color: red;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" Text="Button1" />
        <ext:Button runat="server" Text="Button2" />
    </form>
</body>
</html>
  5. #5
    Mar 02, 2012, 12:55 PM
    No, I want to apply x-btn-over style when button is focused. When button is focused internally applies x-btn-focus and I want to apply x-btn-over too
  6. #6
    Mar 02, 2012, 1:24 PM
    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
 
    <script type="text/javascript">
        var onReady = function () {
            Ext.ComponentMgr.all.each(function (c) {
                if (c instanceof Ext.Button) {
                    c.btnEl.on(
                        "focus", 
                        function (el) {
                            this.el.addClass("x-btn-over");
                        },
                        c);
                    c.btnEl.on(
                        "blur", 
                        function (el) {
                            this.el.removeClass("x-btn-over");
                        },
                        c);
                }
            });
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="onReady();" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Button runat="server" Text="Button1" />
        <ext:Button runat="server" Text="Button2" />
    </form>
</body>
</html>
    Though, it might be best to just copy the "x-btn-over" CSS rules and apply them for "x-btn-focus".
  7. #7
    Mar 02, 2012, 1:55 PM
    It seems that doesn't override or apply the listener.

    I try it thsi with your solution and it neither works. 
    Ext.ComponentMgr.all.each(function (c) {
                    if (c instanceof Ext.Button) {
                        debugger;
                        c.onFocus = function (e) {
                            if (!this.disabled) {
                                this.el.addClass('x-btn-focus');
                                this.el.addClass('x-btn-over');
                            }
                        };
                        c.onBlur = function (e) {
                            this.el.removeClass('x-btn-focus');
                            this.el.removeClass('x-btn-over');
                        };
                    }
                });
    Any idea?
  8. #8
    Mar 02, 2012, 2:00 PM
    Well, I don't think it makes sense:
    c.onFocus = function (e) { ... }
    Please clarify why do not you use the suggested solution?
  9. #9
    Mar 02, 2012, 2:20 PM
    I use your solution but it seems that don't work because it doesn't apply the x-btn-over style, only the x-btn-focus style.
    But I change your suggestion for my last code and it doesnt' works neither.
  10. #10
    Mar 02, 2012, 2:38 PM
    Quote Originally Posted by softmachine2011 View Post
    I use your solution but it seems that don't work because it doesn't apply the x-btn-over style, only the x-btn-focus style.
    What browser do you test with?
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Ext .NET Override method best practice?
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 19, 2012, 12:50 PM
  2. [CLOSED] JavaScript error in rejectChanges() method in Ext.NET's Store override
    By anup in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 06, 2012, 8:27 PM
  3. [CLOSED] Error in GridPanel.Listeners.CellDblClick to trigger the fireevent('click') method in button in parent window.
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 21, 2012, 11:06 AM
  4. [CLOSED] Adding a button directevent in a directevent method
    By ogokgol in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 31, 2011, 10:29 AM
  5. [CLOSED] The panel will detail a button that performs the update with a server-side method.
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 18
    Last Post: Sep 27, 2010, 3:06 PM

Tags for this Thread

Posting Permissions