PDA

View Full Version : ComboBox Bug in GridPanl Toolbar



EzaBlade
Mar 24, 2009, 11:39 AM
****** SAFARI BROWSER ONLY *******

I have several ComboBoxes and TriggerFields in a Toolbar in the TopBar of a GridPanel.

In Safari these do not render correctly. The TextField portion is smaller in height than the Trigger button.

Also, I have a ToolbarFill followed by a ToolBarButton. On first load the ToolbarButton is not located at the end of the Toolbar indicating that the ToolbarFill has not worked. When I float my mouse over the button it jumps to the end of the Toolbar as though the ToolbarFill has then worked.

This is not a problem to me as my users use IE6 but I was simply experimenting and thought you may like to know.

This is the code in the content page which is attached to a master page. I know there is a lot but I didn't want to strip out something that may be causing the problem.






<asp:Content ID="contentCentre" ContentPlaceHolderID="contentCentreHolder" runat="server">


<ext:Panel ID="pnlTable"


runat="server"


Width="910"


Border="false">


<Body>


<ext:TableLayout ID="tblMain" runat="server" Columns="3">


<ext:Cell ColSpan="2">


<ext:GridPanel ID="summaryGrid" runat="server"


StoreID="summaryStore"


Title="Active Amendments"


StripeRows="true"


TrackMouseOver="true"


MonitorResize="true"


Width="600"


Height="275"


StyleSpec="margin-bottom:3px;margin-right:3px" Icon="FolderPage">


<ColumnModel ID="ColumnModel3" runat="server" >


<Columns>


<ext:Column ColumnID="PayrollNo" Header="Payroll No" Sortable="true" DataIndex="PayrollNo" MenuDisabled="true" Width="60" />


<ext:Column ColumnID="Surname" Header="Full Name" Sortable="true" DataIndex="Surname" MenuDisabled="true" Width="150" >


<Renderer Handler="return ''+record.data['Surname']+', '+record.data['Forenames']" />


</ext:Column>


<ext:Column ColumnID="ChangeType" Header="Change Type" Sortable="true" DataIndex="ChangeDescription" MenuDisabled="true" Width="150" />


<ext:Column ColumnID="EffectiveDate" Header="Effective Date" Sortable="true" DataIndex="EffectiveDate" MenuDisabled="true" Width="90">


<Renderer Fn="Ext.util.Format.dateRenderer('d-m-Y')" />


</ext:Column>


<ext:Column ColumnID="Status" Header="Status" Sortable="true" DataIndex="StatusDescription" MenuDisabled="true" Width="130" />


<ext:Column ColumnID="CreatedBy" Header="CreatedBy" Hidden="true" DataIndex="CreatedBy" MenuDisabled="true"/>


<ext:Column ColumnID="ChangeDescription" Header="ChangeDescription" Hidden="true" DataIndex="ChangeDescription" MenuDisabled="true"/>


</Columns>


</ColumnModel>





<SelectionModel>


<ext:RowSelectionModel ID="RowSelectionModel12" runat="server" SingleSelect="true">


<AjaxEvents>


<RowSelect OnEvent="summaryGrid_RowSelect" Buffer="500" >


<EventMask ShowMask="true" />


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</RowSelect>


</AjaxEvents>


</ext:RowSelectionModel>


</SelectionModel>








<TopBar>


<ext:Toolbar ID="Toolbar2" runat="server" >


<Items>


<ext:ComboBox ID="cboStatus" runat="server"


FieldLabel="Status"


StoreID="statusStore"


DisplayField="StatusDescription"


ValueField="StatusID"


Mode="Local"


SelectOnFocus="true"


EmptyText="Select a status..." TriggerAction="All" >


<AjaxEvents>


<Select OnEvent="cboStatus_Select">


<EventMask ShowMask="true" />


</Select>


</AjaxEvents>


</ext:ComboBox>


<ext:ToolbarFill />


<ext:ToolbarButton ID="tbrResetSummary" Text="Reset" Icon="ArrowRefresh">


<AjaxEvents>


