Jun 22, 2016, 11:59 AM
[CLOSED] Blur problem on Gridpanel
Hi,
I use blur event on gridpanel cells to make some calculations with every change. But blur just work with Tab key. Enter or mouse click works in second fire. How can I fix this problem?
Note: I want to upload minimized project source code, but I couldn't upload zip file.
Aspx:
I use blur event on gridpanel cells to make some calculations with every change. But blur just work with Tab key. Enter or mouse click works in second fire. How can I fix this problem?
Note: I want to upload minimized project source code, but I couldn't upload zip file.
Aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ExtNetGrid.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="Theme/style/efatura_portal.css" rel="stylesheet" />
<script src="Theme/js/jquery-1.11.3.min.js"></script>--%>
<script src="Theme/JavaScript1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="rsmCreateInvoice" runat="server">
</ext:ResourceManager>
<ext:ObjectHolder ID="DataHolder" runat="server" />
<ext:Store ID="store1" runat="server">
<Model>
<ext:Model ID="mdlServiceInfo" runat="server">
<Fields>
<ext:ModelField Name="OrderNo" Type="Int" />
<ext:ModelField Name="ServiceItems" Type="String" />
<ext:ModelField Name="Amount" Type="Float" />
<ext:ModelField Name="UnitPrice" Type="Float" />
<ext:ModelField Name="DiscountRate" Type="Float" />
<ext:ModelField Name="DiscountAmount" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel
ID="gpServiceInfo"
runat="server"
Width="910"
Height="250"
MarginSpec="0 0 10 10"
Title="Service Info"
AutoScroll="true"
EnableColumnMove="false"
StoreID="store1" AutoDataBind="true" FocusOnToFront="false">
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" StyleSpec="background-color: #DFE8F6">
<Items>
<ext:FieldContainer runat="server" Layout="HBoxLayout" StyleSpec="background-color: #DFE8F6">
<Items>
<ext:Button ID="btnAddRow" runat="server" Text="Add Row" Icon="Add">
<Listeners>
<Click Fn="addNewRowToServiceInfo" />
</Listeners>
</ext:Button>
<ext:BoxSplitter runat="server" />
<ext:Button ID="btnDeleteRow" runat="server" Text="Remove Row" Icon="Delete" Disabled="true">
<Listeners>
<Click Fn="removeServiceInfoRow" />
</Listeners>
</ext:Button>
</Items>
</ext:FieldContainer>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1"
runat="server"
Text="Order</br>No"
DataIndex="OrderNo"
Width="40"
ColumnWidth="1"
Align="Center"
Sortable="false">
<%--<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />--%>
</ext:RowNumbererColumn>
<ext:Column
ID="clmServiceItems"
runat="server"
Text="Goods/Service"
DataIndex="ServiceItems"
Flex="1"
Width="110"
Align="Left"
MenuDisabled="true"
ColumnWidth="1"
TabIndex="0" Sortable="false">
<Editor>
<ext:TextField ID="txfEditorServiceItems" runat="server" AllowBlank="false" SelectOnFocus="true" />
</Editor>
</ext:Column>
<ext:NumberColumn
ID="clmAmount"
runat="server"
Text="Amount"
DataIndex="Amount"
Flex="1"
Width="56"
MenuDisabled="true"
Sortable="False"
ColumnWidth="1"
TabIndex="1">
<Editor>
<ext:NumberField ID="nmfEditorQuantity" runat="server" AllowBlank="false" DecimalSeparator="," SelectOnFocus="true" MinValue="0" HideTrigger="true">
<Listeners>
<Blur Handler="updateTotal(#{gpServiceInfo});" />
<SpecialKey Handler="if(e.getKey() == Ext.EventObject.ENTER){updateTotal(#{gpServiceInfo});};"/>
</Listeners>
</ext:NumberField>
</Editor>
</ext:NumberColumn>
<ext:NumberColumn
ID="clmUnitPrice"
runat="server"
Text="Unit<br/>Price"
DataIndex="UnitPrice"
Flex="1"
Width="60"
MenuDisabled="true"
Sortable="False"
ColumnWidth="1"
DefaultValueMode="RenderExplicit"
TabIndex="3" Format="0.0,0000000000/i">
<Renderer Handler="return Ext.util.Format.number(value, '0.00########');">
</Renderer>
<Editor>
<ext:NumberField ID="nmfUnitPrice" runat="server" DecimalSeparator="," AllowBlank="false"
MinValue="0" HideTrigger="true" DecimalPrecision="10">
<Listeners>
<Blur AutoDataBind="true" Handler="updateTotal(#{gpServiceInfo});" />
</Listeners>
</ext:NumberField>
</Editor>
</ext:NumberColumn>
<ext:NumberColumn
ID="clmDiscountRate"
runat="server"
Text="Discount<br/>Rate%"
DataIndex="DiscountRate"
Flex="1"
Width="60"
MenuDisabled="true"
Sortable="False"
ColumnWidth="1"
TabIndex="3">
<Editor>
<ext:NumberField ID="nmfDiscountRate" runat="server" DecimalSeparator="," AllowBlank="false"
MinValue="0" HideTrigger="true">
<Listeners>
<Blur AutoDataBind="true" Handler="updateTotal(#{gpServiceInfo});" />
</Listeners>
</ext:NumberField>
</Editor>
</ext:NumberColumn>
<ext:NumberColumn
ID="clmDiscountAmount"
runat="server"
Text="Discount<br/>Amount"
DataIndex="DiscountAmount"
Flex="1"
Width="60"
MenuDisabled="true"
Sortable="False"
ColumnWidth="1"
TabIndex="5">
<Editor>
<ext:NumberField ID="nmfDiscountAmount" runat="server" DecimalSeparator="," ReadOnly="true">
<Listeners>
<Blur AutoDataBind="true" Handler="updateTotal(#{gpServiceInfo});" />
</Listeners>
</ext:NumberField>
</Editor>
</ext:NumberColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="App.btnDeleteRow.setDisabled(!selected.length);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>data = { DiscountAmount: 0};
function initializeAmountDataObject() {
var grid = App.gpServiceInfo;
var X = grid.headerCt.getVisibleGridColumns();
for (var i = 4; i < X.length; i++) {
if (X[i].dataIndex != "Amount" && X[i].dataIndex.indexOf("Amount") > -1) {
data[X[i].dataIndex] = 0;
}
}
}
var addNewRowToServiceInfo = function () {
var grid = App.gpServiceInfo;
var X = grid.headerCt.getVisibleGridColumns();
var rowCount = getGridRowCount(grid);
var rowOrder = rowCount + 1;
var colArr = {
OrderNo: rowOrder,
ServiceItems: "",
Amount: 1,
Unit: ""
}
for (var i = 4; i < X.length; i++) {
colArr[X[i].dataIndex] = 0;
}
addNewRow(grid, colArr);
}
var getGridRowCount = function (grid) {
var store = grid.getStore();
var rowCount = store.count();
return rowCount;
}
var addNewRow = function (grid, initialValues) {
var store = grid.getStore();
var rowCount = getGridRowCount(grid);
grid.editingPlugin.cancelEdit();
store.getSorters().removeAll();
grid.getView().headerCt.setSortState();
store.insert(rowCount, initialValues);
grid.editingPlugin.startEdit(rowCount, 0);
}
var removeServiceInfoRow = function () {
var grid = App.gpServiceInfo;
removeRow(grid);
var store = grid.getStore();
if (store.count() > 0) {
updateTotal(grid);
}
}
var removeRow = function (grid) {
var selectionModel = grid.getSelectionModel();
var store = grid.getStore();
grid.editingPlugin.cancelEdit();
store.remove(selectionModel.getSelection());
if (store.getCount() > 0) {
selectionModel.select(0);
}
}
var format = "0.0,00/i";
var formatUnitPrice = "0.0,0000000000/i";
Ext.util.Format.thousandSeparator = ".";
Ext.util.Format.decimalSeparator = ",";
var calculateAmount = function (grid) {
var selectedRow = grid.getSelectionModel().getSelection()[0]; //get('ServiceAmount')
var amountNum = selectedRow.get('Amount'); //Ext.getCmp('txfEditorQuantity').value;
amountNum = amountNum == null ? 0 : amountNum;
var unitPrice = selectedRow.get('UnitPrice'); //Ext.getCmp('txfUnitPrice').value;
unitPrice = unitPrice == null ? 0 : unitPrice;
var discountRate = selectedRow.get('DiscountRate'); //Ext.getCmp('txfDiscountRate').value;
discountRate = discountRate == null ? 0 : discountRate;
var discountAmount = 0;
discountAmount = (amountNum * unitPrice * discountRate) / 100;
if (isNaN(discountAmount)) {
selectedRow.set('DiscountAmount', 0);
}
else {
selectedRow.set('DiscountAmount', discountAmount);
}
};
function updateTotal(grid) {
if (grid.view.rendered && grid.getStore().count() > 0) {
calculateAmount(grid);
}
else {
//var input = Ext.getCmp('nmfEditorQuantity');
//input.fireEvent('Blur', updateTotal(App.gpServiceInfo, App.fcnHiddenTotals));
}
}
Last edited by yusuf; Jun 22, 2016 at 12:26 PM.
Reason: Adding codes
