3

「NotificationButton」と呼ばれるボタンが 1 つある Ext ツールバーを使用しています。このボタンには、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>

ここに画像の説明を入力 現在の問題は、css が適切に適用されていないことです。助けてください！

4

2 に答える 2

1

OK、これが Ext.NET 1.x のバージョンです。あなたがしなければならない唯一のことは、任意の 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>
于 2013-01-06T07:44:53.623 に答える
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>
于 2013-01-02T19:09:51.400 に答える