[CLOSED] GridPanel Buttons not showing up in IE10

[Bert76]

Hi,
I have a problem with my buttons on my grid panel not showing up correctly in IE10 with compatibility mode off. They seem to be there but half a millimeter wide. They look like this:


Here is the code for the grid panel:

<ext:GridPanel runat="server" 
    ID="grdCourseSchedule" 
    Title="Course Schedule" 
    Frame="true" 
    StoreID="stoCourseSchedule" 
    Height="300">
    <ColumnModel ID="clmSchedule" runat="server">
        <Columns>
            <ext:Column DataIndex="CourseDayNumber" Header="Course Day" Width="175">
                <Renderer Fn="courseDayRenderer" />
                <Editor>
                    <ext:ComboBox 
                        ID="cbCourseDay"
                        runat="server" 
                        StoreID="stoDayList"
                        Editable="true"
                        DisplayField="CodeValue"
                        ValueField="CodeName"
                        TypeAhead="true" 
                        Mode="Local"
                        ForceSelection="true"
                        TriggerAction="All"
                        EmptyText="Select..."
                        LoadingText="Loading..."
                        SelectOnFocus="true">
                    </ext:ComboBox>
                </Editor>
            </ext:Column>
            <ext:Column DataIndex="StartTime" Header="Start Time" Width="120">
                <Renderer Fn="courseTimeRenderer" />
                <Editor>
                    <ext:ComboBox 
                        ID="cbStartTime"
                        runat="server" 
                        StoreID="stoTimeList"
                        Editable="true"
                        DisplayField="CodeValue"
                        ValueField="CodeName"
                        TypeAhead="true" 
                        Mode="Local"
                        ForceSelection="true"
                        TriggerAction="All"
                        EmptyText="Select..."
                        LoadingText="Loading..."
                        SelectOnFocus="true">
                    </ext:ComboBox>                                                        
                </Editor>
            </ext:Column>
            <ext:Column DataIndex="EndTime" Header="End Time" Width="120">
                <Renderer Fn="courseTimeRenderer" />
                <Editor>
                    <ext:ComboBox 
                        ID="cbEndTime"
                        runat="server" 
                        StoreID="stoTimeList"
                        Editable="true"
                        DisplayField="CodeValue"
                        ValueField="CodeName"
                        TypeAhead="true" 
                        Mode="Local"
                        ForceSelection="true"
                        TriggerAction="All"
                        EmptyText="Select..."
                        LoadingText="Loading..."
                        SelectOnFocus="true">
                    </ext:ComboBox>                                                        
                </Editor>
            </ext:Column>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="rsmCourseSchedule" runat="server" SingleSelect="true">
            <Listeners>
                <SelectionChange Handler="#{btnDeleteRowCourseSchedule}.enable();" />
            </Listeners>
        </ext:RowSelectionModel>
    </SelectionModel>
    <Buttons>
        <ext:Button ID="btnInsertRowCourseSchedule" runat="server" Text="Insert Row" Icon="TableRowInsert" Width="75">
            <Listeners>
                <Click Handler="#{grdCourseSchedule}.insertRecord(0, {});#{grdCourseSchedule}.getView().focusRow(0);#{grdCourseSchedule}.startEditing(0, 0);" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnDeleteRowCourseSchedule" runat="server" Text="Delete Row" Icon="TableRowDelete" Width="75">
            <Listeners>
                <Click Handler="Ext.MessageBox.confirm('Confirm Delete','Are you sure you wish to delete?',function(btn){if(btn=='yes'){#{grdCourseSchedule}.deleteSelected();if(!#{grdCourseSchedule}.hasSelection()){#{btnDeleteRow}.disable();}}});" />
            </Listeners>
        </ext:Button>
    </Buttons>
</ext:GridPanel>

The width on each button I added as a last resort to try to force them to be wider but to no avail.

Thanks,
Bert

[Daniil]

Hi Bert,

Is that tab not initially active, right?

Please try to set up HideMode="Offsets" for the tab which contains the GridPanel.

If it doesn't help, please post a bit bigger code snippet starting with the tab (again, which contains the GridPanel). To check the layout options.

[Bert76]

Thanks Daniil,
that worked perfectly.

Bert