PDA

View Full Version : [CLOSED] An javascript error in component column



capbarbell
Jan 02, 2014, 2:45 AM
When I click checkbox in a component column,

A javascript error "Cannot call method 'addCls' of null" always appear.
While unclick another error "Cannot call method 'removeCls' of null" always appear.

I had update dll file from svn, but the error stille exist.

I also refrence the thread http://forums.ext.net/showthread.php?25125




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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.MainStore.DataSource = new object[]
{
new object[] { 1, 1, "TEST","TX","TEST","TEST",DateTime.Now.Date,"TEST",123.45,10,10,103.45,DateTime.Now.Date,DateTime.No w.Date,1,"TEST","TEST",false,false,10,false,20 }

};

this.MainStore.DataBind();
}
}
</script>
<script type="text/javascript">
var colPaidAmtIndex = 8;
var colBalanceIndex = 10;
var OrgFiledCount = 20; // store欄位數目(未加discount)

var onChkAll = function (editor, e) {
var FieldsCount = Model1.getFields().length; //store中filed數量
var CheckCount = (FieldsCount - OrgFiledCount) / 2; //計算Discount Chekbox數量
var Chk = false;
var InvNo = e.record.data.INV_ID;
var index = 14; //all discount 在view當中的位置

if (e.value == true) {
Chk = true;
}
else {
Chk = false;
}

for (var i = 0; i <= CheckCount - 1; i++) {
var DisColName = "chkDiscountAMT" + i;
var DisAmtColName = "DiscountAMT" + i;
var DiscountAmt = e.record.get(DisAmtColName);
var OrgChk = e.record.get(DisColName);
var AMTPaid = e.record.data.AMTPaid;

if (OrgChk != Chk) {
e.record.set(DisColName, Chk);

if (Chk == true) {
e.record.set('AMTPaid', AMTPaid - DiscountAmt);
}
else {
e.record.set('AMTPaid', AMTPaid + DiscountAmt);
}
e.record.commit();
}
}
}

