[CLOSED] Introducing delay while user enters data

  1. #1

    [CLOSED] Introducing delay while user enters data

    Hi

    I have an application which allows the user to check a bank statement. As part of that I want to have a 'number' field in the TopBar into which the user enters the starting balance, a decimal figure. I don't want the user to have to press a button to activate the refresh of the functionality. How can I introduce a delay whilst the user enters their data?

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        @{
        Layout = "~/Views/Shared/_Layout.cshtml";
        }
        @section scripts
        {
            <script>
                var startingBalanceChange = function (numField) {
                    Ext.net.DirectMethod.request({
                        url: '@(Url.Action("StartingBalanceChanged"))',
                   params: { balance: numField.value },
                   success: function () {
                       if (numField.value.substring(0, 1) != "£") {
                           numField.setValue(Ext.util.Format.number(numField.getValue(), '£#,###.00'));
                       }
                   }
               })
                       };
            </script>
        }
    </head>
    <body>
    @section mainBody
    {
        @(Html.X().GridPanel().Width(200)
            .Title("Users").ID("GridPanel").Border(true)
            .Store(Html.X().Store()
                .ID("Store")
                .Model(Html.X().Model().IDProperty("ID")
                    .Fields(
                        new ModelField("ID", ModelFieldType.Int),
                        new ModelField("Value",ModelFieldType.Float)
                        )
                    )
                .Proxy(Html.X().AjaxProxy().Url(Url.Action("Read")).Reader(Html.X().JsonReader().RootProperty("data"))))
            .ColumnModel(
                Html.X().NumberColumn().Text("Value").DataIndex("Value").Align(Alignment.Right).Format("£#,###.00")
            )
            .TopBar(
                Html.X().Toolbar()
                   .Items(            
                        Html.X().TextField().ID("nfStartingBalance").FieldLabel("Starting Balance:").Width(220).LabelWidth(120)
                        .Listeners(lst => { lst.Change.Handler = "startingBalanceChange(this)"; })
                        )
                  )
        )
    }
    </body>
    </html>
    using Ext.Net;
    using Ext.Net.MVC;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Mvc;
    
    namespace ExtSandpit.Controllers
    {
        public class HomeController : Controller
        {
            private static decimal startingBalance;
            public ActionResult Index()
            {
                return View();
            }
            public DirectResult StartingBalanceChanged(string balance)
            {
                decimal parsedBalance;
                if (balance.Length > 0)
                {
                    if (decimal.TryParse(balance.Substring(1, balance.Length - 1), out parsedBalance))
                    {
                        startingBalance = parsedBalance;
                    }
                    X.GetCmp<Store>("Store").Reload();
                }
                return this.Direct();
            }
            public ActionResult Read()
            {
                List<Cost> lstValues = new List<Cost>();
                if (startingBalance < 1.07M)
                {
                    lstValues.Add(new Cost(1000, 1.06M));
                }
                lstValues.Add(new Cost(1001, 500.92M));
                lstValues.Add(new Cost(1002, 5234.92M));
                return this.Store(lstValues);
            }
        }
    
        public class Cost
        {
            public Cost()
            {
            }
            public Cost(int id, decimal value)
            {
                ID = id;
                Value = value;
            }
            public int ID { get; set; }
            public decimal Value { get; set; }
        }
    }
    Thanks

    Jeff
    Last edited by Daniil; Sep 16, 2015 at 12:03 PM. Reason: [CLOSED]
  2. #2
    Hi Jeff,

    Since we are dealing a lot via the forums recently could you please either get rid (preferable) of _Layout.cshtml in your samples or provide us with that _Layout.cshtml? That would speed up a little the process of running the samples.
  3. #3
    Apologies Daniil

    Here's a version without _Layout.cshtml.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
            <script>
                var startingBalanceChange = function (numField) {
                    Ext.net.DirectMethod.request({
                        url: '@(Url.Action("StartingBalanceChanged"))',
                   params: { balance: numField.value },
                   success: function () {
                       if (numField.value.substring(0, 1) != "£") {
                           numField.setValue(Ext.util.Format.number(numField.getValue(), '£#,###.00'));
                       }
                   }
               })
            };
            </script>
    </head>
    <body>
        @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
        @(Html.X().GridPanel().Width(300)
            .Title("Users").ID("GridPanel").Border(true)
            .Store(Html.X().Store()
                .ID("Store")
                .Model(Html.X().Model().IDProperty("ID")
                    .Fields(
                        new ModelField("ID", ModelFieldType.Int),
                        new ModelField("Value",ModelFieldType.Float)
                        )
                    )
                .Proxy(Html.X().AjaxProxy().Url(Url.Action("Read")).Reader(Html.X().JsonReader().RootProperty("data"))))
            .ColumnModel(
                Html.X().NumberColumn().Text("Value").DataIndex("Value").Width(298).Align(Alignment.Right).Format("£#,###.00")
            )
            .TopBar(
                Html.X().Toolbar()
                   .Items(            
                        Html.X().TextField().ID("nfStartingBalance").FieldLabel("Starting Balance:").Width(220).LabelWidth(120)
                        .Listeners(lst => { lst.Change.Handler = "startingBalanceChange(this)"; })
                        )
                  )
        )
    </body>
    </html>
  4. #4
    Thank you!

    I don't quite get the requirement, but maybe you are looking for the Buffer setting.
    .Listeners(lst => { 
        lst.Change.Handler = "startingBalanceChange(this)";
        lst.Change.Buffer = 200;
    })
    The description of the Buffer setting you can find here:
    http://docs.sencha.com/extjs/5.1/5.1...od-addListener
  5. #5
    Thanks Daniil

    That's exactly what I was looking for! As I've said before I only wish I could find these things for myself...

    Thanks

    Jeff
  6. #6
    I would recommend to answer enormous amount of questions in our forums and you will:)

Similar Threads

  1. How to save user data in browser cookies
    By QuAzI in forum 2.x Help
    Replies: 1
    Last Post: Jun 05, 2014, 1:47 PM
  2. [CLOSED] Delay loading of data
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 08, 2012, 4:20 PM
  3. Delay User Control from loading
    By cwolcott in forum 2.x Help
    Replies: 1
    Last Post: May 21, 2012, 1:54 PM
  4. user control dynamic data
    By voldamirin in forum 1.x Help
    Replies: 0
    Last Post: Oct 25, 2010, 12:05 PM
  5. [CLOSED] Getting Grid Data from User control
    By CMA in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 30, 2009, 8:42 AM

Tags for this Thread

Posting Permissions