What's New?

Help adding buttons and/or menu to panel header

  1. #1
    Jun 10, 2009, 4:00 PM

    Help adding buttons and/or menu to panel header

    I'm have a project where with multiple panels on the page, each capable of firing off their own async CRUD operations back to the SQL database.

    I'm a bit stuck, however, on how to add my own commands to the panel header (i.e., having a trigger control that shows a menu or a save icon in the header on the far right or left side....or the same in the footer). Basically I'd like to be able to place controls in the same area where we currently see the "Close" and "Minimize" buttons.


    Has anyone attempted/had any luck with this?


    Thanks,

    Rick



  2. #2
    Jun 10, 2009, 4:49 PM

    RE: Help adding buttons and/or menu to panel header

    Ok, figured out how to add the commands there using the <Tools> tags....is there any means to control the icon?
  3. #3
    Jun 10, 2009, 5:26 PM

    RE: Help adding buttons and/or menu to panel header

    Hi Groovepoets,

    You can change the Type property. There's a list of included tool icons.


    If none of the included icons fits your requirements, maybe just pick an icon, then override it's css class with your own custom class.


    For example, if you set to "Plus", the icon is controlled with the "x-tool-plus" css class. By overriding the "x-tool-plus" class, you can override the image and any other css properties of the tool.


    Example


    <ext:Tool Type="Plus" />

    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Jun 11, 2009, 12:35 PM

    RE: Help adding buttons and/or menu to panel header

    Do we have an example of the handler/fn properties that routes back to functions or subs in the page code behind file? i.e. when the save tool is clicked, what goes into Handler/fn properties to have the button call my the save routine in my aspx.vb file?

    Thanks,

    Rick
  5. #5
    Jun 11, 2009, 12:52 PM

    RE: Help adding buttons and/or menu to panel header

    Hi Rick,

    I think we need to fill out some server-side ajaxevent handlers for the Tools. Currently, only client-side side events can be handled within the control configuration.

    You can work-around this limitation by configuring an AjaxMethod which will fire on the server. The following sample demonstrates.

    Example

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

<%@ 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">
    [AjaxMethod]
    public void Save()
    {
        Ext.Msg.Alert(this.TextField1.FieldLabel, "Value: " + this.TextField1.Text).Show();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Coolite Toolkit Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager runat="server" AjaxMethodNamespace="CompanyX" />
        
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Icon="Application" 
            Title="Title"
            Width="300"
            Collapsible="false"
            Closable="false"
            BodyStyle="padding:5px;">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <ext:Anchor Horizontal="100%">
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="My Field" />
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>
            <Tools>
                <ext:Tool Handler="CompanyX.Save();" Type="Save" />
            </Tools>
        </ext:Window>
    </form>
</body>
</html>
    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Jun 11, 2009, 3:53 PM

    RE: Help adding buttons and/or menu to panel header

    Geoffrey,

    Your example is working most of the time, but it did cause a unique sort of oddity to appear.

    My panel contains the following in it's markup:

    <Tools>
    <ext:Tool Type="Save" Handler="RA.Save();" />
</Tools>
    If I switch in and out of design view and debug a few times, the above code adds a line exposing the base internal markup for the Tool class, and turns the <Tools> section markup into this:

    <Tools><ext:Tool Type="Save" Handler="RA.Save();" />
<Coolite.Ext.Web.Tool Type="Save" Fn="function(event,toolEl,panel){RA.Save();}" 
        Handler="RA.Save();"></Coolite.Ext.Web.Tool>
</Tools>
    This generates an error. I can easily clean it up, but it will reappear later.

  7. #7
    Jun 11, 2009, 4:21 PM

    RE: Help adding buttons and/or menu to panel header

    Hi Groovepoets,

    Thanks for update.

    I wasn't able to reproduce the VS design/source issue, but upon investigating the source for Tool.cs and I found some logic that would probably be causing the problem.

    I made a few changes which should prevent the problem from re-occurring.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0
    By vs.mukesh in forum 2.x Help
    Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  2. Adding Submenu on header menu from GridPanel
    By douglas in forum 1.x Help
    Replies: 0
    Last Post: Mar 06, 2012, 1:47 PM
  3. Add buttons into panel header.
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Nov 23, 2010, 5:22 PM
  4. [CLOSED] Buttons in FormPanel Header bar
    By voipswitch in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 14, 2010, 8:06 AM
  5. [CLOSED] How to add buttons to panels header?
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 21, 2009, 7:34 AM

Posting Permissions