Question

我正在使用Ext工具栏，其中有一个名为“NotificationButton”的按钮，我打算在其中显示数字，就像在facebook通知中一样。我可以成功更改按钮的html。我唯一困住的是css部分。

有人能指出我正确的方向吗？提前谢谢。

被修改！

正如Daulet所建议的那样，我有：

样式表

<style type="text/css">
    .fbNotification
    {
        background: none repeat scroll 0 0 orange!important;
        border: 1px solid orange !important;
        border-radius: 10px !important;
        width: 18px !important;
    }

    .fbNotification .x-tip-body
    {
        font-size: 10px !important;
    }
</style>

标记

<ext:Panel ID="Panel1" runat="server" Title="Panel with toolbars" Width="600" Height="300">
    <TopBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:Button ID="b1" runat="server" Icon="Add" StandOut="true" Text="Notifications">
                    <Listeners>
                        <Render Fn="createTooltp"></Render>
                    </Listeners>
                </ext:Button>
                <ext:ToolbarFill />
                <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" />
                <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" />
                <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" />
            </Items>
        </ext:Toolbar>
    </TopBar>
</ext:Panel>

脚本：

<script type="text/javascript" language="javascript">
    function createTooltp(cmp) {
        tooTip = new Ext.ToolTip({
            anchor: 'left',
            target: cmp,
            html: '10',
            cls: 'fbNotification',
            autoRender: true,
            renderTo: Ext.getBody(),
            autoHide: false,
            shadow: false,
            padding: 0,
            width: 16,
            shrinkWrap: 0,
            anchorToTarget: true,
            mouseOffset: [-4, -8]
        });

        tooTip.show();
    }
</script>

enter image description here 现在的问题是css没有正确应用。请帮忙！

Answer 1

<强>更新

这个答案适用于Ext.NET 2.x.

试试这个：

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<style>
    .fbNotification {
        background: none repeat scroll 0 0 orange !important;
        border: 1px solid orange !important;
        border-radius: 10px !important;
        width: 18px !important;
    }

    .fbNotification .x-tip-body {
        font-size: 10px !important;
    }
</style>

<script>
    var addNotification = function(cmp) {
        var tip = Ext.create('Ext.tip.ToolTip', {
            target: cmp,
            html: '10',
            autoRender: true,
            renderTo: Ext.getBody(),
            autoHide: false,
            shadow: false,
            padding: 0,
            cls: 'fbNotification',
            width: 16,
            shrinkWrap: 0
        });
        tip.show();
        tip.alignTo(cmp.el, 'tl-br?', [-14,16]);
    }
</script>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Title="Panel with toolbars" 
            Width="600" 
            Height="300">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Icon="Add" StandOut="true" Text="Notifications">
                            <Listeners>
                                <Click Handler="Ext.Msg.alert('Click','Click on Add');" />
                                <Render Fn="addNotification"></Render>
                            </Listeners>
                            <ToolTips>
                                <ext:ToolTip runat="server" Html="StandOut button" />
                            </ToolTips>
                        </ext:Button>

                        <ext:ToolbarFill />

                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" />
                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" />
                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>  
    </form>
</body>
</html>

Answer 2

好的，这里是Ext.NET 1.x的版本。您唯一需要做的就是创建自己的tip精灵sprite图像，您可以使用任何Browser DevTool获取它：

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Examples</title>
    <style>
        .fbNotification
        {
            background: none repeat scroll 0 0 orange!important;
            border: 1px solid orange !important;
            border-radius: 10px !important;
            width: 18px !important;
        }

        .fbNotification .x-tip-body
        {
            font-size: 10px !important;
        }

        .fbNotification .x-tip-ml {
            background: none;
            padding-left: 3px !important;            
        }

        .fbNotification .x-tip-tc, .fbNotification .x-tip-tl, .fbNotification .x-tip-tr, .fbNotification .x-tip-bc, .fbNotification .x-tip-bl, .fbNotification .x-tip-br, .fbNotification .x-tip-ml, .fbNotification .x-tip-mr 
        {
            background: none;
        }

        .fbNotification .x-tip-anchor 
        {
            /* Put here your own gif image of tip anchor sprite */
            background-image: none; 
        }
    </style>

    <script>
        function createTooltp(cmp) {
            var tooTip = new Ext.ToolTip({
                anchor: 'left',
                target: cmp,
                html: '10',
                cls: 'fbNotification',
                autoRender: true,
                renderTo: Ext.getBody(),
                autoHide: false,
                shadow: false,
                padding: 0,
                width: 16,
                shrinkWrap: 0,
                anchorToTarget: true,
                mouseOffset: [-4, -8],
                listeners: {
                    beforehide: function () {
                        return false;
                    }
                }
            });

            tooTip.show();
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel ID="Panel1" runat="server" Title="Panel with toolbars" Width="600" Height="300">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button ID="b1" runat="server" Icon="Add" StandOut="true" Text="Notifications">
                            <Listeners>
                                <Render Fn="createTooltp"></Render>
                            </Listeners>
                        </ext:Button>
                        <ext:ToolbarFill />
                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" />
                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" />
                        <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </form>
</body>
</html>

Facebook就像Ext3 Button的Notification Icon一样

2 个答案: