PDA

View Full Version : [CLOSED] ComponentColumn with more components displayed



aisi_it_admin
Jun 07, 2013, 1:40 PM
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>

Daniil
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.



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?



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>

aisi_it_admin
Jun 07, 2013, 7:48 PM
Perfect, Bind handler is what I was looking for