PDA

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



vijay.sahu
Apr 08, 2013, 8:31 AM
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
Apr 08, 2013, 9: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" />

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