Ext:Button inside XTemplate

  1. #1

    Ext:Button inside XTemplate

    Hello,

    Based on XTemplate example, I've added an Ext:Button and a DirectMethod to be called when button is clicked. The problem is that ext:button doesn't get rendered as an html button but appear as is (of course browser doesn't know what ext:button tag is). BTW: Similar problem I'm experiencing if I want to render an image using a javascript call because the javascript code doesn't get called

    I've found this post, and according to @Vladimir it will be possible starting from v1. But the following code doesn't work.
    Any hint/workaround? Thank you.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ 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>XTemplate - Ext.NET Examples</title>    
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                List<Parent> persons = new List<Parent>(3);
                for (int i = 0; i < 3; i++)
                {
                    Parent person = new Parent();
                    person.Id = i;
                    person.Name = "Parent" + i;
                    person.Title = "Title" + i;
                    persons.Add(person);
                }
               ObjHolder1.Items.Add("persons", persons);
            }
            
            public class Parent
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public string Title { get; set; }
            }
            
            [DirectMethod]
            public void button_click (object sender, DirectEventArgs e)
            {
                X.Msg.Alert("Clicked", string.Format("You've clicked on: {1}: {0}", e.ExtraParams["N"].ToString(), e.ExtraParams["I"].ToString()));
            }
        </script>
        <style type="text/css">
            .x-panel-body p {
                margin: 5px;
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:ObjectHolder ID="ObjHolder1" runat="server" />
            <ext:XTemplate ID="Tpl1" runat="server">
    			<Html>
    				<tpl for=".">
    					<p>
    						<b>Name:</b> {Name}<br/>
    						<b>Title:</b> {Title}<br/>
                            <ext:Button ID="btn_{Id}" runat="server" Text="Click {Name}">
                                <DirectEvents>
                                    <Click OnEvent="button_click">
                                        <ExtraParams> 
                                            <ext:Parameter Mode="Value" Name="I" Value="{Id}"></ext:Parameter>
                                            <ext:Parameter Mode="Value" Name="N" Value="{Name}"></ext:Parameter>
                                        </ExtraParams>
                                        <Confirmation ConfirmRequest="true" Title="Please confirm" Message="Do you clicked on {Id}: {Name}?" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
    					</p>
    					<hr />                                
    				</tpl>     
    			</Html>
            </ext:XTemplate>
            <ext:Panel ID="Panel1" runat="server" BodyStyle="background-color:#F8F8F8; padding:5px; border:dotted 1px gray;">
                <Listeners>
                    <Render Handler="#{Tpl1}.overwrite(this.body, #{ObjHolder1}.persons);" />
                </Listeners>
            </ext:Panel>
        </form>
    </body>
    </html>
  2. #2
    The XTemplate is for generating HTML on the client, so there is no opportunity for the server to see and parse the ext:Button tag. I think the post by Vladimir that you reference was referring to being able to put controls in the expanded row body in general, not that you could do it with an XTemplate.

    Here are two basic approaches you could take:
    • Create and add server controls (Ext.NET buttons) to Panel1 during Page_Load.
    • Create and add client controls (Ext JS buttons) to Panel1 during client-side rendering using a listener. You can set the button click handlers to call a DirectMethod from there.


    Edit: another option is XRender depending on when you're actually planning to generate your list.
    Last edited by smmille1; Feb 11, 2015 at 3:57 PM.
  3. #3

    hi, a little late

    it may still be helpful to the new
           <ext:DataView runat="server" Padding="6">
                        <Store>
                            <ext:Store ID="Store2" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Directory" />
                                            <ext:ModelField Name="Files" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ItemTpl runat="server">
                            <Html>
                                <div>Files of {Directory}</div>
                                <tpl for="Files">
                                    <div class="file-button" file="{file}"></div>
                                </tpl>
                                <br />
                            </Html>
                        </ItemTpl>
                        <Plugins>
                            <ext:ComponentView runat="server">
                                <Items>
                                    <ext:ViewItem Selector="div.file-button">
                                        <Component>
                                            <ext:Button runat="server" Handler="App.direct.GetFile(this.record.data.Directory, this.text);" />
                                        </Component>
                                    </ext:ViewItem>
                                </Items>
                                <Listeners>
                                    <BeforeComponentBind Handler="component.text = target.getAttribute('file');" />
                                </Listeners>
                            </ext:ComponentView>
                        </Plugins>
                    </ext:DataView>

Similar Threads

  1. [CLOSED] How to add a button inside a DesktopModule
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 13, 2012, 1:47 AM
  2. Replies: 8
    Last Post: Sep 28, 2012, 2:42 PM
  3. Button inside ButtonGroup
    By softmachine2011 in forum 2.x Help
    Replies: 2
    Last Post: Jun 04, 2012, 8:21 AM
  4. Replies: 2
    Last Post: Mar 03, 2011, 1:44 PM
  5. [CLOSED] Ext Button - Control - inside XTemplate
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 08, 2009, 7:16 AM

Tags for this Thread

Posting Permissions