[CLOSED] Unable to find GridPanel in Ext.onReady

[vijay.sahu]

Hi,

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 %>");

            alert(grid);

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

        });

        function gridFind() {
            var grid = Ext.getCmp("<%= grd.ClientID %>");
            alert(grid);
        }
    </script>
    <ext:FormPanel ID="FormPanel1" runat="server" Layout="HBoxLayout" Border="false">
        <FieldDefaults LabelAlign="Left" MsgTarget="Side" />
        <Items>
            <ext:GridPanel ID="grd" MinHeight="200" Flex="50" Region="Center" runat="server"
                Title='lbl' MarginSpec="5" Header="true">
                <Store>
                    <ext:Store ID="Store" runat="server" PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <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" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy>
                            </ext:PageProxy>
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel" runat="server">
                    <Columns>
                        <ext:Column ID="Name" runat="server" Text='lblName' DataIndex="Name" Flex="4" />
                        <ext:Column ID="Description" runat="server" Text='lblDescription' DataIndex="Description"
                            Flex="4">
                        </ext:Column>
                        <ext:DateColumn ID="CreatedDate" runat="server" Text='lblCreatedDate' DataIndex="CreatedDate"
                            Flex="4" />
                        <ext:DateColumn ID="ModifiedDate" runat="server" Text='lblModifiedDate' DataIndex="ModifiedDate"
                            Flex="4" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
                <Listeners>
                    <SelectionChange Handler="if (selected[0]) { #{FormPanel1}.getForm().loadRecord(selected[0]);#{btnEdit}.enable(); #{btnDelete}.enable();   }" />
                </Listeners>
                <Features>
                    <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
                        <Filters>
                            <ext:StringFilter DataIndex="Name" />
                            <ext:StringFilter DataIndex="Description" />
                            <ext:DateFilter DataIndex="CreatedDate">
                                <DatePickerOptions runat="server" TodayText="Now" />
                            </ext:DateFilter>
                            <ext:DateFilter DataIndex="ModifiedDate">
                                <DatePickerOptions runat="server" TodayText="Now" />
                            </ext:DateFilter>
                        </Filters>
                    </ext:GridFilters>
                </Features>
                <BottomBar>
                    <ext:PagingToolbar ID="Pager1" HideRefresh="true" runat="server" />
                </BottomBar>
            </ext:GridPanel>
            <ext:FieldSet ID="FieldSet1" MinHeight="200" Flex="40" Visible="true" runat="server"
                Title='lbl' MarginSpec="5" ButtonAlign="Right" Layout="TableLayout">
                <LayoutConfig>
                    <ext:TableLayoutConfig Columns="2">
                    </ext:TableLayoutConfig>
                </LayoutConfig>
                <Items>
                    <ext:Container ColSpan="2" runat="server" ID="myid">
                        <Items>
                            <ext:Hidden ID="hdnID" Name="Id" runat="server">
                            </ext:Hidden>
                        </Items>
                    </ext:Container>
                    <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:Label>
                    <ext:Panel ID="pnlSaveCancel" runat="server" Layout="HBoxLayout" Border="False" ColSpan="1">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig>
                            </ext:HBoxLayoutConfig>
                        </LayoutConfig>
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Text='Click to call JS Function' Flex="2"
                                Icon="Disk">
                                <Listeners>
                                    <Click Handler="gridFind();">
                                    </Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Panel>
                </Items>
                <Content>
                </Content>
            </ext:FieldSet>
            <ext:Container ID="cntBlank" runat="server" Flex="10">
            </ext:Container>
        </Items>
    </ext:FormPanel>

Hoping for a quick response.

[Daniil]

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" />

<script>
    Ext.onReady(function () {
        alert(App.GridPanel1);    
    });
</script>