[CLOSED] Blinking Tab for version 2.x

**jpadgett** · Jan 08, 2015, 9:38 PM

I have done a bit of searching in this forum, so I apologize in advance if a solution was presented previously that I missed.

I saw a working version of a blinking tab for extjs as it existed in earlier version(s) of Ext.NET. I then spent some time translating some of the parts to Ext.NET 2.x and extjs 4.2.x. I have gotten to the point where the code runs, but the cls toggle does not happen. I have also made so many changes here and there, I'm hoping some fresh eyes may see something I'm missing.

Here is the original code example: http://bruno.tavares.me/extjs/exampl...Tab/index.html

Here is my sample code:

Controller (no server side code other than to return the view):

public ActionResult BlinkTab()
{
    return View();
}

View:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BlinkTab</title>
    <link href="~/Content/BlinkTab/Ext.ux.BlinkTab.css" rel="stylesheet" />
    <script src="~/Scripts/Ext.ux.BlinkTab.js"></script>
</head>
<body>

@Html.X().ResourceManager()

@(Html.X().TabPanel()
    .ID("TabPanel1")
    .Width(500)
    .Height(400)
    .Items(tabs =>
    {
        tabs.Add(
            Html.X().Panel()
                .ID("TabOne")
                .Title("Tab 1")
                .Html("Tab 1 content")
        );
        tabs.Add(
            Html.X().Panel()
                .ID("TabTwo")
                .Title("Tab 2")
                .Html("Tab 2 content")
        );
        tabs.Add(
            Html.X().Panel()
                .Title("Tab 3")
                .Html("Tab 3 content")
        );
    })
    .Buttons(
        Html.X().Button()
            .Text("Blink Tab 1")
            .OnClientClick("App.TabPanel1.blinkTab(0);"),
        Html.X().Button()
            .Text("Blink Tab 2")
            .OnClientClick("App.TabPanel1.blinkTab('TabTwo');"),
        Html.X().Button()
            .Text("Blink Tab 3")
            .OnClientClick("App.TabPanel1.blinkTab(2);")
    )
)

</body>
</html>

Note that I put the .js file in "/Scripts/" and the .css and image files in "/Content/BlinkTab/".

Ext.ux.BlinkTab.js :

Ext.override(Ext.TabPanel, {
    blinkTab: function (tab) {
        console.log("blinkTab called");

        tab = this.getComponent(tab);

        if (!tab) {
            console.log("tab not retrieved");
        } else {
            console.log("tab " + tab.id + " retrieved");
        }

        var task;

        /*
        This was the original code, but not sure why it's still needed.
        
        var objTab = tab.getEl();
        
        Strangely, it will work for Tab 1 (at index 0), but not the other tabs.
        For now, just setting objTab = tab.
        */
        var objTab = tab;

        if (!objTab || objTab._blinking) {
            return;
        }

        objTab._blinking = true;

        task = Ext.TaskManager.start({
            scope: this
            , interval: 500
            , run: function () {
                if (task.taskRunCount == 10) {
                    Ext.TaskManager.stop(task);
                    objTab.addCls('ext-ux-tab-orange');
                    objTab._blinking = false;
                    return;
                }

                console.log("run count = " + task.taskRunCount);

                objTab.toggleCls('ext-ux-tab-orange');
            }
        });

        var stopBlink = function () {
            console.log("stopBlink called");

            objTab._blinking = false;
            Ext.TaskManager.stop(task);
            objTab.removeCls('ext-ux-tab-orange');

            tab.un('activate', stopBlink, this);
            if (tab.el) {
                tab.mun(tab.el, 'click', stopBlink, this);
            }
        };

        tab.on('activate', stopBlink, this, { single: true });
        if (tab.el) {
            tab.mon(tab.el, 'click', stopBlink, this, { single: true });
        }
    }
});

In the css file, the first part that is commented out is where I was trying to translate the original content to the new extjs class names. I then found the more comprehensive version of styling for tabs ... but have no idea how accurate it is overall. Nor whether or not the .gif files actually work with the latter.

Ext.ux.BlinkTab.css :

/*.x-tab-bar-strip-top .ext-ux-tab-orange .x-tab-right{
    background-image:url(tabs-sprite-color.gif);
}

.x-tab-bar-strip-top .ext-ux-tab-orange .x-tab-left{
    background-image:url(tabs-sprite-color.gif);
}

.x-tab-bar-strip-top .ext-ux-tab-orange .x-tab-strip-inner{
    background-image:url(tabs-sprite-color.gif);
}

.x-tab-bar-strip-bottom .ext-ux-tab-orange .x-tab-right {
    background-image:url(tab-btm-right-bg.gif);
}

.x-tab-bar-strip-bottom .ext-ux-tab-orange .x-tab-left {
    background-image: url(tab-btm-left-bg.gif);
}*/

.ext-ux-tab-orange .x-tab-default-top {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -o-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -o-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    -o-border-bottom-right-radius: 0;
    -ms-border-bottom-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    -o-border-bottom-left-radius: 0;
    -ms-border-bottom-left-radius: 0;
    -khtml-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 3px 3px 0 3px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    background-image: none;
    background-color: #fceabb;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
    background-image: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background-image: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background-image: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background-image: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background-image: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
}

.ext-ux-tab-orange .x-nlg .x-tab-default-top-mc {
    background-image: url('tabs-sprite-color.gif');
    background-color: white;
}

.ext-ux-tab-orange .x-nbr .x-tab-default-top {
    padding: 0 !important;
    border-width: 0 !important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
    background-color: transparent;
    background-position: 1100404px 1000000px;
}

.ext-ux-tab-orange .x-nbr .x-tab-default-top-tl,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-bl,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-tr,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-br,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-tc,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-bc,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-ml,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-mr {
    zoom: 1;
    background-image: url('tabs-sprite-color.gif');
}

