CssClass Property on ext:Button doesn't work

Sep 14, 2009 at 10:23 PM

When I try to put CssClass in a ext:Button just to change de font color it doesn't work it maintains the original format. Some help?

Coordinator
Sep 15, 2009 at 1:11 AM

An ext:Button will generate the following html structure:

<table cellspacing="0" class="x-btn x-btn-noicon" id="Table1" style="display: inline;
        width: auto;">
        <tbody class="x-btn-small x-btn-icon-small-left">
            <tr>
                <td class="x-btn-tl">
                    <i></i>
                </td>
                <td class="x-btn-tc" />
                <td class="x-btn-tr">
                    <i></i>
                </td>
            </tr>
            <tr>
                <td class="x-btn-ml">
                    <i></i>
                </td>
                <td class="x-btn-mc">
                    <em unselectable="on" class="">
                        <button type="button" class="x-btn-text " id="ext-gen9">
                            Change the enable state of right button</button></em>
                </td>
                <td class="x-btn-mr">
                    <i></i>
                </td>
            </tr>
            <tr>
                <td class="x-btn-bl">
                    <i></i>
                </td>
                <td class="x-btn-bc" />
                <td class="x-btn-br">
                    <i></i>
                </td>
            </tr>
        </tbody>
    </table>

That seems anonying.

 

So the correct way to CSS a button will be:

<ext:Button ID="btnChangeEnable" CssClass="redbutton" Text="Change the enable state of right button"
        runat="server" />

And add the following CSS rules in the page header:

<style type="text/css">
        .redbutton button
        {
            color: #FF0000;
        }
    </style>

 

Sep 16, 2009 at 10:14 PM

It works fine now.

Thank you

Coordinator
Sep 17, 2009 at 12:48 AM

welcome