[CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

  1. #1

    [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

    Hi guys,I want to add a context menu to the dataview items (http://forums.ext.net/showthread.php?1955) and other menu for rightclick on the background of the dataview (I'm using ContextMenuId attribute), but i can get them work together.

    It only shows me the ContextMenuId menu.


    Thanks
    Last edited by geoffrey.mcgill; Feb 20, 2011 at 4:14 PM.
  2. #2

    RE: [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

    Hi,

    please see the following sample
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
    <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                List<object> data = new List<object>(50);
                for (int i = 1; i <= 50; i++)
                {
                    data.Add(new{ text = "Item " + i });
                }
    
                this.Store1.DataSource = data;
                this.Store1.DataBind();
            }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title></title>   
        
        <style type="text/css">
            .dataview-block {
                border:1px solid silver;
                background-color:#f0f080;
                width:40px;
                height:40px;
                margin:10px;
                text-align:center;
                line-height:40px;
                font-size:11px;
                font-family:sans-serif;
                float:left;
            }
            
            .block-label
            {
                font-weight:bold;
                font-size:12px;
                padding:5px 0px 5px 28px;            
                width:150px;
            }
        </style>
        
        <script type="text/javascript">
            function setNoneItemMenu(view, menu) {
                view.el.on("contextmenu", function(e, t) {
                    if(Ext.isEmpty(e.getTarget('div.dataview-block'))){
                        e.preventDefault();                     
                        menu.showAt(e.getXY());
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
           
            <ext:Store runat="server" ID="Store1" AutoLoad="true">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="text" />                       
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>    
            
            <ext:Menu ID="DataViewContextMenu" runat="server">
                <Items>
                    <ext:TextMenuItem ID="BlockLabel" runat="server" CtCls="block-label"  />
                    <ext:MenuItem ID="MenuItem1" runat="server" Text="Delete" Icon="Delete">
                        <Listeners>
                            <Click Handler="Ext.Msg.alert(this.parentMenu.block.id, 'Delete');" />
                        </Listeners>
                    </ext:MenuItem>
                    <ext:MenuItem ID="MenuItem2" runat="server" Text="Print" Icon="Printer">
                        <Listeners>
                            <Click Handler="Ext.Msg.alert(this.parentMenu.block.id, 'Print');" />
                        </Listeners>
                    </ext:MenuItem>
                </Items>
                <Listeners>
                    <BeforeShow Handler="#{BlockLabel}.el.update(this.block.innerHTML);" />
                </Listeners>
            </ext:Menu> 
            
            <ext:Menu ID="DataViewNoneItemMenu" runat="server">
                <Items>                
                    <ext:MenuItem ID="MenuItem3" runat="server" Text="Item 1">
                    </ext:MenuItem>
                    <ext:MenuItem ID="MenuItem4" runat="server" Text="Item 2">
                    </ext:MenuItem>
                </Items>
            </ext:Menu> 
                           
            <ext:Panel 
                runat="server" 
                ID="ImagePanel"             
                Frame="true" 
                Height="500"
                Width="535"             
                Title="Simple DataView">
                <Body>
                    <ext:FitLayout ID="FitLayout1" runat="server">
                        <ext:DataView ID="DataView1" runat="server"                        
                            StoreID="Store1"
                            ItemSelector="div.dataview-block">
                            <Template ID="Template1" runat="server">
                                <tpl for=".">
                                    <div id="item-{#}" class="dataview-block">{text}
    
                                </tpl>
                                <div class="x-clear">
    
                            </Template>    
                            <Listeners>
                                <ContextMenu Handler="e.preventDefault(); #{DataViewContextMenu}.block = node;#{DataViewContextMenu}.showAt(e.getXY());" />
                                
                                <Render Handler="setNoneItemMenu(this, #{DataViewNoneItemMenu});" />
                            </Listeners>                     
                        </ext:DataView>
                    </ext:FitLayout>
                </Body>
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

    Solved!


    Thanks! ;)
  4. #4

    RE: [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

    Sorry, it's not working on IE7!It always show the "DataViewNoneItemMenu"
  5. #5

    RE: [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background

    Hi,

    For me this sample works fine under IE7.
    Did you test my original sample or inside own project?*


Similar Threads

  1. Replies: 5
    Last Post: Dec 22, 2011, 11:38 AM
  2. Get MultiSelect Item , ContextMenu ?
    By Mohammad in forum 1.x Help
    Replies: 0
    Last Post: Dec 10, 2011, 6:44 AM
  3. [CLOSED] dataview delete item(s)
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 01, 2011, 1:46 PM
  4. [CLOSED] Add a contextMenu only for the Items in DataView
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 11, 2009, 7:47 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Posting Permissions