What's New?

[CLOSED] Button focus style

  1. #1
    Mar 25, 2011, 9:01 AM

    [CLOSED] Button focus style

    Hi,

    I have a web form with several textfields and one button. If the user uses Tab to navigate around the controls when button is focused I want to apply a style for the button. How can I do it?

    Thanks a lot!!
    Last edited by Daniil; Apr 01, 2011 at 1:05 PM. Reason: [CLOSED]
  2. #2
    Mar 25, 2011, 9:57 AM
    Hi,

    You could use the Focus listener to determine when the button is focused. In the listener you could use .addClass() method to apply the respective css rules.
    http://dev.sencha.com/deploy/dev/doc...ember=addClass
    http://dev.sencha.com/deploy/dev/doc...n&member=focus
  3. #3
    Mar 25, 2011, 1:08 PM
    I have a lot web forms in my application and I'd lose a lot of time setting that piece of code on each form.
    I'd want to overwrite general button properties in coolite configuration file so all forms see the changes automatically.
  4. #4
    Mar 25, 2011, 1:25 PM
    Please override "x-btn-focus" class.

    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 {
            font-weight : bold;
            color : Red;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" Text="Click me" />
    <ext:Button runat="server" Text="Click me" />
    </form>
</body>
</html>
  5. #5
    Mar 28, 2011, 7:26 AM
    I have overrided the style "x-btn-focus" with the properties: 

    x-btn-focus button
{
background: #FFFF99 !important;
color: Black:
border: solid 1px green;
}
    but now my problem is that the button has a icon and when the button has the focus the icon dissapears. How can I preserve the icon for the focus button?

    Thanks a lot!!
    <ext:Button ID="btnSave" runat="Server" Text="Save" Icon="Disk" />
    Last edited by Daniil; Mar 28, 2011 at 11:55 AM. Reason: Please use [CODE] tags
  6. #6
    Mar 28, 2011, 12:11 PM
    Please replace
    background: #FFFF99 !important;
    with
    background-color  : #FFFF99;

Similar Threads

  1. Change button style
    By flaviodamaia in forum 2.x Help
    Replies: 1
    Last Post: Jul 23, 2012, 12:38 PM
  2. [CLOSED] Set Focus to OK button in Ext.Msg.Show
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 13, 2011, 1:12 PM
  3. [CLOSED] Button Focus
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 07, 2011, 1:45 PM
  4. Button Focus Cls
    By David Pelaez in forum 1.x Help
    Replies: 2
    Last Post: Feb 25, 2011, 7:07 AM
  5. Button style change?
    By state in forum 1.x Help
    Replies: 0
    Last Post: Feb 11, 2009, 7:18 PM

Tags for this Thread

Posting Permissions