View Full Version : [CLOSED] Unable to find GridPanel in Ext.onReady

Apr 08, 2013, 7:31 AM

I am unable to find the grid panel or the store in the ext.onready or any method when I use Ext.getCmp.

Following is the piece of sample code that I am using. I have a grid, a store and a button in my page. When I try to find the grid in the onready function or in the function named 'gridFind', called on button click, I get an alert which says undefined.

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<script type="text/javascript">
Ext.onReady(function () {
//create the grid

var grid = Ext.getCmp("<%= grd.ClientID %>");


var storedata = Ext.getCmp("<%= Store.ClientID %>");


function gridFind() {
var grid = Ext.getCmp("<%= grd.ClientID %>");
<ext:FormPanel ID="FormPanel1" runat="server" Layout="HBoxLayout" Border="false">
<FieldDefaults LabelAlign="Left" MsgTarget="Side" />
<ext:GridPanel ID="grd" MinHeight="200" Flex="50" Region="Center" runat="server"
Title='lbl' MarginSpec="5" Header="true">
<ext:Store ID="Store" runat="server" PageSize="10">
<ext:Model ID="Model1" runat="server">
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="CreatedBy" />
<ext:ModelField Name="CreatedDate" DateFormat="yyyy-MM-ddTHH:mm:ss" Type="Date" />
<ext:ModelField Name="CreatedIP" />
<ext:ModelField Name="ModifiedBy" />
<ext:ModelField Name="ModifiedDate" DateFormat="yyyy-MM-ddTHH:mm:ss" Type="Date" />
<ext:ModelField Name="ModifiedIP" />
<ColumnModel ID="ColumnModel" runat="server">
<ext:Column ID="Name" runat="server" Text='lblName' DataIndex="Name" Flex="4" />
<ext:Column ID="Description" runat="server" Text='lblDescription' DataIndex="Description"
<ext:DateColumn ID="CreatedDate" runat="server" Text='lblCreatedDate' DataIndex="CreatedDate"
Flex="4" />
<ext:DateColumn ID="ModifiedDate" runat="server" Text='lblModifiedDate' DataIndex="ModifiedDate"
Flex="4" />
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
<SelectionChange Handler="if (selected[0]) { #{FormPanel1}.getForm().loadRecord(selected[0]);#{btnEdit}.enable(); #{btnDelete}.enable(); }" />
<ext:GridFilters ID="GridFilters1" runat="server" Local="true">
<ext:StringFilter DataIndex="Name" />
<ext:StringFilter DataIndex="Description" />
<ext:DateFilter DataIndex="CreatedDate">
<DatePickerOptions runat="server" TodayText="Now" />
<ext:DateFilter DataIndex="ModifiedDate">
<DatePickerOptions runat="server" TodayText="Now" />
<ext:PagingToolbar ID="Pager1" HideRefresh="true" runat="server" />
<ext:FieldSet ID="FieldSet1" MinHeight="200" Flex="40" Visible="true" runat="server"
Title='lbl' MarginSpec="5" ButtonAlign="Right" Layout="TableLayout">
<ext:TableLayoutConfig Columns="2">
<ext:Container ColSpan="2" runat="server" ID="myid">
<ext:Hidden ID="hdnID" Name="Id" runat="server">
<ext:Label ID="lblName" runat="server" Text='lblName' Padding="5" />
<ext:TextField ID="txtName" Name="Name" runat="server" AllowBlank="false" Padding="5"
MaxLength="50" EnforceMaxLength="true" Regex="^(?=.*\S).+$" />
<ext:Label ID="lblDescription" runat="server" Text='lblDescription' Padding="5" />
<ext:TextArea ID="txtDesc" Name="Description" runat="server" Padding="5" MaxLength="150"
EnforceMaxLength="true" Regex="^(?=.*\S).+$" />
<ext:Label ID="lblBlank" runat="server">
<ext:Panel ID="pnlSaveCancel" runat="server" Layout="HBoxLayout" Border="False" ColSpan="1">
<ext:Button ID="btnSave" runat="server" Text='Click to call JS Function' Flex="2"
<Click Handler="gridFind();">
<ext:Container ID="cntBlank" runat="server" Flex="10">

Hoping for a quick response.

Apr 08, 2013, 8:41 AM
Hi @vijay.sahu,

Ext.NET also generates an Ext.onReady script and it is executed after your one.

To change the sequence, set up a ResourcePlaceholder control with the Mode="Script" option.

<ext:ResourcePlaceHolder runat="server" Mode="Script" />

Ext.onReady(function () {