Icons not showing in GridPanel Command Columns

  1. #1

    Icons not showing in GridPanel Command Columns

    I'm running into an issue with icons failing to display in GridPanel columns such as CommandColumns.

    If I apply an icon (such as the "Lorry" icon) to the panel itself, that icon works....if I apply other icons to the columns, they do not appear. If, however, I apply an icon to a column that's already loading on a panel header elsewhere on the page, then those column icons appear correctly.

    It looks like somehow during rendering the column icons are getting lost when the GridPanel renders unless the icon was already rendered at some point in a parent panel.
  2. #2
    Hi,

    Please post a sample code reproducing the issue.
  3. #3

    GridPanel example code

    Here's the grid panel markup....in this example the the grid has the "UserSuit" icon, and the ImageCommandColumn features two items...one has the "UserSuit" icon, and the other has the "ComputerEdit" icon.

    UserSuit icon shows fine, the ComputerEdit icon does not display, only the text for the command.

    If I switch the grid to use the ComputerEdit icon then the scenario reverses (ComputerEdit icon shows up and the UserSuit ImageCommand icon vanishes).

        <ext:GridPanel ID="GridPanel1" runat="server" Title="Employee Listing"  Icon="UserSuit" StoreID="Store1" Frame="true" Floating="true" ClicksToEdit="2" Width="1024" Height="600" >
            <LoadMask ShowMask="true" />
            <SaveMask ShowMask="true" />                        
            <ColumnModel runat="server" Width="1000" >
                <Columns>
                    <ext:Column ColumnID="ID" DataIndex="ID" Header="ID" Editable="false" Width="40" Align="Center" Hidden="true"/>
                    <ext:Column ColumnID="EmployeeID" DataIndex="Biz_NFX_EMP_ID" Header="Employee #" Width="50" Align="Center"/>
                    <ext:Column DataIndex="Name_First" Header="First Name" Align="Left" Width="80" Locked="true"/>
                    <ext:Column DataIndex="Name_Last" Header="Last Name" Align="Left" Width="80" Locked="true"/>
                    <ext:Column DataIndex="Biz_Title" Header="Title" Align="Left" Width="80"/>
                    <ext:Column DataIndex="Biz_Manager" Header="Reports To" Align="Left" Width="100"/>
                    <ext:Column DataIndex="Biz_Department" Header="Department" Align="Left" Width="80"/>
                    <ext:Column DataIndex="Office_Loc" Header="Location" Align="Left" Width="80"/>
                    <ext:Column DataIndex="Biz_EMP_TYPE_CD" Header="Type" Align="Center" Width="60"/>
                    <ext:Column DataIndex="Biz_Region" Header="Business Unit" Align="Left" Width="80"/>
                    <ext:DateColumn DataIndex="D_Start" Header="Start Date" Align="Left" Width="100" />
    
                    <ext:ImageCommandColumn Width="110" Tooltip="Commands you can use with this grid's data." Sortable="false" Hideable="false" Header="Tools">
                        <Commands>
                            <ext:ImageCommand Icon="ComputerEdit" Text="Equip" CommandName="Equipment">
                                <ToolTip Text="Click to edit this employee's office and IT equipment setup." Title="Edit employee equipment" />
                            </ext:ImageCommand>
                            <ext:ImageCommand Icon="UserSuit" Text="Red Carpet" CommandName="RedCarpet">
                                <ToolTip Text="Click to work with this employee's onboarding information." Title="Work with the employee's Red Carpet On-Boarding records." />
                            </ext:ImageCommand>
                        </Commands>
                    </ext:ImageCommandColumn>                        
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                    <GetRowClass Fn="getRowClass" />                       
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1"  SingleSelect="true" runat="server">
                    <Listeners>
                        <RowSelect Handler="#{btnDelete}.enable();#{EmpForm}.getForm().loadRecord(record);#{EmpForm}.record = record;" />
                        <RowDeselect Handler="if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Add" Icon="Add">
                    <Listeners>
                        <Click Handler="var rowIndex = #{GridPanel1}.addRecord(); #{GridPanel1}.getView().focusRow(rowIndex); #{GridPanel1}.startEditing(rowIndex, 0);" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Delete" Disabled="true">
                    <Listeners>
                        <Click Handler="#{GridPanel1}.deleteSelected();if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
                    </Listeners>
                </ext:Button>           
                <ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk">
                    <Listeners>
                        <Click Handler="#{GridPanel1}.save();" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="Button4" runat="server" Text="Clear" Icon="Cancel">
                    <Listeners>
                        <Click Handler="#{GridPanel1}.clear();if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
                    </Listeners>
                </ext:Button>
                
                <ext:Button ID="Button5" runat="server" Text="Refresh" Icon="ArrowRefresh">
                    <Listeners>
                        <Click Handler="#{GridPanel1}.reload();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <DirectEvents>
                <RowDblClick OnEvent="EditEmployee">
                    <ExtraParams>
                        <ext:Parameter Name="Values" Value="#{GridPanel1}.getRowsValues({selectedOnly:true})" Mode="Raw" />
                    </ExtraParams>
                </RowDblClick>
                <Command OnEvent="RowCommandHandler">
                    <ExtraParams>
                        <ext:Parameter Name="Employee" Mode="Raw" Value ="record.data" />
                        <ext:Parameter Name="CMD" Mode="Raw" Value="command" />
                    </ExtraParams>
                </Command>        
            </DirectEvents>
            <Plugins>
                <ext:GridFilters runat="server" Local="true">
                    <Filters>
                        <ext:StringFilter DataIndex="Name_Last" AutoDataBind="true"/>
                    
                    </Filters>
                
                </ext:GridFilters>
            </Plugins>
            
        </ext:GridPanel>
  4. #4
    Hi,

    I tried your code and seems it works fine.

    Here are two variants.

    1. It has been already fixed.

    2. You don't provide all code which is required to reproduce the issue.
    What is getRowClass?

    So, could you provide us with a sample code that we can run without any change?

Similar Threads

  1. TriggerField simple icons not showing
    By Tbaseflug in forum 2.x Help
    Replies: 0
    Last Post: Aug 02, 2012, 10:40 PM
  2. Replies: 0
    Last Post: Sep 30, 2011, 8:43 AM
  3. 2 different command columns in gridpanel
    By abelvn in forum 1.x Help
    Replies: 2
    Last Post: Aug 15, 2011, 5:59 PM
  4. [CLOSED] Icons Not Showing
    By chris.salas in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 28, 2011, 11:34 AM
  5. EXT Icons not showing!
    By Charlene in forum 1.x Help
    Replies: 1
    Last Post: May 01, 2011, 12:18 PM

Tags for this Thread

Posting Permissions