Nov 14, 2014, 1:17 AM
ComponentColumn: Full components defined on data?
Hello,
Can you help me adding a full component inside a gridPanel's cell?
Here's a sample of what I've been trying to do:
Is there something obvious I am missing? :)
Can you help me adding a full component inside a gridPanel's cell?
Here's a sample of what I've been trying to do:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridPanelWithComponent.aspx.cs" Inherits="ExtNetPlayground.gridPanelWithComponent" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="x=Ext.Net" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var ctner = new x.Container
{
Width = 120,
Height = 20,
Html = "Hello, world. :)", // real case is supposed to have other Ext.Net components inside, created from codeBehind as well.
StyleSpec = "border: solid red 2px"
};
this.Store1.DataSource = new []
{
new { Index=1, Percentage=0.2, ctner=ctner }/*,
new object[] { 2, 0.4 }, yay, different containers on different lines!
new object[] { 3, 0.6 },
new object[] { 4, 0.8 },
new object[] { 5, 1.0 }*/
};
this.Store1.DataBind();
pn.UI = x.UI.Primary;
pn.Frame = true;
pn.Title = "Thats supposed to be shown on third column from gridPanel above";
pn.Items.Add(ctner);
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ComponentColumn Overview - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.x-over-editor-grid tr.x-grid-row {
height: 25px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>ComponentColumn Overview</h1>
<ext:GridPanel
runat="server"
Title="ComponentColumn Overview"
Cls="x-over-editor-grid"
Width="620"
Height="180">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Index" Type="Int" />
<ext:ModelField Name="Percentage" Type="Float" />
<ext:ModelField Name="ctner" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:ComponentColumn runat="server">
<Component>
<ext:ProgressBar runat="server" Text="Progress" />
</Component>
<Listeners>
<Bind Handler="cmp.updateProgress(record.get('Percentage'))" />
</Listeners>
</ext:ComponentColumn>
<ext:ComponentColumn runat="server" OverOnly="true" Width="180">
<Component>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:Button runat="server" Text="Button 1" Icon="Add" />
<ext:Button runat="server" Text="Button 2" Icon="Decline" />
</Items>
</ext:Container>
</Component>
<Renderer Handler="metadata.style='color:gray;'; return 'Move mouse here';" />
</ext:ComponentColumn>
<ext:ComponentColumn ID="ctnercol" runat="server" Width="200">
<Listeners>
<Bind Handler="cmp.component.add(record.get('ctner'))" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
<br />
<h1>Grid content sample</h1>
<br />
<ext:Panel runat="server" ID="pn" />
</form>
</body>
</html>
I want to add a full component from codeBehind (and not just its value) cause I have built a container with a ext:Button and a ext:DrawComponent with several ext:Sprites inside (all in code behind), and want to put this container with everything inside it on the cell.Is there something obvious I am missing? :)