PDA

View Full Version : How can I place any Ext control inside a GridPanel column?



paul-2011
Aug 30, 2010, 9:48 PM
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>

paul-2011
Aug 31, 2010, 4:26 PM
I'm sure this is an easy one for experienced users, I would appreciate any advice...
Thanks,
Paul

paul-2011
Aug 31, 2010, 8:16 PM
Is it possible to add a Activate event to a menu inside a GridPanel row?

paul-2011
Aug 31, 2010, 8:26 PM
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

grosenbrock
Sep 01, 2010, 2:43 PM
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.

paul-2011
Sep 01, 2010, 3:22 PM
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

grosenbrock
Sep 01, 2010, 3:47 PM
<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.

paul-2011
Sep 01, 2010, 4:40 PM
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();
}
}

paul-2011
Sep 01, 2010, 4:45 PM
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>

grosenbrock
Sep 01, 2010, 5:27 PM
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.

paul-2011
Sep 01, 2010, 5:38 PM
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.

I tried that, mouseover on the GridPanel only triggers when you mouse over the grid itself and never with inner components such as the menu which makes sense.

grosenbrock
Sep 02, 2010, 3:07 AM
I tried that, mouseover on the GridPanel only triggers when you mouse over the grid itself and never with inner components such as the menu which makes sense.

That is correct since the framework will only give you so much and you have to go through the dom to find your way into the elements where you will find your menu element and manipulate it.

paul-2011
Sep 02, 2010, 3:26 AM
I understand what you mean but that's not really going to work on this case because I need it to trigger only when the MenuItem is Activated (hovered) and from there I would need to read parameters from that MenuItem in order to run the query, I think that I've come to a limitation of the framework and perhaps that's why I got no response from Geoffrey, too bad there are so many components and you're really limited when you're working with a GridPanel, considering database apps are all about grids, thank you so much for you attention grosenbrock, if you ever get this sample I posted here to work on a GridPanel please let me know, I will post the code here if I ever get it working as well, take care!

grosenbrock
Sep 02, 2010, 3:33 AM
I am building an Excel look-a-like sheet where I already traverse through the tooltip to pick up what I want from the grid cell. You should be able something similar easily without me giving you my code pieces. My code pieces are not unique but found on the forum and/or examples.

For now I am just testing this framework and evaluating...

Edit: I can find the unique cell element and evaluate what to do so you should be able to do that too for each of your menus.

grosenbrock
Sep 02, 2010, 3:53 AM
I think that I've come to a limitation of the framework and perhaps that's why I got no response from Geoffrey, too bad there are so many components and you're really limited when you're working with a GridPanel, considering database apps are all about grids

Framework is just the window and you still need someone to put it in unless you understand the principals.

geoffrey.mcgill
Sep 02, 2010, 5:58 AM
Hi paul-2011,

What you are asking for is not built into the GridPanel component. It would take some time/effort to get this all working as per your specs.

Maybe the following example would help as an alternative, see

http://examples1.ext.net/#/GridPanel/Commands/Menu_Row_Command/

paul-2011
Sep 07, 2010, 6:31 PM
Hi paul-2011,

What you are asking for is not built into the GridPanel component. It would take some time/effort to get this all working as per your specs.

Maybe the following example would help as an alternative, see

http://examples1.ext.net/#/GridPanel/Commands/Menu_Row_Command/

Hi Geoffrey, thanks for responding, for some reason I didn't get notified about your reply even though I was monitoring the topic anyways that sample you pointed me to is very close to what I'm looking for but I was looking to create something very dynamic, which is to populate the split button menu items when you expand it, maybe it's a bad design, maybe not, let me know what do you think.
Thanks,
Paul