<Click OnEvent="tbrResetSummary_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


<ToolTips>


<ext:ToolTip runat="server" Html="Clear the filter" />


</ToolTips>


</ext:ToolbarButton>


</Items>


</ext:Toolbar>


</TopBar>





</ext:GridPanel>





</ext:Cell>








<ext:Cell>


<ext:Panel ID="pnlEmployeeDetails"


runat="server"


Title="Amendment Details"


Width="301"


Height="275"


BodyStyle="font-family:Arial;font-size:11px;padding:3px;margin-bottom:3px;"


AutoScroll="true"


Icon="PageHeaderFooter">


<TopBar>


<ext:Toolbar ID="summaryDetails" runat="server">


<Items>


<ext:ToolbarButton ID="tbrApprove" runat="server" Text="Approve" Icon="PageGo" >


<AjaxEvents>


<Click OnEvent="tbrApprove_Click">


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


<EventMask ShowMask="true"/>


</Click>


</AjaxEvents>


</ext:ToolbarButton>





<ext:ToolbarButton ID="tbrComplete" runat="server" Text="Complete" icon="PageAdd">


<AjaxEvents>


<Click OnEvent="tbrComplete_Click">


<EventMask ShowMask="true"/>


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:ToolbarButton>





<ext:ToolbarButton ID="tbrAction" runat="server" Text="Action" Icon="PageLightning">


<Menu>


<ext:Menu>


<Items>


<ext:MenuItem ID="mnuAmend" runat="server" Text="Amend" Icon="PageEdit">


<AjaxEvents>


<Click OnEvent="mnuAmend_Click">


<EventMask ShowMask="true"/>


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuQuery" runat="server" Text="Query" Icon="PageError">


<AjaxEvents>


<Click OnEvent="mnuQuery_Click">


<EventMask ShowMask="true"/>


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuCancel" runat="server" Text="Cancel" Icon="PageCancel">


<AjaxEvents>


<Click OnEvent="mnuCancel_Click">


<EventMask ShowMask="true"/>


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:MenuItem>


</Items>


</ext:Menu>


</Menu>


</ext:ToolbarButton>





<ext:ToolbarButton ID="tbrComments" runat="server" Text="Notes" Icon="PageAttach" Enabled="false">


<AjaxEvents>


<Click OnEvent="tbrComments_Click">


