What's New?

[CLOSED] ComponentColumn with more components displayed

  1. #1
    Jun 07, 2013, 1:40 PM

    [CLOSED] ComponentColumn with more components displayed

    Hello
    Can you tell me if something like this could work?
    What I want to achieve is to have label + image in the cell, and once the image is clicked, I want to get the record
    so far, from UI point of view it looks how I need it, there are two problems
    a) data are not displayed ( as probably grid tries to set it to the root component)
    b) in click handler I do not have access to record object

    Let me know if this way is completelly wrong ( other idea is to use the renderer - but even here I have problem how to pass the record to the click event)
    <ext:ComponentColumn runat="server" DataIndex="DateCreated" Editor="true">
				<Component>
					<ext:Container runat="server" Layout="hbox">
						<Items>
							<ext:Label runat="server" Flex="1"></ext:Label>
							<ext:Image runat="server" Width="20" ImageUrl="~/image.gif">
								<Listeners>
									<Click Handler="alert(record)"></Click>
								</Listeners>
							</ext:Image>
						</Items>
					</ext:Container>
					
				</Component>
				
			</ext:ComponentColumn>
    Last edited by Baidaly; Jun 07, 2013 at 11:08 PM. Reason: [CLOSED]
  2. #2
    Jun 07, 2013, 4:58 PM
    Hi @aisi_it_admin,

    I think it is a feasible scenario.

    I think you should not set up Editor="true" for a ComponentColumn. A Container won't work as an cell editor.

    Quote Originally Posted by aisi_it_admin View Post
    a) data are not displayed ( as probably grid tries to set it to the root component)
    Please clarify what "data" and where it should appear? A record's field in the Label?

    Quote Originally Posted by aisi_it_admin View Post
    b) in click handler I do not have access to record object
    Please use a ComponentColumn's Bind listener.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:ComponentColumn runat="server" DataIndex="test3">
                        <Component>
                            <ext:Container runat="server" Layout="hbox">
                                <Items>
                                    <ext:Label ItemID="Label" runat="server" Flex="1"></ext:Label>
                                    <ext:Image 
                                        ItemID="Image" 
                                        runat="server" 
                                        Width="20" 
                                        ImageUrl="~/resources/images/test.png">
                                        <Listeners>
                                            <Click Handler="alert(this.record)"></Click>
                                        </Listeners>
                                    </ext:Image>
                                </Items>
                            </ext:Container>
                        </Component>
                        <Listeners>
                            <Bind Handler="cmp.child('#Label').setText(record.get('test3'));
                                           cmp.child('#Image').record = record;" />
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Jun 07, 2013, 7:48 PM
    Perfect, Bind handler is what I was looking for

Similar Threads

  1. How to get the ComponentColumn's value?
    By kulolo in forum 2.x Help
    Replies: 2
    Last Post: Apr 16, 2013, 1:56 AM
  2. [CLOSED] ComponentColumn
    By canbay in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 26, 2012, 7:56 PM
  3. [CLOSED] ComponentColumn
    By canbay in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 10, 2012, 5:26 PM
  4. ComponentColumn Editor Bug?
    By Doug.Morrow in forum 2.x Help
    Replies: 6
    Last Post: Aug 08, 2012, 7:30 PM
  5. ComponentColumn usage
    By Zdenek in forum 2.x Help
    Replies: 0
    Last Post: Jul 13, 2012, 9:38 AM

Posting Permissions