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

  1. #1

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

    Hi Daniil, I would kindly ask you for help. Now we need to implement the ALERT function to our web application. The application consists of a part of the menu, where the dynamically created objects Ext.Net.TreePanel are placed with linked objects Ext.Net.Node. Another part is ext: TabPanel where with help of IFrames several modules with grids are displayed in tabs. Alert function is a little more complicated and requires dividing into several sub-problems. The main task is to alert users to current event such as alarm through a highlighted path (eg flashing) onto the target module (target entity is blinking row in the grid ). This means that we need to begin to flash PARTICULAR treepanel, then menu item (Node) then TAB TabPanel and finally a row in the grid. Please, can you tell me how to do it easily. Thanks. ASAPCH
    Last edited by Daniil; Jan 22, 2013 at 4:02 AM. Reason: [CLOSED]
  2. #2
    Hi @ASAPCH,

    This example should help you to start.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var task;
    
            var startAnimation = function () {
                var row = Ext.get(App.GridPanel1.getView().getNode(1)),
                    runner = new Ext.util.TaskRunner();
    
                if (!task) {
                    task = runner.newTask({
                        run: function () {
                            row.fadeOut();
                            row.fadeIn();
                        },
                        interval: 500
                    });
                }
        
                task.start();
            };
    
            var stopAnimation = function () {
                task.stop();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
    
            <ext:Button runat="server" Text="Start" Handler="startAnimation" />
    
            <ext:Button runat="server" Text="Stop" Handler="stopAnimation" />
        </form>
    </body>
    </html>
    See also
    http://docs.sencha.com/ext-js/4-1/#!...method-fadeOut
    http://docs.sencha.com/ext-js/4-1/#!...-method-fadeIn
    http://docs.sencha.com/ext-js/4-1/#!...til.TaskRunner
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.fx.Anim
  3. #3
  4. #4
    Hello!

    Try the following sample:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    
        <ext:XScript runat="server">
            <script>
     
                var startAnimation = function (el) {
                    // You can add any animation at this point
                    el.animate({ duration: 500, to: { opacity: 0.1 } }).animate({ duration: 500, to: { opacity: 1 } });
                };
     
                var addTab = function (tabPanel, id, url, menuItem) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : id, 
                            title    : url, 
                            closable : true,
                            menuItem : menuItem,
                            loader   : {
                                url      : url,
                                renderer : "frame",
                                loadMask : {
                                    showMask : true,
                                    msg      : "Loading " + url + "..."
                                },
                                listeners: {
                                    load: function(panel, response, options, eOpts) {
                                        startAnimation(this.target.findParentByType('tabpanel').getTabBar().activeTab.el);
                                        console.log('123');
                                    }
                                }
                            }
                        });
    
                        tab.on("activate", function (tab) {
                        #{MenuPanel1}.setSelection(tab.menuItem);
                    });
                }
                
                tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Window 
                runat="server" 
                Title="Adding tab"
                Width="700" 
                Height="500" 
                Icon="Link" 
                Layout="BorderLayout">
                <Items>
                    <ext:MenuPanel 
                        ID="MenuPanel1" 
                        runat="server" 
                        Width="200" 
                        Region="West">
                        <Menu runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Ext.NET">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ya.ru', this);" />
                                    </Listeners>
                                </ext:MenuItem>
                                
                                <ext:MenuSeparator />
                                
                                <ext:MenuItem runat="server" Text="Ext.NET forums">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);" />
                                    </Listeners>
                                </ext:MenuItem>
                                
                                <ext:MenuSeparator />
                                
                                <ext:MenuItem runat="server" Text="Sencha">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Also, please, take a look at this documentation: http://docs.sencha.com/ext-js/4-1/#!...t.util.Animate

Similar Threads

  1. [CLOSED] Dynamic menu items in menu panel creation problem
    By legaldiscovery in forum 1.x Premium Help
    Replies: 2
    Last Post: Jan 10, 2013, 10:29 AM
  2. Replies: 0
    Last Post: Aug 09, 2012, 5:37 AM
  3. Replies: 1
    Last Post: Feb 15, 2011, 5:45 PM
  4. [CLOSED] [1.0] MVC sample west menu has no menu items
    By Inoventus in forum 1.x Premium Help
    Replies: 9
    Last Post: Nov 24, 2009, 4:06 AM
  5. Stop Rows from Highlighting on Selection
    By Juls in forum 1.x Help
    Replies: 4
    Last Post: Apr 17, 2009, 5:36 PM

Tags for this Thread

Posting Permissions