<EventMask ShowMask="true"/>


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{summaryGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:ToolbarButton>





</Items>


</ext:Toolbar>


</TopBar>


</ext:Panel>





</ext:Cell>








<ext:Cell ColSpan="2">


<ext:GridPanel ID="searchGrid" runat="server"


StoreID="searchStore"


Title="Employee Search"


StripeRows="true"


TrackMouseOver="true"


MonitorResize="true"


Width="600"


Height="235"


StyleSpec="margin-right:3px;" Icon="Find">


<ColumnModel ID="ColumnModel1" runat="server" >


<Columns>


<ext:Column ColumnID="PayrollNo" Header="Payroll No" Sortable="true" DataIndex="PayrollNo" MenuDisabled="true" Width="60" />


<ext:Column ColumnID="Name" Header="Full Name" Sortable="true" DataIndex="Surname" MenuDisabled="true" Width="150">


<Renderer Handler="return ''+record.data['Surname']+', '+record.data['Forenames']" />


</ext:Column>


<ext:Column ColumnID="Location" Header="Location" Sortable="true" DataIndex="LocationName" MenuDisabled="true" Width="150" />


<ext:Column ColumnID="JobTitle" Header="Job Title" Sortable="true" DataIndex="JobTitle" MenuDisabled="true" Width="160"/>


<ext:Column ColumnID="Hours" Header="Hours" Sortable="true" DataIndex="Hours" MenuDisabled="true" Width="60" />


</Columns>


</ColumnModel>





<SelectionModel>


<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">


<AjaxEvents>


<RowSelect OnEvent="searchGrid_RowSelect" Buffer="500" >


<EventMask ShowMask="true"/>


</RowSelect>


</AjaxEvents>


</ext:RowSelectionModel>


</SelectionModel>





<TopBar>


<ext:Toolbar ID="Toolbar3" runat="server" >


<Items>


<ext:TriggerField ID="trgPayrollSearch"


runat="server"


Width="100"


EnableKeyEvents="true"


EmptyText="[Payroll No...]"


SelectOnFocus="true" >


<Triggers>


<ext:FieldTrigger Icon="Search" />


</Triggers>


<AjaxEvents>


<TriggerClick OnEvent="trgPayrollSearch_TriggerClick">


<EventMask ShowMask="true" />


</TriggerClick>


<KeyDown OnEvent="trgPayrollSearch_KeyDown" Before="var e = params[1];var isEnter = e.getKey() == e.ENTER;if(isEnter){e.preventDefault();} return isEnter;">


<EventMask ShowMask="true" />


</KeyDown>


<Focus OnEvent="trgPayrollSearch_Focus" />


</AjaxEvents>


</ext:TriggerField>





<ext:ToolbarSeparator/>





<ext:TriggerField ID="trgSurnameSearch"


runat="server"


Width="120"


EnableKeyEvents="true"


EmptyText="[Surname...]"


SelectOnFocus="true">


<Triggers>


<ext:FieldTrigger Icon="Search" />


</Triggers>


<AjaxEvents>


<TriggerClick OnEvent="trgSurnameSearch_TriggerClick">


<EventMask ShowMask="true" />


</TriggerClick>


<KeyDown OnEvent="trgSurnameSearch_KeyDown" Before="var e = params[1];var isEnter = e.getKey() == e.ENTER;if(isEnter){e.preventDefault();} return isEnter;">


<EventMask ShowMask="true"/>


</KeyDown>


<Focus OnEvent="trgSurnameSearch_Focus" />


</AjaxEvents>


</ext:TriggerField>


<ext:ToolbarSeparator/>





<ext:ComboBox ID="cboLocations" runat="server"


EmptyText="[Location...]"


StoreID="locationsStore"


DisplayField="LocationName"


ValueField="LocationID"


Mode="Local"


Width="130"


SelectOnFocus="true"


TriggerAction="All">


<AjaxEvents>


<Select OnEvent="cboLocations_Select">


<EventMask ShowMask="true" />


</Select>


<Focus OnEvent="cboLocations_Focus" />


</AjaxEvents>


</ext:ComboBox>





<ext:ToolbarSeparator/>


<ext:ComboBox ID="cboJobTitle" runat="server"


StoreID="jobsStore"


DisplayField="JobTitle"


ValueField="JobTypeID"


Mode="Local"


SelectOnFocus="true"


EmptyText="[Job Title...]"


TriggerAction="All">


<AjaxEvents>


<Select OnEvent="cboJobTitle_Select">


<EventMask ShowMask="true" />


</Select>


<Focus OnEvent="cboJobTitle_Focus" />


</AjaxEvents>


</ext:ComboBox>





<ext:ToolbarFill />





<ext:ToolbarButton ID="tbrResetSearch" Text="Reset" Icon="ArrowRefresh">


<AjaxEvents>


<Click OnEvent="tbrResetSearch_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:ToolbarButton>


</Items>


</ext:Toolbar>


</TopBar>


</ext:GridPanel>





</ext:Cell>








<ext:Cell>


<ext:GridPanel ID="historyGrid" runat="server"


StoreID="historyStore"


Title="Amendment History"


Header="true"


StripeRows="true"


Icon="Table"


Border="true"


Width="301"


Height="235"


TrackMouseOver="true">


<ColumnModel ID="ColumnModel2">


<Columns>


<ext:Column ColumnID="EffectiveDate" Header="Eff Date" DataIndex="EffectiveDate" Sortable="false" MenuDisabled="true" Width="65">


<Renderer Fn="Ext.util.Format.dateRenderer('d-m-Y')" />


</ext:Column>


<ext:Column ColumnID="ChangeDesc" Header="Change Type" DataIndex="ChangeDescription" Sortable="false" MenuDisabled="true" Width="110" />


<ext:Column ColumnID="Status" Header="Status" DataIndex="StatusDescription" Sortable="false" MenuDisabled="true" Width="105"/>


<%-- Hidden columns--%>


<ext:Column ColumnID="ChangeTypeID" Header="" DataIndex="ChangeTypeID" Sortable="false" Hidden="true" MenuDisabled="true" />


<ext:Column ColumnID="ChangeTypeDetailID" Header="" DataIndex="ChangeTypeDetailID" Sortable="false" Hidden="true" MenuDisabled="true" />


<ext:Column ColumnID="PayrollNo" Header="" DataIndex="PayrollNo" Sortable="false" Hidden="true" MenuDisabled="true" />


<ext:Column ColumnID="StatusID" Header="Status ID" DataIndex="StatusID" Sortable="false" Hidden="true" MenuDisabled="true" />


</Columns>


</ColumnModel>





<SelectionModel>


<ext:RowSelectionModel ID="RowSelectionModel3" runat="server" SingleSelect="true">


</ext:RowSelectionModel>


</SelectionModel>


<AjaxEvents>


<RowDblClick OnEvent="historyGrid_RowDblClick">


<EventMask ShowMask="true" />


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{historyGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</RowDblClick>


</AjaxEvents>





<TopBar>


<ext:Toolbar ID="Toolbar1" runat="server">


<Items>


<ext:ToolbarButton ID="tbrView" runat="server" Text="View" Icon="TableRow">


<AjaxEvents>


<Click OnEvent="tbrView_Click">


<EventMask ShowMask="true" />


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{historyGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:ToolbarButton>


<ext:ToolbarButton ID="tbrsAdd" runat="server" Text="Add" Icon="TableAdd">


<Menu>


<ext:Menu ID="mnuPChanges" runat="server">


<Items>


<ext:MenuItem ID="mnuPromotion" runat="server" Text="Promotion/Demotion" Icon="UserStar">


<AjaxEvents>


<Click OnEvent="mnuPromotion_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuTransfer" runat="server" Text="Transfer" Icon="MapGo">


<AjaxEvents>


<Click OnEvent="mnuTransfer_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuNewHrs" runat="server" Text="New Hours" Icon="Time">


<AjaxEvents>


<Click OnEvent="mnuNewHrs_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuPCV" runat="server" Text="PCV Licence" Icon="Lorry">


<AjaxEvents>


<Click OnEvent="mnuPCV_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuActingUp" runat="server" Text="Acting Up (Start)" Icon="ArrowUp">


<AjaxEvents>


<Click OnEvent="mnuActingUp_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuActingUpEnd" runat="server" Text="Acting Up (End)" Icon="ArrowDown">


<AjaxEvents>


<Click OnEvent="mnuActingUpEnd_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


<ext:MenuItem ID="mnuResignation" runat="server" Text="Resignation/Dismissal" Icon="UserDelete">


<AjaxEvents>


<Click OnEvent="mnuResignation_Click">


<EventMask ShowMask="true" />


</Click>


</AjaxEvents>


</ext:MenuItem>


</Items>


</ext:Menu>


</Menu>


</ext:ToolbarButton>


<ext:ToolbarButton ID="tbrsEdit" runat="server" Text="Edit" Icon="TableEdit">


<AjaxEvents>


<Click OnEvent="tbrsEdit_Click">


<EventMask ShowMask="true" />


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{historyGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:ToolbarButton>


<ext:ToolbarButton ID="tbrsDelete" runat="server" Text="Delete" icon="TableDelete">


<AjaxEvents>


<Click OnEvent="tbrsDelete_Click">


<EventMask ShowMask="true" />


<ExtraParams>


<ext:Parameter Name="Values" Value="Ext.encode(#{historyGrid}.getRowsValues())" Mode="Raw" />


</ExtraParams>


</Click>


</AjaxEvents>


</ext:ToolbarButton>


</Items>


</ext:Toolbar>


</TopBar>


</ext:GridPanel>





</ext:Cell>





</ext:TableLayout>


</Body>


</ext:Panel>


</asp:Content>