[CLOSED] [1.0] ColumnModel JavaScript errors

**egodoy** · Apr 28, 2010, 3:53 PM

Hello,

In version 1.0 we started to get JavaScript errors in the code added bellow.
This happens on an editable Gridpanel, as soon as the user tabs out of the first field/column.
"Microsoft JScript runtime error: 'this.getColumnModel().config.1.editor.field.store ' is null or not an object"
and it highlights the following in the JavaScript debugger;
{this.getColumnModel().config[1].editor.field.store.clearFilter();}

I'm not sure if I still nedd to have the following on the GridPanel, which is were we're getting the errors

</p>


<Listeners>
 <AfterEdit Handler="this.getColumnModel().config[1].editor.field.store.clearFilter();" />
</Listeners></p>

If I remove this code, I get the following JavaScript Error
"Microsoft JScript runtime error: Object doesn't support this property or method"
and Highlights the following in the dubugger;
return this.config[a].getCellEditor(b)

Bellow is the Html code

</p>


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpeakerSelectionType.aspx.cs"
    Inherits="WebClientTrackerII.App.Admin.SpeakerSelectionType" %></p>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Styles/Stylesheet1.css" rel="stylesheet" type="text/css" /></p>


    <script src="/Scripts/TrackerII.js" type="text/javascript"></script></p>


    <script src="../References.js" type="text/javascript"></script></p>


    <script language="javascript" type="text/javascript"></p>


        var submitValue = function(grid, hiddenFormat, format) {
            hiddenFormat.setValue(format);
            grid.submitData(false);
        }
    </script></p>


