[CLOSED] Treepanel - Use custom Icons

[John_Writers]

Hi,
I know there are lot of icons in the Ext icon list, but sometimes I need to use additional custom icons.

What are the best practices to use custom icons? What's the Image format I should use and the resolution?

How can I add some additional Icons to use them in the controls?

I need to use custom icons on a treeview node but I didn't found a solution.

Thanks,
have a good day!

[Daniil]

Hi @John_Writers,

Please use a Node's IconFile of IconCls.

<ext:Node Text="Node 1" IconFile="resources/images/test.png" />
<ext:Node Text="Node 2" IconCls="my-icon" />

<style>
    .my-icon {
        background-image: url(resources/images/test.png);
    }
</style>

Please note that <style> is not required for IconFile.

[John_Writers]

Ok, I used the IconFile property, but I can see only a little part of the image, because the image is too big.

What's the best format and resolution to convert the images to?

Thanks.

[Daniil]

I think you have to decrease the image's size manually in some utility for editing of images. It should be 16x16.

[John_Writers]

Ok,
perfect! with the 16x16 png image it works well, but,

I need to have a bigger tree, with bigger icons, like 32x32 or 64x64.

How can I make the ext tree bigger?

Thanks for your time.

Have a good day.

[Daniil]

It is not supported by default, but you can try to get it via CSS.

<ext:TreePanel runat="server" Cls="my-tree">

<style>
    .my-tree .x-tree-icon {
        width: 24px;
        height: 24px;
    }
</style>