How can I place any Ext control inside a GridPanel column?

Page 1 of 2 12 LastLast
  1. #1

    Can I place any kind of control on a GridPanel column?

    Hi guys, this is me again having a lot of trouble learning the framework, my question now supposedly is very simple, I have a GridPanel and inside one the columns I need to place a <Menu> with several <ext:MenuItem>, the reason why I need it is because I have to access the DirectEvents property of the <ext:MenuItem> which contains the Activate event and it is not accessible with the <ext:MenuCommand> which is the only kind of component accepted with a SplitCommand.
    Thanks,
    Paul

    I need this inside a column:

    <Menu>
                                  <ext:Menu ID="Menu1" runat="server">
                                    <Items>  
                                        <ext:MenuItem ID="MenuItem" runat="server" Text="Menu 5">
                                        <DirectEvents>
                                            <Activate OnEvent="ActivateMenu">
                                            </Activate>
                                        </DirectEvents>
                                    </Items>
                                  </ext:Menu>
                                </Menu>
    Last edited by paul-2011; Aug 31, 2010 at 2:39 PM. Reason: improving
  2. #2
    I'm sure this is an easy one for experienced users, I would appreciate any advice...
    Thanks,
    Paul
  3. #3
    Is it possible to add a Activate event to a menu inside a GridPanel row?
  4. #4
    I don't mean to flood this post with my revisions but I just wanted to clarify that I went over all samples, search the whole forum and search the documentation for ExtJS but I can't seem to find anything, I hope someone there will dedicate 5min to help me solve this.
    Regards,
    Paul
  5. #5
    I am new here too but I believe this link should help you to understand what the child elements are:
    http://docs.ext.net/

    What I understood from the examples is that you can have your commands on the row and your GridPanel listener's command handler to activate/modify your menu by passing parameters from the row to the listener.

    I am sure someone will correct me if I am wrong since I started to use this framework a couple of days ago so my knowledge is very basic.

    It would be nice to have more of your code to understand what you are trying to pull off with the menus.
  6. #6
    Hi grosenbrock, thanks for the reply. Unfortunately the help file doesn't help much in this case. I would like to have a splitbutton on my GridPanel with several actions related to the current grid row, so far so good, but I also needed to add a submenu to this splitbutton that would populate from the database when you activate it showing a list of items related to the selected row, unfortunately I'm not able hook any event to the submenu when it is inside the GridPanel, I will post some samples here and perhaps you could help me since the administrators had already given up on answering my questions, I guess that's the price when you don't pay the price, Geoffrey where are you when we most need????, lol!.

    This code does what I need, but outside a GridPanel:

    <ext:MenuItem ID="MenuItem" runat="server" Text="Menu 5">
                                <DirectEvents>
                                    <Activate OnEvent="ActivateMenu">
                                    </Activate>
                                </DirectEvents>
    protected void ActivateMenu(object sender, DirectEventArgs e)
    {
      Ext.Net.MenuItem item = new Ext.Net.MenuItem(DateTime.Now.ToString() + " - I am dynamic item.");
      Menu.Primary.Items.Add(item);
      item.Render();
    }
    Inside a GridPanel, I don't know how to trigger that same event:
    <ext:SplitCommand Text="Split" Icon="Application">
      <Menu>
      <Items>
      <ext:MenuCommand CommandName="splitItem1" Icon="Anchor" Text="splitItem1">
      </ext:MenuCommand>
        <Menu>
          <Items>
            <ext:MenuCommand CommandName="splitItem11" Icon="Cup" Text="splitItem1.1"/>
            ..
            ..
      ...
      ...
      </Columns>
            </ColumnModel>
            <Listeners>
                <Activate Fn="myFunction2" /> //<--This never triggers and perhaps it's not the event I'm looking for
            </Listeners>
    I need an event that triggers when I hover splitItem1 and fills it with subitems such as 1.1, 1.2, 1.3, that will come from the database.

    Thanks,
    Paul
    Last edited by paul-2011; Sep 01, 2010 at 3:24 PM.
  7. #7
    <ext:SplitCommand Text="Split" Icon="Application">
      <Menu>
      <Items>
      <ext:MenuCommand CommandName="splitItem1" Icon="Anchor" Text="splitItem1">
      </ext:MenuCommand>
        <Menu>
          <Items>
            <ext:MenuCommand CommandName="splitItem11" Icon="Cup" Text="splitItem1.1"/>
            ..
            ..
      ...
      ...
      </Columns>
            </ColumnModel>
            <Listeners>
                <Command Fn="myFunction2" /> //<--This never triggers and perhaps it's not the event I'm looking for
            </Listeners>
    I believe you need to use Command instead of Activate as the listener. Otherwise, if you are using the preview 1.0 you can attach a handler directly on the MenuCommand.
  8. #8
    bu the Command event triggers only when an item is clicked and I need it to trigger when the menu item is hovered with the mouse ( aka Activated) thus allowing me to populate all its sub menus, just like on the top sample code I posted, try it on your machine and then try to replicate the same functionality inside a GridPanel.

    Markup:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SamplePage.aspx.cs" Inherits="SamplePage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Button ID="Button1" runat="server" Icon="Application" Text="With menu">
                <Menu>
                    <ext:Menu ID="Menu1" runat="server">
                        <Items>
                            <ext:MenuItem ID="MenuItem1" runat="server" Icon="Accept" Text="Menu 1" />
                            <ext:MenuItem ID="MenuItem2" runat="server" Icon="Accept" Text="Menu 2" />
                            <ext:MenuItem ID="MenuItem3" runat="server" Icon="Accept" Text="Menu 3 (Submenu items loaded on-demand)" >
                                <DirectEvents>
                                    <Activate OnEvent="ActivateMenu">
                                    </Activate>
                                </DirectEvents>
                                <Menu>
                                    <ext:Menu ID="MenuSubItem1" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="MenuSubItem11" runat="server" Text="On-demand items will appear below this item" Disabled="true" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:MenuItem>
                            <ext:MenuItem ID="MenuItem4" runat="server" Icon="Accept" Text="Menu 4" />
                        </Items>
                    </ext:Menu>
                </Menu>
                <ToolTips>
                    <ext:ToolTip ID="ToolTip1" runat="server" Html="Application" />
                </ToolTips>
            </ext:Button>
        </form>
    </body>
    </html>
    Code Behind
    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    using System.Text;
    
    public partial class SamplePage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        protected void ActivateMenu(object sender, DirectEventArgs e)
        {
            MenuCollection Menu = ((Ext.Net.MenuCollection)((Ext.Net.MenuItem)sender).Menu);
            Ext.Net.MenuItem item = new Ext.Net.MenuItem(DateTime.Now.ToString() + " - I am dynamic item.");
            Menu.Primary.Items.Add(item);
            item.Render();
        }
    }
    Last edited by paul-2011; Sep 01, 2010 at 4:43 PM.
  9. #9
    here is a better sample, just copy and paste, no code behind, basically I need the same functionality but Inside a GridPanel.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 ActivateMenu(object sender, DirectEventArgs e)
        {
            MenuCollection Menu = ((Ext.Net.MenuCollection)((Ext.Net.MenuItem)sender).Menu);
            Ext.Net.MenuItem item = new Ext.Net.MenuItem(DateTime.Now.ToString() + " - I am dynamic item.");
            Menu.Primary.Items.Add(item);
            item.Render();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>        
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Button ID="Button1" runat="server" Icon="Application" Text="With menu">
                    <Menu>
                        <ext:Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Icon="Accept" Text="Menu 1" />
                                <ext:MenuItem ID="MenuItem2" runat="server" Icon="Accept" Text="Menu 2" />
                                <ext:MenuItem ID="MenuItem3" runat="server" Icon="Accept" Text="Menu 3 (Submenu items loaded on-demand)" >
                                    <DirectEvents>
                                        <Activate OnEvent="ActivateMenu">
                                        </Activate>
                                    </DirectEvents>
                                    <Menu>
                                        <ext:Menu ID="MenuSubItem1" runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuSubItem11" runat="server" Text="On-demand items will appear below this item" Disabled="true" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:MenuItem>
                                <ext:MenuItem ID="MenuItem4" runat="server" Icon="Accept" Text="Menu 4" />
                            </Items>
                        </ext:Menu>
                    </Menu>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip1" runat="server" Html="Application" />
                    </ToolTips>
            </ext:Button>
        </div>
        </form>
    </body>
    </html>
  10. #10
    Quote Originally Posted by paul-2011 View Post
    bu the Command event triggers only when an item is clicked and I need it to trigger when the menu item is hovered with the mouse ( aka Activated) thus allowing me to populate all its sub menus, just like on the top sample code I posted, try it on your machine and then try to replicate the same functionality inside a GridPanel.
    Okay, then you probably need to use the mouseover listener on your gridpanel and check if you are hovering over the menu element in your function before run the rest of your code. Only the menu in the the toolbar has its own listener for mouseover and not in the row.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: May 14, 2012, 1:40 PM
  2. Replies: 5
    Last Post: Apr 28, 2012, 5:21 AM
  3. [CLOSED] [1.0] Problem with HTML textarea inside a gridpanel's column
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 14, 2010, 7:16 AM
  4. Replies: 1
    Last Post: Mar 19, 2010, 8:35 PM
  5. List Inside Column of GridPanel.
    By grmontero in forum 1.x Help
    Replies: 0
    Last Post: Sep 24, 2009, 11:12 AM

Posting Permissions