</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="SpeakerSelectionTypeManager" runat="server" Theme="Gray" />
    <asp:SqlDataSource ID="SqlDataSourceSpeakerSelectionType" runat="server" ConnectionString="<%$ connectionStrings:DBConnectionString %>"
        ProviderName="<%$ connectionStrings:DBConnectionString.ProviderName %>" 
        SelectCommand="SELECT SPKR_SLCTN_TYPE_ID,
                    SPKR_SLCTN_TYPE_NM,
                    SPKR_SLCTN_TYPE_ACTV_IND,
                    SPKR_SLCTN_TYPE_CRTD_ID,
                    SPKR_SLCTN_TYPE_UPDT_ID
                    FROM TRACKER2.SPKR_SLCTN_TYPE" 
                    InsertCommand="INSERT INTO TRACKER2.SPKR_SLCTN_TYPE
                    (SPKR_SLCTN_TYPE_NM,
                     SPKR_SLCTN_TYPE_ACTV_IND,
                     SPKR_SLCTN_TYPE_CRTD_ID,
                     SPKR_SLCTN_TYPE_UPDT_ID)
                     Values
                     (:SPKR_SLCTN_TYPE_NM,
                     :SPKR_SLCTN_TYPE_ACTV_IND,
                     :SPKR_SLCTN_TYPE_CRTD_ID,
                     :SPKR_SLCTN_TYPE_UPDT_ID)" DeleteCommand="DELETE FROM TRACKER2.SPKR_SLCTN_TYPE WHERE SPKR_SLCTN_TYPE_ID =:SPKR_SLCTN_TYPE_ID"
        UpdateCommand="UPDATE TRACKER2.SPKR_SLCTN_TYPE 
                      SET SPKR_SLCTN_TYPE_NM = :SPKR_SLCTN_TYPE_NM,
                        SPKR_SLCTN_TYPE_ACTV_IND =:SPKR_SLCTN_TYPE_ACTV_IND,
                        SPKR_SLCTN_TYPE_UPDT_ID =:SPKR_SLCTN_TYPE_UPDT_ID WHERE (SPKR_SLCTN_TYPE_ID =:SPKR_SLCTN_TYPE_ID)">
        <InsertParameters>
            <asp:Parameter Name="SPKR_SLCTN_TYPE_NM" Type="String" />
            <asp:Parameter Name="SPKR_SLCTN_TYPE_ACTV_IND" Type="String" />
            <asp:SessionParameter Name="SPKR_SLCTN_TYPE_CRTD_ID" SessionField="UserNetworkName" />
            <asp:SessionParameter Name="SPKR_SLCTN_TYPE_UPDT_ID" SessionField="UserNetworkName" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="SPKR_SLCTN_TYPE_NM" Type="String" />
            <asp:Parameter Name="SPKR_SLCTN_TYPE_ACTV_IND" Type="String" />
            <asp:SessionParameter Name="SPKR_SLCTN_TYPE_UPDT_ID" SessionField="UserNetworkName" />
            <asp:Parameter Name="SPKR_SLCTN_TYPE_ID" Type="String" />
        </UpdateParameters>
        <DeleteParameters>
            <asp:Parameter Name="SPKR_SLCTN_TYPE_ID" Type="String" />
        </DeleteParameters>
    </asp:SqlDataSource>
    <ext:Store ID="storeSpeakerSelectionType" runat="server" DataSourceID="SqlDataSourceSpeakerSelectionType"
        OnRefreshData="SpeakerSelectionType_Refresh" OnSubmitData="Store1_Submit" UseIdConfirmation="true"
        OnAfterDirectEvent="SpeakerSelectionType_AfterDirectEvent" IgnoreExtraFields="true"
        ShowWarningOnFailure="false" OnBeforeRecordInserted="storeSpeakerSelectionType_BeforeRecordInserted"
        OnBeforeRecordUpdated="storeSpeakerSelectionType_BeforeRecordUpdated">
        <DirectEventConfig IsUpload="true" />
        <Reader>
            <ext:JsonReader IDProperty="SPKR_SLCTN_TYPE_ID">
                <Fields>
                    <ext:RecordField Name="SPKR_SLCTN_TYPE_NM" />
                    <ext:RecordField Name="SPKR_SLCTN_TYPE_ACTV_IND" Type="Boolean">
                        <Convert Fn="convert" />
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
        <SortInfo Field="SPKR_SLCTN_TYPE_NM" Direction="ASC" />
        <Listeners>
            <LoadException Handler="Ext.Msg.alert('Speaker Selection Type - Load failed', e.message || e )" />
            <CommitFailed Handler="Ext.Msg.alert('Speaker Selection Type - Commit failed', 'Reason: ' + msg)" />
            <SaveException Handler="Ext.Msg.alert('Speaker Selection Type - Save failed', e.message || e)" />
            <CommitDone Handler="Ext.Msg.alert('Speaker Selection Type - Commit', 'The data was successfully saved');" />
        </Listeners>
    </ext:Store>
    <ext:Viewport ID="SpeakerSelectionTypeViewport1" runat="server">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel1" runat="server" Title="" BodyStyle="border-width:3px;" Layout="Fit">
                        <TopBar>
                            <ext:Toolbar ID="tlbr1" runat="server" CtCls="gridTopToolbar">
                                <Items>
                                    <ext:ToolbarFill />
                                    <ext:Button ID="excelBtn" runat="server" Text="Export to Excel" Icon="PageExcel"
                                        StandOut="true">
                                        <Listeners>
                                            <Click Handler="submitValue(#{grdpnlSpeakerSelType}, #{FormatType}, 'xls');" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Content>
                            <ext:GridPanel ID="grdpnlSpeakerSelType" runat="server" StoreID="storeSpeakerSelectionType"
                                StripeRows="true" Title="" Header="false" Border="false" CtCls="gridToolbar"
                                ClicksToEdit="1">
                                <ColumnModel ID="SpeakerSelectionTypeModel" runat="server">
                                    <Columns>
                                        <ext:Column Header="Selection Name" DataIndex="SPKR_SLCTN_TYPE_NM" Width="400"
                                            Sortable="true">
                                            <Editor>
                                                <ext:TextField ID="typeNameTxtx" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:CheckColumn ColumnID="SPKR_SLCTN_TYPE_ACTV_IND" Width="60" Editable="true" DataIndex="SPKR_SLCTN_TYPE_ACTV_IND"
                                            Header="Active?" Align="Center">
                                            <Editor>
                                                <ext:Checkbox ID="chkbx1" runat="server">
                                                   
                                                </ext:Checkbox>
                                            </Editor>
                                        </ext:CheckColumn>
                                    </Columns>
                                </ColumnModel>
                                 <Listeners>
                                        <AfterEdit Handler="this.getColumnModel().config[1].editor.field.store.clearFilter();" />
                                    </Listeners>
                                <Plugins>
                                    <ext:GridFilters runat="server" ID="grdFilterSpeakerSelectionType" Local="true">
                                        <Filters>
                                            <ext:StringFilter DataIndex="SPKR_SLCTN_TYPE_NM" />
                                        </Filters>
                                    </ext:GridFilters>
                                </Plugins>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel4" runat="server">
                                        <Listeners>
                                            <RowSelect Handler="#{btnDelete}.enable();" />
                                            <RowDeselect Handler="if (!#{grdpnlSpeakerSelType}.hasSelection()) {#{btnDelete}.disable();}" />
                                        </Listeners>
                                    </ext:RowSelectionModel>
                                </SelectionModel>
                                <BottomBar>
                                    <ext:PagingToolbar ID="PagingToolBar4" runat="server" PageSize="12" CtCls="gridToolbar" />
                                </BottomBar>
                                <LoadMask ShowMask="true" />
                                <KeyMap>
                                    <ext:KeyBinding>
                                        <Keys>
                                            <ext:Key Code="DELETE" />
                                        </Keys>
                                        <Listeners>
                                            <Event Handler="deleteRows(#{grdpnlSpeakerSelType});" />
                                        </Listeners>
                                    </ext:KeyBinding>
                                </KeyMap>
                            </ext:GridPanel>
                        </Content>
                        <Buttons>
                            <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{grdpnlSpeakerSelType}.save();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnDelete" runat="server" Text="Delete selected records" Icon="Delete"
                                Disabled="true">
                                <Listeners>
                                    <Click Handler="deleteRows(#{grdpnlSpeakerSelType});" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnInsert" runat="server" Text="Insert" Icon="Add">
                                <Listeners>
                                    <Click Handler="#{grdpnlSpeakerSelType}.insertRecord(0, {});#{grdpnlSpeakerSelType}.getView().focusRow(0);#{grdpnlSpeakerSelType}.startEditing(0, 0);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
                                <Listeners>
                                    <Click Handler="#{grdpnlSpeakerSelType}.reload();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Content>
    </ext:Viewport>
    <ext:Hidden ID="FormatType" runat="server" />
    </form>
