Change Icon in Command Column -GridPanel

[asics167]

Hello!
i have grid with one column with two icon :

  <ext:TabPanel
                        ID="CenterPanel"
                        runat="server"
                        Region="Center"
                        ActiveTabIndex="0">
                        <Items>




                            <ext:Panel
                                ID="Tab1"
                                runat="server"
                                Title="Button"
                                Border="false"
                                Layout="FitLayout"
                                BodyPadding="6">

                                <Items>

                                        <ext:Button runat="server" >
                                            <DirectEvents>
                                                 <Click  OnEvent="LoadDoc" ></Click>
                                          </DirectEvents>
                                     </ext:Button>              
                            </Items>
                         </ext:Panel>


                    

       <ext:GridPanel
            ID="GridPanel5"
            runat="server" 
            Title="DOC"  
            AutoScroll="true"
            EnableColumnHide="false"
           
            AutoHeight="true"    
            Cls="my-grid">
            <Store>
                <ext:Store ID="Store6" AutoLoad="false"  runat="server" SortOnLoad="true" >

                                -------
                    ------
                 </ext:Store>
            </Store>

                  <ColumnModel ID="ColumnModel5" runat="server">
                <Columns>
                    <ext:CommandColumn ID="CommandColumn1" runat="server" Width="26" >
                        <PrepareToolbar Fn="prepareToolbar" />
                          <Commands>
                           
                             <ext:GridCommand Icon="Page" CommandName="View">
                                <ToolTip Text="Look" />
                                                       
                            </ext:GridCommand>
                           <ext:GridCommand Icon="PageWhiteAcrobat" CommandName="View" hidden="true">
                                <ToolTip Text="Look" />
                                 
                            </ext:GridCommand>
                          
                            
                        </Commands>

                                
...

function change icon pdf/page

 <script type="text/javascript">
         var prepareToolbar = function (grid, toolbar, rowIndex, record) {
             var pageCommand = toolbar.items.get(0);
                         if (record.data.col6 == 'pdf') {
               
                  pageCommand.setIconCls("icon-pagewhiteacrobat");
                            }
             else {
                     pageCommand.setIconCls("icon-page");
                        };

after first load page - load Store6:

 public void Page_Load(object sender, EventArgs args)
    {
        if (!X.IsAjaxRequest)
        {
 Store6.LoadProxy();
}

and for row with pdf set icon Acrobat, for other - icon Page - this work fine


but if i click button on first tab with click direct event (tab with grid no activ):

[DirectMethod]
public void LoadDoc(object sender, DirectEventArgs e)
{
    Store6.LoadProxy();
}

all icon not see.. if i remove button on tab2 with grid - all work fine

Please help me..

[asics167]

i write new example from Ext.net exmlple https://examples2.ext.net/#/GridPane...oolbar/http://

only add tab panel and two botton on each tab:

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    [DirectMethod]
    public void LoadDoc(object sender, DirectEventArgs e)
    {
        Store1.LoadProxy();
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
            };

            this.Store1.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Prepare Toolbar - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />    

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var prepare = function (grid, toolbar, rowIndex, record) {
            var firstButton = toolbar.items.get(0);

            if (record.data.price < 50) {
                firstButton.setDisabled(true);
                firstButton.setTooltip("Disabled");
            }

            //you can return false to cancel toolbar for this record
        };
    </script>

</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>Prepare Toolbar</h1>
         <ext:TabPanel
                        ID="CenterPanel"
                        runat="server"
                        Region="Center"
                        ActiveTabIndex="0">
                        <Items>
 
 
 
 
                            <ext:Panel
                                ID="Tab1"
                                runat="server"
                                Title="Button"
                                Border="false"
                                Layout="FitLayout"
                                BodyPadding="6">
 
                                <Items>
 
                                        <ext:Button ID="Button1" runat="server" >
                                            <DirectEvents>
                                                 <Click  OnEvent="LoadDoc" ></Click>
                                          </DirectEvents>
                                     </ext:Button>             
                            </Items>
                         </ext:Panel>
 
 

                            <ext:Panel
                                ID="Panel11"
                                runat="server"
                                Title="Prepare toolbar"
                                Border="false"
                                Layout="FitLayout"
                                BodyPadding="6">
 
                                <Items>
 
                                        <ext:Button ID="Button2" runat="server" >
                                            <DirectEvents>
                                                 <Click  OnEvent="LoadDoc" ></Click>
                                          </DirectEvents>
                                     </ext:Button>             
                            

        <ext:GridPanel ID="GridPanel1" 
            runat="server" 
            Title="Prepare toolbar" 
            Width="600" 
            Height="300">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" 
                        runat="server" 
                        Text="Company" 
                        Width="160" 
                        DataIndex="company" 
                        Flex="1" 
                        />
                    <ext:Column ID="Column2" 
                        runat="server" 
                        Text="Price" 
                        Width="75" 
                        DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" 
                        runat="server" 
                        Text="Change" 
                        Width="75" 
                        DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" 
                        runat="server" 
                        Text="Change" 
                        Width="75" 
                        DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" 
                        runat="server" 
                        Text="Last Updated" 
                        Width="85" 
                        DataIndex="lastChange" 
                        />
                    <ext:CommandColumn ID="CommandColumn1" runat="server" Width="120">
                        <Commands>
                            <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
                        </Commands>
                        <PrepareToolbar Fn="prepare" />
                        <Listeners>
                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                        </Listeners>                        
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
            </SelectionModel>            
        </ext:GridPanel>  

                                    </Items>
                         </ext:Panel>
                            </Items>
                            </ext:TabPanel>
    </form>
</body>
</html>

if i click button on tab with grid - ok - icon visible, but if i click on button 1 tab and after go to tab with grid - icon not visible.
please help - i want icon allways visible - and after click on tab1

[asics167]

i look html code page
1. after click button on tab with grid:


icon view and

<div id="toolbar-1137-innerCt" class="x-box-inner " role="presentation" style="width: 120px; height: 22px;">


2. after click button on tab without grid and change tab ti tab with grid



icon not view
<div id="toolbar-1107-innerCt" class="x-box-inner " role="presentation" style="width: 0px; height: 0px;">

width and hieght = 0

if in firebug change this parameter and set width =120 and height=22 - Icon paint on Page.

Please help me change this bug..

[Vladimir]

Try to set HideMode="Offsets" for secobd tab (Panel11)

[asics167]

Try to set HideMode="Offsets" for secobd tab (Panel11)

Thanks.. its help for me!