[FIXED] [#1262] [3.3] Lost Focus Listener and Input Mask

[Alaswad]

Dears,

I'm using ext:GridPanel ext:RowEditing plugin, and I'm using the first field selection from the ext:ComboBox to fill other edited fields.

I defined the field as follows:

<ext:Column runat="server" Width="130" Align="Center" Text="Activity Code" DataIndex="RECEIPT_ACT_A" >
	<Editor>
		<ext:ComboBox Flex="1" EnableRegEx="true" QueryMode="local" AllowBlank="false" TypeAhead="true"  MinWidth="150" PaddingSpec="0 15 0 5" ID="ddlEditReceiptActivityCode" ClientIDMode="Static" ValueField="RECEIPT_ACT_A" DisplayField="RECEIPT_ACT_B" runat="server" >
			<Store>
			   <ext:Store AutoLoad="false" ClientIDMode="Static" ID="ddlEditReceiptActivityCodeStore" runat="server">
					<Model>
						<ext:Model ID="ddlEditReceiptActivityCodeModel" runat="server" IDProperty="RECEIPT_ACT_A">
							<Fields>
								<ext:ModelField Name="RECEIPT_ACT_A" Type="String" />
								<ext:ModelField Name="RECEIPT_ACT_B" Type="String" />
								<ext:ModelField Name="RECEIPT_ACT_C" Type="String" />
								<ext:ModelField Name="RECEIPT_ACT_D" Type="String" />
								<ext:ModelField Name="RECEIPT_ACT_E" Type="String" />
								<ext:ModelField Name="RECEIPT_ACT_F" Type="String" />
							</Fields>
						</ext:Model>
					</Model>
				</ext:Store>  
			</Store>
			<Listeners>                                                                           
				<SpecialKey Handler="if(e.getKey() == 9) { autoFillReceiptInfo(); }" />
			</Listeners>                                                                                                                          
		</ext:ComboBox>
	</Editor>
</ext:Column>

The listener is working fine with me and did the job, but it only worked when you hit Tab button to move to second field, means when I use mouse cursor to move to second field, the trigger not fired.

1. How to impalement "lost focus" listener instead of SpecialKey for the ext:ComboBox .

Also, I want to define an input mask for ext:TextField to display prices with comma delimiter for receipts as follows:

<ext:TextField ID="txtTotalAmount" ReadOnly="true" Text="0" LabelWidth="180" ClientIDMode="Static"  runat="server" Flex="1" FieldLabel="Total Amount" LabelAlign="Left" >
	<Plugins>
		<ext:InputMask runat="server" Mask="999,999,999,999,999" />
	</Plugins>                                                                    
</ext:TextField>

It give me error "NaN" if I set the value to 35213.215 dollar.

App.txtTotalAmount.setValue("35213.215");

2. How to build a mask for the prices?

Regards,
Alaswad

[fabricio.murta]

Hello Alaswad!

I believe you're better off using a data-related event on the combo box than a key event one, like Change, or Select. I believe it is going to work even better than a focusLeave event.

But it seems Ext.NET is missing the focusEnter and focusLeave events for the Combo Box. Thanks for the finding.

For now, if you really want to use the focusLeave event, you'll have to do it like this:

<Listeners>
    <CustomConfig>
        <ext:ConfigItem Name="focusleave" Value="{ fn: myFunction }" Mode="Raw" />
    </CustomConfig>
</Listeners>

And define a js function on your code, like:

<script>
    var myFunction = function (item, ev) {
        console.log('focus left');
    }
</script>

You can use the Select and Change events directly. I believe they will fit very well to your case.

[fabricio.murta]

Created issue #1262 to track this issue. Please note the focusLeave event were introduced in the ExtJS version included on Ext.NET 3.3.0, and using the above suggested custom config will probably not work if you are still using Ext.NET 3.2.1.

[fabricio.murta]

Hello!

We just implemented this feature on Ext.NET 3 SVN branch! It is now available in revision 6749.

[Alaswad]

Dear fabricio.murta ,

Thanks a lot, it is working for me also.
I will post the second question in another post.

Regards,
Alaswad