</body>
</html></p>

Any help will be appreciatted thank you in advance,

**Vladimir** · Apr 29, 2010, 6:20 AM

Hi,

You don't need this listener because the editor of the second column has no store reference

<AfterEdit Handler="this.getColumnModel().config[1].editor.field.store.clearFilter();" />

Also CheckColumn is not required Editor (CheckColumn doesn't support custom editor). Please remove editor

Unfortunatelly I cannot test you code therefore I cannot say that the above suggestions can fix all errors in your example. If you have still problems then please post the code which we can run locally

**egodoy** · Apr 29, 2010, 10:59 AM

Vladsch,
I have attached a sample for you to test the JavaScript error.
I'm using the latest SVN code as of April 28, 2010.

Steps to reproduce;

1) Click on the Date Column as you were going to edit
2) Tab out
3) You will get the Javascript Error;
"Microsoft JScript runtime error: Object doesn't support this property or method"

4) Debugger shows the following JavaScript code;
"return this.config[a].getCellEditor(b)"

Form the Ext.Net.Samples

<%@ Page Language="C#" %>


<%@ Import Namespace="System.Collections.Generic" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    public class Company
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public double Change { get; set; }
        public double PctChange { get; set; }
        public DateTime LastChange { get; set; }
        public string ActiveRec {get; set;}
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }


    private void BindData()
    {
        this.GridPanel1.Store.Primary.DataSource = this.GetData();
        this.GridPanel1.Store.Primary.DataBind();
    }


    private List<Company> GetData()
    {
        return new List<Company> 
        {
            new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now, ActiveRec = "Y" },
            new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now ,ActiveRec = "Y" },
            new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now ,ActiveRec = "Y" },
            new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now ,ActiveRec = "Y" },
            new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now ,ActiveRec = "Y" },
            new Company { ID = 6, Name = "AT&amp;T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now ,ActiveRec = "Y" },


        };
    }


    [DirectMethod(Namespace = "CompanyX")]
    public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
    {
        string message = "Property: {0}<br />Field: {1}<br />Old Value: {2}<br />New Value: {3}";


        // Send Message...
        X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();


        this.GridPanel1.Store.Primary.CommitChanges();
    }
