PDA

View Full Version : [CLOSED] component column



sharmav1
Feb 15, 2016, 10:44 AM
can anyone guide me how can I use skirtle's component column in my project, I am using asp.net mvc with ext.net 2.5.3.1.


Thanks

fabricio.murta
Feb 16, 2016, 2:48 AM
Hello, this is not really a supported component so as for setting up the component itself it is up to reading its setup guides and we can offer no guarantee. I gave it a try and seems that referencing the required CTemplate script, it is almost a drop-in replacement.

As for the compoent itself, it overrides the own Ext.NET/ExtJS's xtype: componentcolumn, so to use it with Ext.NET (with limited support, as we don't know what specific settings they have, different from the ExtJS one), all you have to do is:



@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>c60626_skirtleCompCol</title>
<script type="text/javascript" src="http://skirtlesden.com/static/ux/download/ctemplate/1.1/CTemplate.js"></script>
<script type="text/javascript" src="http://skirtlesden.com/static/ux/download/component-column/1.1/Component.js"></script>
</head>
<body>
<div>
@(Html.X().ResourceManager())

@(Html.X().GridPanel()
.Title("GridPanel1")
.Width(320)
.Height(400)
.Frame(true)
.Store(Html.X().Store()
.ID("Store1")
.Model(Html.X().Model()
.IDProperty("company")
.Fields(
new ModelField("company")
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().RowNumbererColumn(),
Html.X().Column().Text("Task").DataIndex("company"),
Html.X().ComponentColumn()
.Flex(1)
.Renderer(new Renderer() { Handler = "return " + Html.X().Button().Text("Test").ToScript() + ";" })
)
)
</div>
</body>
</html>


An example controller that can be used for the above sample would be:


public IEnumerable GetAllCompanies()
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" }
}
}

public ActionResult c60626_skirtleCompCol()
{
return View(this.GetAllCompanies());
}


Difference from stock compoentColumn is that this library's components are rendered via renderer(), while stock ComponentColumn adds its components from the .Component() setting, without the need to turn into ".ToScript().

For more custom settings from razor syntax, you can use the .CustomConfig() builder method to the .ComponentColumn() element.

I hope this helps!

EDIT: Reviewed the code above with a working sample!