var onChkDiscount = function (editor, e) {
var DiscountAmt = e.record.get(e.record.fields.getAt(e.colIdx + 6).name);
var InvNo = e.record.data.INV_ID;
var RecBalance = e.record.data.Balance;
var AMTPaid = e.record.data.AMTPaid;

if (e.value == true) {
e.cmp.setValue('true');
e.record.set("AMTPaid", AMTPaid - DiscountAmt);
e.record.set(e.field, "true");
}
else {
e.record.set("AMTPaid", AMTPaid + DiscountAmt);
e.record.set(e.field, "false");
}
e.record.commit();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="MainResourceManager" runat="server" Namespace=""></ext:ResourceManager>
<form id="form1" runat="server">
<div>
<ext:Store ID="MainStore" runat="server" IDMode="Static" WarningOnDirty="false">
<Sorters>
<ext:DataSorter Property="OVERDUE_DATE" Direction="DESC">
</ext:DataSorter>
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID" >
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="RefID" Type="String" />
<ext:ModelField Name="LOC" Type="String" />
<ext:ModelField Name="LOC_NAME" Type="String" />
<ext:ModelField Name="INV_ID" Type="String" />
<ext:ModelField Name="INV_DATE" Type="Date" />
<ext:ModelField Name="PO_ID" Type="String" />
<ext:ModelField Name="AMT" Type="Float" />
<ext:ModelField Name="CumAMTPaid" Type="Float" />
<ext:ModelField Name="CumCrediAmt" Type="Float" />
<ext:ModelField Name="AMTPaid" Type="Float" />
<ext:ModelField Name="ClaimAmt" Type="Float" DefaultValue="0" />
<ext:ModelField Name="Balance" Type="Float" />
<ext:ModelField Name="OVERDUE_DATE" Type="Date" />
<ext:ModelField Name="DeliveryDate" Type="Date" />
<ext:ModelField Name="DetailID" Type="Int" />
<ext:ModelField Name="Status" Type="String" />
<ext:ModelField Name="Comment" Type="String" />
<ext:ModelField Name="DiscountExpired" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="chkDiscountAll" Type="Boolean" />
<ext:ModelField Name="chkDiscountAMT0" Type="Boolean" />
<ext:ModelField Name="DiscountAMT0" Type="Float" />
<ext:ModelField Name="chkDiscountAMT1" Type="Boolean" />
<ext:ModelField Name="DiscountAMT1" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="MainGrid" runat="server" IDMode="Static" Region="Center" StoreID="MainStore"
AutoScroll="true" MonitorResize="true" StripeRows="true" EnableColumnResize="true"
Icon="Table" EnableColumnMove="false" EnableColumnHide="false" SortableColumns="false"
Header="false" Height="245" Scroll="Both" >
<TopBar>

</TopBar>
<ColumnModel ID="MainColumnModel" runat="server">
<Columns>
<ext:Column runat="server" ID="colLoc" Text="LOC" Width="40" DataIndex="LOC_NAME"
Align="Center">
</ext:Column>
<ext:Column runat="server" ID="colInvNo" Text="Invoice #" DataIndex="INV_ID"
Width="90" Align="Center" >
</ext:Column>
<ext:DateColumn runat="server" ID="colInvDate" Text="Invoice Date" DataIndex="INV_DATE"
Width="85" Align="Center" >
</ext:DateColumn>
<ext:Column runat="server" ID="colCustPO" Text="Customer PO" DataIndex="PO_ID"
Width="90" Align="Center" >
</ext:Column>
<ext:NumberColumn runat="server" ID="colInvAmount" Text="Invoice Amount" DataIndex="AMT"
Width="85" Align="Center" >
</ext:NumberColumn>
<ext:NumberColumn runat="server" ID="colCumAMTPaid" Text="Cumulative <BR>Paid Amount" DataIndex="CumAMTPaid"
Width="85" Align="Center" BaseCls="bg4CumPaidAmt" >
</ext:NumberColumn>
<ext:NumberColumn runat="server" ID="colCumCreditAmt" Text="Cumulative <BR>Credit Memo <BR>Amount" DataIndex="CumCrediAmt"
Width="85" Align="Center" BaseCls="bg4CumPaidAmt" >
</ext:NumberColumn>

<ext:ComponentColumn ID="colPaidAmount" runat="server" Text="Paid Amount" Editor="true" DataIndex="AMTPaid" Width="85" Align="Center" >
<Component>
<ext:NumberField ID="PaidAmountEdit" runat="server" HideTrigger="true" Width="80" MinValue="0" >
</ext:NumberField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="colOpenClaim" runat="server" Text="Open Claim" Editor="true" DataIndex="ClaimAmt" Width="85" Align="Center">
<Component>
<ext:NumberField ID="NumberField1" runat="server" HideTrigger="true" Width="80" MinValue="0">
</ext:NumberField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="colBalance" runat="server" Text="Balance" Editor="true" DataIndex="Balance" Width="85" Align="Center">
<Component>
<ext:NumberField ID="NumberField2" runat="server" HideTrigger="true" Width="80" ReadOnly="true" MinValue="0">
</ext:NumberField>
</Component>
</ext:ComponentColumn>
<ext:DateColumn runat="server" ID="colDueDate" Text="Over Due Date" DataIndex="OVERDUE_DATE"
Width="90" Align="Center" >
</ext:DateColumn>
<ext:DateColumn runat="server" ID="colDelivery" Text="Delivery Date" DataIndex="DeliveryDate"
Width="90" Align="Center" >
</ext:DateColumn>
<ext:Column runat="server" ID="colStatus" Text="Status" DataIndex="Status"
Width="60" Align="Center" >
</ext:Column>
<ext:ComponentColumn runat="server" ID="colcompChkAll" Text="All <br> Discount" DataIndex="chkDiscountAll" Editor="true">
<Component >
<ext:Checkbox runat="server" ID="chkDiscountAll"></ext:Checkbox>
</Component>
<Listeners>
<Edit Fn="onChkAll"></Edit>
</Listeners>
</ext:ComponentColumn>

<ext:Column runat="server" ID="test2" Text="TEST1">
<Columns>
<ext:ComponentColumn runat="server" ID="test1" DataIndex="chkDiscountAMT0" Editor="true">
<Component >
<ext:Checkbox runat="server" ID="chkDiscountAMT0" ></ext:Checkbox>
</Component>
<Listeners>
<Edit Fn="onChkDiscount"></Edit>
</Listeners>
</ext:ComponentColumn>
<ext:NumberColumn runat="server" ID="DiscountAMT0" DataIndex="DiscountAMT0" Text="Amount"></ext:NumberColumn>
</Columns>
</ext:Column>

<ext:Column runat="server" ID="Column1" Text="TEST2">
<Columns>
<ext:ComponentColumn runat="server" ID="ComponentColumn1" DataIndex="chkDiscountAMT1" Editor="true">
<Component >
<ext:Checkbox runat="server" ID="chkDiscountAMT1" ></ext:Checkbox>
</Component>
<Listeners>
<Edit Fn="onChkDiscount"></Edit>
</Listeners>
</ext:ComponentColumn>
<ext:NumberColumn runat="server" ID="NumberColumn1" DataIndex="DiscountAMT1" Text="Amount"></ext:NumberColumn>
</Columns>
</ext:Column>
</Columns>
</ColumnModel>

<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="true" >
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</div>
</form>
</body>
</html>


7438

Vladimir
Jan 02, 2014, 7:02 PM
Please replace 'e.record.set' by e.record.data
For example,


e.record.data.AMTPaid = AMTPaid - DiscountAmt;
e.record.data[e.field] = true;


and remove 'e.record.commit();'

capbarbell
Jan 03, 2014, 1:17 AM
I had replace 'e.record.set' by e.record.data and remove 'e.record.commit().
But the data on the grid won't change.

For Example:
While I check Test1 the Paid Amount must minus 10.

7439

capbarbell
Jan 03, 2014, 1:43 AM
Please replace 'e.record.set' by e.record.data
For example,


e.record.data.AMTPaid = AMTPaid - DiscountAmt;
e.record.data[e.field] = true;


and remove 'e.record.commit();'

I had replace 'e.record.set' by e.record.data and remove 'e.record.commit().
But the data on the grid won't change.

For Example:
While I check Test1 the Paid Amount must minus 10.

Vladimir
Jan 04, 2014, 6:11 AM
In this case, try to set small delay to Edit listener


<Edit Fn="onChkDiscount" Delay="100"></Edit>