.ext-ux-tab-orange .x-nbr .x-tab-default-top-ml,
.ext-ux-tab-orange .x-nbr .x-tab-default-top-mr {
    zoom: 1;
    background-image: url('tabs-sprite-color.gif');
    background-position: 0 0;
}

.ext-ux-tab-orange .x-nbr .x-tab-default-top-mc {
    padding: 0 0 0 0;
}

I'm adding the last .gif here in the post (tabs-sprite-color.gif). I guess I can only add two attachments? ...

If anyone can help me get this working I'll be eternally grateful! OR point me to an even better way to alert a user that an action is finished on a tab panel that is not active.

**Daniil** · Jan 09, 2015, 11:27 AM

Hi @jpadgett,

Please review this example.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var blink = function () {
            var el = App.Panel2.tab.getEl();

            el.addCls("no-background-image");
            el.highlight(null, {
                callback: function () {
                    el.highlight(null, {
                        callback: function () {
                            el.highlight(null, {
                                callback: function () {
                                    el.removeCls("no-background-image");
                                }
                            })
                        }
                    })
                }
            });
        };
    </script>

    <style>
        .no-background-image {
            background-image: none !important;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Item 1" />
                <ext:Panel ID="Panel2" runat="server" Title="Item 2" />
            </Items>
        </ext:TabPanel>

        <ext:Button runat="server" Text="Blink" Handler="blink" />
    </form>
</body>
</html>

**matrixwebtech** · Jan 09, 2015, 12:14 PM

One thing I must say on this post,this man is a rock star,who reduce I think more then 200-300 to 50 lines,with approx 90% of exact functionality. Hats off .@Danill

**jpadgett** · Jan 09, 2015, 5:15 PM

That's awesome! Thanks Daniil!

**jpadgett** · Jan 09, 2015, 6:41 PM

I mixed Daniil's solution with the concepts from the original. I think I've obtained pretty close to the desired outcome:

doesn't blink if tab is active
stops blinking when tab is activated
tab remains highlighted until activated

I added a few vars in case I end up wanting to reuse the method, but with other colors or number of blinks (blinkNum, hColor, hCls). They can be moved up to the method params in that scenario.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BlinkTab</title>
    <link href="~/Content/BlinkTab/Ext.ux.BlinkTab.css" rel="stylesheet" />
    <script src="~/Scripts/Ext.ux.BlinkTab.js"></script>
</head>
<body>

@Html.X().ResourceManager()

@(Html.X().TabPanel()
    .ID("TabPanel1")
    .Width(500)
    .Height(400)
    .Items(tabs =>
    {
        tabs.Add(
            Html.X().Panel()
                .ID("TabOne")
                .Title("Tab 1")
                .Html("Tab 1 content")
        );
        tabs.Add(
            Html.X().Panel()
                .ID("TabTwo")
                .Title("Tab 2")
                .Html("Tab 2 content")
        );
        tabs.Add(
            Html.X().Panel()
                .Title("Tab 3")
                .Html("Tab 3 content")
        );
    })
    .Buttons(
        Html.X().Button()
            .Text("Blink Tab 1")
            .OnClientClick("App.TabPanel1.blinkTab('TabOne');"),
        Html.X().Button()
            .Text("Blink Tab 2")
            .OnClientClick("App.TabPanel1.blinkTab('TabTwo');"),
        Html.X().Button()
            .Text("Blink Tab 3")
            .OnClientClick("App.TabPanel1.blinkTab(2);")
    )
)
</body>
</html>

.js:

Ext.override(Ext.TabPanel, {
    blinkTab: function (panel) {
        panel = this.getComponent(panel);
        if (!panel) {
            console.log("panel could not be retrieved");
            return;
        }

        var tab = panel.tab,
            el = tab.el,
            blinkNum = 3,
            hColor = "#D5E8BD",
            hCls = "ext-ux-blinktab-green";

        if (tab.active) return;
        if (!el || el._blinking) return;

        el._blinking = true;
        var stopBlink = function () {
            el._blinking = false;
            el.removeCls(hCls);
            tab.un('activate', stopBlink, this);
            tab.mun(el, 'click', stopBlink, this);
        };

        tab.on('activate', stopBlink, this, { single: true });
        tab.mon(el, 'click', stopBlink, this, { single: true });

        el.addCls(hCls);
        var doHighlight = function (n) {
            if (n <= blinkNum) {
                el.highlight(hColor, {
                    callback: function () {
                        if (el._blinking) doHighlight(n + 1);
                    }
                });
            }
        };

        doHighlight(1);
    }
});

.css:

.ext-ux-blinktab-green {
    background-image: none !important;
    background-color: #ACD17C;
}

Thanks again, Danill!!

**geoffrey.mcgill** · Jan 09, 2015, 6:58 PM

Hi jpadgett,

Thanks for sharing your final code. Looks cool.

One small tip for the forums is to try and combine all the code required to run a sample into one single file. Place any JavaScript and Stylesheet code inline within <head> of that document.

Providing as one file just makes it super easy for others to copy + paste your sample into a test project and run without having to make modifications.

Thanks again for sharing.

Thread: [CLOSED] Blinking Tab for version 2.x

Thread Tools

Search Thread

Display

[CLOSED] Blinking Tab for version 2.x

Similar Threads

[CLOSED] Highlighting with blinking of Menu items, Tabs, Grid rows

[CLOSED] Example link of version 1 now shows version 2 beta examples

load url in window without blinking

[CLOSED] Cursor blinking using swf files and loading page with panel in the same page

[CLOSED] The Examples explorer are showed for version 0.8 and It should be for version 1.0

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Blinking Tab for version 2.x

[CLOSED] Blinking Tab for version 2.x

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us