Jul 24, 2013, 5:35 PM
[CLOSED] which is the best way to add a column into a TreePanel?
It's possible to add a column into a GridPanel, as it's possible to see on the following Thread http://forums.ext.net/showthread.php...-the-gridpanel, and on the sample provided below.
It's also possible to add a column into a TreePanel, but i would like to know whether there is a better way than the sample provided below, which it's necessary to create a new Array, add all columns (cloned) into it and then, add the new column.
Thanks in advance
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
App._grd.addColumn({ xtype: "commandcolumn", text: "New Column", commands: [{ xtype: "button", command: "Delete", iconCls: "#Delete"}], prepareToolbar: prepareToolbar123 });
}
var prepareToolbar123 = function (grid, toolbar, rowIndex, record) {
if (record.raw.ID % 2 == 0) {
toolbar.items.getAt(0).hide();
} else {
toolbar.items.getAt(0).show();
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Add Column" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500"
Height="500">
<Store>
<ext:Store AutoLoad="true" ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
<ext:Column Text="Address" DataIndex="Address" runat="server" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}
public StoreResult LoadFakeRecords()
{
List<Person> lst = new List<Person>();
for (int index = 0; index < 15; index++)
{
lst.Add(new Person
{
ID = index,
Name = "Name" + index,
Address = "Address" + index,
});
}
return new StoreResult(lst, lst.Count());
}
}
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
}
}It's also possible to add a column into a TreePanel, but i would like to know whether there is a better way than the sample provided below, which it's necessary to create a new Array, add all columns (cloned) into it and then, add the new column.
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
var columns = new Array();
for (var index = 0; index < App._grd.columns.length; index++) {
Ext.Array.include(columns, App._grd.columns[index].cloneConfig());
}
Ext.Array.include(columns, { xtype: "commandcolumn", text: "New Column", commands: [{ xtype: "button", command: "Delete", iconCls: "#Delete"}], prepareToolbar: prepareToolbar123 });
App._grd.reconfigure(null, columns);
App._grd.view.refresh();
}
var prepareToolbar123 = function (grid, toolbar, rowIndex, record) {
if (record.raw.ID % 2 == 0) {
toolbar.items.getAt(0).hide();
} else {
toolbar.items.getAt(0).show();
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Add Column" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:TreePanel ID="_grd" RootVisible="false" Title="Ext.Net" Height="700" Width="600"
Margins="10" Border="false" runat="server">
<Store>
<ext:TreeStore runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Column1" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn Text="ID" Lockable="true" DataIndex="ID" Flex="2" runat="server" />
<ext:Column Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
</Columns>
</ColumnModel>
<View>
<ext:TreeView DeferEmptyText="false" />
</View>
</ext:TreePanel>
</body>
</html>namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index2()
{
return View();
}
public StoreResult LoadTreeFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);
for (int index = 1; index < 6; index++)
{
Node no = new Node();
no.NodeID = index.ToString() + DateTime.Now.Millisecond;
no.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = no.NodeID, Mode = ParameterMode.Value });
no.CustomAttributes.Add(new ConfigItem { Name = "Column1", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
nodes.Add(no);
}
return new StoreResult { Data = nodes.ToJson() };
}
}
}Thanks in advance
Last edited by Daniil; Jul 30, 2013 at 4:13 AM.
Reason: [CLOSED]
Originally Posted by Daniil
