Frameset and Icon

[jirihost]

Hello

Quick question
Is there a way how to add icon to the frameset ( similar way like for Panel I can set Icon property)

Thanks

[fabricio.murta]

Hello @jirihost!

Sorry for the delay getting back to you but I'm afraid I'm not going to be as helpful as I would like to.

I am not sure what you are talking about when you say "frameset"... So here's my best shot:

You can wrap an IFrame within a panel and give it a title, icon, control menus, as well as the ability to close it using loaders. Here's what I'm talking about:

- Panel > Body Mask > Standard Mask

Hope this helps!

Well, if not, please add more details and maybe a test case to illustrate your scenario.

[jirihost]

Hello

I meant

<ext:Fieldset /> tag

I can add Icon to panel like

<ext:Panel Icon="BulletRed"/>

but I do not see any such property for Fieldset


Hopefully my questionis now clearer

Thanks

[fabricio.murta]

Hello, @jirihost!

The fieldset, in fact, does not contain an icon property, as it does not emply a title bar like the panel grid panel, form panel, and other similar components do.

So, in short, it does not support icons. You'll have to carve your way in if you really want an icon to be near a fieldset's title.

One alternative is just using an emoji unicode character as the icon in the title string itself. You'd need to keep in mind that depending on the OS and the version newer emojis may not be present in the installed system font.

Here's how WebForms code would look like:

<ext:FieldSet runat="server" Title="â–¶&nbsp;FieldSet">

Aside of that, the Fieldset's title accept raw HTML, such that you can draw a div or span yourself to wrap an icon in, just like a panel would do. For example, from a panel with the icon Accept, I could infer this HTML to mimic the behavior:

<ext:FieldSet runat="server" Title="<div class=&quot;x-title-icon icon-accept&quot; style=&quot;width:16px;height:16px&quot;></div>&nbsp;My Title Here">

If you draw the panel itself and look at the HTML, and simply copy it over to the title block (replacing the double quotes with " in the process), it should not simply work, because there are chained CSS rules to, at least, set the icon box's width and height, as well as giving some spacing. So instead, I "hardwired" the dimensions and added a   to do the spacing.

There are many other ways to do that, if both these don't look appealing for you, maybe they leave useful clues on how to do it the way it best suits your needs. You can always extend your component into a new one. The fieldset is an extension of the ext:Container that transforms the wrapping code in an actual HTML Fieldset block, and which title becomes the fieldset's legend property.

Hope this helps!

EDIT: Windows 10 comes with a helpful emoji keyboard via windows + . key combination.