Button in HeaderRow of GridView gives weird Ajax exception

[lordofthexings]

Im getting an exception when I call an ajax method from a button inside the HEaderRow of a Grid.
Just for testing I created two more buttons and I m calling the same ajax method from them and they both work fine.
In the attached screen "SearchButtonInGrid1" is giving the ajax failure error whereas the other 2 buttons are not giving an error when they are calling the same ajax method.
I also replaced the content of the ajaxmethod to see if thats the causing it but even the simplest code gives the same Ajax call failure error
SO tthe button is not allowed to make an ajax call from what I understood
This i s the Grid giving the error
Any ideas
and how can I show the actual error when an ajax call failes?

<ext:GridPanel ID="GridPanel1" runat="server" Border="true" StoreID="Store1" Visible="false"
StripeRows="true" Title="Array Grid" TrackMouseOver="true" Width="600" Height="350"
AutoWidth="true" EnableViewState ="false" >
<ColumnModel ID="ctl25" Height="600px">
<Columns>
<ext:CommandColumn Width="60">
<Commands>
<ext:GridCommand Icon="NoteEdit" CommandName="Edit" StandOut="true">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<%-- <BottomBar>
<ext:PagingToolbar PageSize="25" ID="ctl24">
</ext:PagingToolbar>
</BottomBar>--%>
<AjaxEvents>
<CellClick OnEvent="GetRowValues" Failure="Ext.MessageBox.alert('An error has occurred', '');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{GridPanel1}.body}" />
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.util.Format.htmlEncode(Ext.encode(#{Gri dPanel1}.getRowsValues()))"
Mode="Raw" />
</ExtraParams>
</CellClick>
</AjaxEvents>
<View>
<ext:GridView ID="GridView1" runat="server" ScrollOffset="0" StandardHeaderRow="True" EnableViewState="false" >
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="btnSearchInGrid1" Text="SearchButtonInGrid1" runat="server" EnableViewState="false" >
<AjaxEvents>
<Click OnEvent="btnSearch_Click2" Failure="Ext.MessageBox.alert('Search failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{GridPanel1}.body}" />
</Click>
</AjaxEvents>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
<GetRowClass Handler="" FormatHandler="False"></GetRowClass>
</ext:GridView>
</View>
</ext:GridPanel>


[img]file:///C:/Temp/moz-screenshot.png[/img]

[lordofthexings]

I found why I was getting the Ajax error
After checking from FireBug I see that it s an error of "The control with ID 'btnSearch' not found."
This button is in the header of GridView and its a design time control so I m not adding from codebehind.
Initially when the page is loaded the GridPanel is visible=false when I change that to true the issue gets resolved.
So its not assuming the control's existence because it's container (GridPanel) was not visible
Now is this a bug?