</script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    


    <script type="text/javascript">
        var template = '{1}';


        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };


        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
        
        var startEditing = function (e) {
            if (e.getKey() === e.ENTER) {
                var grid = GridPanel1,
                    record = grid.getSelectionModel().getSelected(),
                    index = grid.store.indexOf(record);
                    
                grid.startEditing(index, 1);
            }
        };
        
        var afterEdit = function (e) {
            /*
            Properties of 'e' include:
                e.grid - This grid
                e.record - The record being edited
                e.field - The field name being edited
                e.value - The value being set
                e.originalValue - The original value for the field, before the edit.
                e.row - The grid row index
                e.column - The grid column index
            */
            
            // Call DirectMethod
            CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
        };
        
        function convert(v) {
     if (v == "Y") {
         return true;
     }
 
     if (v == "N") {
         return false;
     }
}
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
    
    <h1>Editable GridPanel With Save To [DirectMethod]</h1>
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Editable GridPanel" 
        StripeRows="true"
        TrackMouseOver="true"
        Width="600" 
        Height="350"
        AutoExpandColumn="Name">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Price" Type="Float" />
                            <ext:RecordField Name="Change" Type="Float" />
                            <ext:RecordField Name="PctChange" Type="Float" />
                            <ext:RecordField Name="LastChange" Type="Date" />
                            <ext:RecordField Name="ActiveRec" Type="Boolean">
                             <Convert Fn="convert" />
                            </ext:RecordField>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <Listeners>
            <KeyDown Fn="startEditing" />
            <AfterEdit Fn="afterEdit" />
        </Listeners>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="ID" Width="35" />
                <ext:Column ColumnID="Name" Header="Name" DataIndex="Name">
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Price" DataIndex="Price">
                    <Renderer Format="UsMoney" />
                    <Editor>
                        <ext:TextField ID="TextField2" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" DataIndex="Change">
                    <Renderer Fn="change" />
                    <Editor>
                        <ext:TextField ID="TextField3" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" DataIndex="PctChange">
                    <Renderer Fn="pctChange" />
                    <Editor>
                        <ext:TextField ID="TextField4" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd">
                    <Editor>
                        <ext:DateField ID="DateField1" runat="server" />
                    </Editor>
                </ext:DateColumn>
                 <ext:CheckColumn ColumnID="ActiveRec" Width="60" Editable="true" DataIndex="ActiveRec"
                                              Header="Active?" Align="Center"/>
                                   
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
    </ext:GridPanel>          
</body>
</html>

**Vladimir** · Apr 29, 2010, 11:18 AM

Hi,

The js error is fixed. Please update from SVN

Thread: [CLOSED] [1.0] ColumnModel JavaScript errors

Thread Tools

Search Thread

Display

[CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

Similar Threads

[CLOSED] MultiCombo and NumberField Javascript Errors

[CLOSED] Help debugging various javascript errors

Javascript errors when upgrading to 0.8.2

[CLOSED] javascript errors with the latest

javascript errors when render

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.0] ColumnModel JavaScript errors

[CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

RE: [CLOSED] [1.0] ColumnModel JavaScript errors

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us