PDA

View Full Version : [CLOSED] Set TreePanel Folder, Empty Folder and Leaf icons



RCN
Dec 01, 2014, 11:25 AM
I would like to know whether it's possible to add configs to TreePanel to specify both Folder, Emtpty Folder and Leaf icons.

The following example shows the default behaviour of TreePanel:

http://forums.ext.net/attachment.php?attachmentid=16801&stc=1



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Crisp" />
<ext:TreePanel AutoLoad="false" RootVisible="false" Title="Ext.Net" Height="700" Width="500"
Margins="10" runat="server">
<Store>
<ext:TreeStore AutoLoad="false" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" Expanded="false" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn Text="ID" Lockable="true" DataIndex="ID" Flex="2" runat="server" />
<ext:Column Text="Name" Width="300" Lockable="true" DataIndex="Name" runat="server" />
</Columns>
</ColumnModel>
</ext:TreePanel>
</body>
</html>




public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
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.Second;
no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
no.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
nodes.Add(no);

if(index == 5)
{
no.Leaf = true;
}
}

return new StoreResult { Data = nodes.ToJson() };
}
}


LoadTreeFakeChildren resulted:


[{
"id": "10",
"Task": "10",
"Name": "fba48903-9578-4cc3-b4db-040fafdf529c"
}, {
"id": "20",
"Task": "20",
"Name": "81f0616e-cea8-46e2-89c6-8ace1fc7ba0c"
}, {
"id": "30",
"Task": "30",
"Name": "3427b0e1-40ba-4e2d-a3a5-cb74af598b41"
}, {
"id": "40",
"Task": "40",
"Name": "b5cfa766-6f18-4589-aba8-445e1b148dd3"
}, {
"id": "50",
"leaf": true,
"Task": "50",
"Name": "9ce5b6b6-81bc-4773-833c-46603e48ca3c"
}]


It's possible to acomplish it by setting explicitly the icon of Folder and Leaf nodes (Empty folder was not convered on the example)

http://forums.ext.net/attachment.php?attachmentid=16812&stc=1



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.Second;
no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
no.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });

nodes.Add(no);

if(index == 5)
{
no.Leaf = true;
no.Icon = Icon.TagGreen;
}
else
{
no.Icon = Icon.Folder;
}
}

return new StoreResult { Data = nodes.ToJson() };
}


But this approach increases the result of LoadTreeFakeChildren


[{
"id": "141",
"iconCls": X.net.RM.getIcon("Folder"),
"Task": "141",
"Name": "675951a0-5414-4cc1-8f6f-3924bcf674ec"
}, {
"id": "241",
"iconCls": X.net.RM.getIcon("Folder"),
"Task": "241",
"Name": "47d0c641-a6ca-425d-9993-c8d240c44ac4"
}, {
"id": "341",
"iconCls": X.net.RM.getIcon("Folder"),
"Task": "341",
"Name": "e95739bb-b84b-4500-b108-7d1a9f1eecc6"
}, {
"id": "441",
"iconCls": X.net.RM.getIcon("Folder"),
"Task": "441",
"Name": "cee3959b-a065-4227-997f-32329ec7ba78"
}, {
"id": "541",
"leaf": true,
"iconCls": X.net.RM.getIcon("TagGreen"),
"Task": "541",
"Name": "4fb8bcc8-84c4-4fe6-a56b-f39b8e04a2c8"
}]


So, it would be nice to set this config directly on TreePanel

Thanks in advance

Daniil
Dec 05, 2014, 1:12 PM
Hi Raphael,

I agree it would be good to have a simple way to specify those icons, but after some investigation I should state that it might be problematic to implement and, probably, we won't do that.

Also, there is some problem with applying Icons on nodes. If you apply Icon="Folder" on some node, this node will looks the same expanded and collapsed. If you try a regular node (without any Icon applied), you can notice that it looks different collapsed and expanded. I guess you might want to consider a possibility to override in on the CSS level.

RCN
Dec 05, 2014, 1:46 PM
I am pretty busy at this moment, migrating the application to version 3.x. Please, remain this thread open because i am gonna make some investigation to try to find a solution for this scenario. ok?

Daniil
Dec 05, 2014, 9:01 PM
Sure, no problem.

Daniil
Dec 19, 2014, 12:02 PM
Raphael, I am marking the thread closed. Though, please feel free to update with any new info.

RCN
Dec 19, 2014, 12:14 PM
Thank you Daniil. At this moment i am pretty busy fixing v3 issues but i will come back to this task as soon as possible

RCN
Dec 19, 2014, 1:06 PM
For now i can suggest the following

17561



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<style type="text/css">
.x-tree-icon-parent
{
background-image: url("/icons/folder-png/ext.axd") !important;
}
.x-grid-tree-node-expanded .x-tree-icon-parent
{
background-image: url("/icons/folder_magnify-png/ext.axd") !important;
}
.x-tree-icon-leaf
{
background-image: url("/icons/tag_green-png/ext.axd") !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" Theme="Crisp" />
<ext:TreePanel RootVisible="false" Title="Ext.Net" Height="700" Width="500"
Margin="10" Border="false" runat="server">
<Store>
<ext:TreeStore ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn Text="Name" DataIndex="Name" Flex="2" runat="server" />
</Columns>
</ColumnModel>
</ext:TreePanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadTreeFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);

for (int index = 1; index < 6; index++)
{
Node no = new Node
{
NodeID = string.Format("{0}{1}", index, DateTime.Now.Second),
Leaf = index == 5
};
no.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = no.NodeID, Mode = ParameterMode.Value });

nodes.Add(no);
}

return new StoreResult { Data = nodes.ToJson() };
}
}
}

Daniil
Dec 21, 2014, 1:06 PM
The solution looks good. Thank you for sharing!