add icon to a Tab

[vali1993]

i am trying to add icon to a tab when it is generated. I don't get any error message when running the code below. But the icon is not generated.

Thanks so much for your help.

function addHomeTab(tabPanel, id, url,icon) {


var tab = tabPanel.getComponent(id);


if (!tab) {


tab = tabPanel.add({


id: id,


title: id,


closable: false,


iconCls: icon,


autoLoad: {


showMask: true,


url: url,


mode: 'iframe',


maskMsg: 'Loading ' + url + '...'


}


});


tabPanel.setActiveTab(tab);


}//calling addtab



<ext:MenuItem ID="TextMenuItem2" runat="server" Text="Member1">


<Listeners>


<Click Handler="addTab(#{TabPanel1}, 'member', 'member.aspx','house');" />


</Listeners>


</ext:MenuItem>

[jchau]

did u register the icon?

[vali1993]

I didn't. Could you be please show me how
Thanks so much

[vishnukamatam]

Hi all,

can anybody post the link on how to register icons?

[geoffrey.mcgill]

You can register an icon server-side with the following code.

this.ScriptManager1.RegisterIcon(Icon.Add);

Or just add the appropriate css class to your Page which links to the icon .png, which is all the .RegisterIcon Method does.


You'll need to set the .iconCls property instead of .icon if you manually create the css class.


Hope this helps.

[vishnukamatam]

Hi Geoffrey,

Thanks again for your reply.
I have written the following code, but was not successful. I use coolite toolkit version 0.8.2.
I work on ASP.NET MVC.


server-side code

<script runat="server">




protected void Page_Load(object sender, EventArgs e) 
    {
        if (!Ext.IsAjaxRequest) 
            {
                this.ScriptManager1.RegisterIcon(Icon.ChartPie);
            }
    }




</script>

JavaScript Function

<script type="text/javascript">
    function addTab(tabPanel, id, url,icon) {
        var tab = tabPanel.getComponent(id);
        if (!tab) {
            tab = tabPanel.add({ 
                    id: id, 
                    title: id,
                    closable: true,
                    iconCls: icon, 
                    autoLoad: {
                    showMask: true,
                    url: url,
                    mode:'iframe',
                    maskMsg: 'Loading ' + id + '...'
                    }
            });


        tab.on('activate', function() {
        var item = MenuPanel1.menu.items.get(id + "_item");
        if (item) {
            MenuPanel1.setSelection(item);
        }
        }, this);
    }
    tabPanel.setActiveTab(tab);
}
</script>

View Port "West"

<West Collapsible="true" Split="true">
<ext:MenuPanel ID="MenuPanel1" runat="server" Height="300" Title="Menu" Width="185" Collapsed="false">
    <Menu ID="Menu1" runat="server">
        <Items>
        <ext:MenuItem ID="MarkupVsGrid_item" runat="server" Text="Inventory Vs MarkUp" Icon="ChartPie">
            <Listeners>
                <Click Handler="addTab(#{TabPanel3}, 'InvVsMarkup', 'http://5qjx5j1/FICMID/Chart/ChartMarkUp/','ChartPie');" />
                </Listeners>
        </ext:MenuItem>
        </Items>
    </Menu>
</ext:MenuPanel> 
</West>

[Maia]

Hi,
You need to
insert the word "icon-" (lowercase) before the name of the icon. See example:

Ex: icon-application, icon-add, icon-cross, ..... icon-name_other_icons....

 function addTab(tabPanel, id, title, url, icone) {
            var tab = tabPanel.getComponent(id);
            var iconeTab = 'icon-' + icone.toLowerCase();     
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: title,
                    iconCls: iconeTab || 'icon-applicationdouble',
                    closable: true,                    
                    autoLoad: {
                        showMask: true,
                        url: url,
                        mode: 'iframe',
                        noCache: true,
                        color: '#E1E1E1',
                        maskMsg: 'Carregando ...'
                        
                    }
                });

            }
            tabPanel.setActiveTab(tab);
        }

Maia
Coolite 0.8.2

[vishnukamatam]

Hi Maia,

It worked perfectly fine.
Thank you very much.

mark it as solved.