Sencha ExtJS 5 Checkbox DataBinding

I often find that something does not work as I expect and I have to take the problem to bits.  In this case, I was expecting to post a bug to the Sencha team about DataBinding and checkbox field but as is often the case, making the simple example brings out the correct solution and understanding.  So, in light of sharing, here is my simple working example of two way databinding with Sencha’s ExtJS 5.

You can see from the example and code that 1,true (and “on” not shown) all check the box as you would expect.

image

image

image

Ext.application({
    name: 'ProblemBindApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            autoShow: true,
            viewModel: {
                data: {
                    content: 'Some Content',
                    approved: false
                }
            },
            layout: 'fit',
            items: [
                {
                    xtype: 'form',
                    title: 'my title',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'approved as textfield:',
                            bind: '{approved}'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'approved as checkboxfield:',
                            bind: '{approved}'
                        }
                    ]
                }
            ]
        });
    }
});

Xamarin Meetup Tonight In San Mateo: New Features in Xamarin V3 and High Level Overview

Hope You Can Make it!

image

With jQuery and ASP.NET MVC Almost Radio Buttons

The Silicon Valley Code Camp web site used jQuery to do a lot of the page markup manipulation.  Behind the scenes of course is ASP.NET MVC5 which has a lot of helper methods for things like Check Boxes and Radio Buttons.  General purpose methods are nice (until they are not).  I’m building a more sophisticated “Opt-Out” for the code camp site and have created a choice where the user can say they want “All Emails” or “Critical Emails”.  I did not want to have a third choice for “No Emails” since say they don’t want all and they don’t want critical implies they don’t want any.  Also, it does not make sense for the user to say they want both “All” and “Critical”. It’s a one or another, just like radio buttons.

image

Since I could not use radio buttons to make the behavior correct, I decided to do the validation logic in jQuery.  Here is the short code that takes care of it (along with the ASP.NET MVC5 code for reference).

<script type="text/javascript">
    $(document).ready(function() {
        // these are not quite radio buttons.  want to be able to check them both off if you want,
        // but not allow both to be set.
        $('#EmailReceiveAllYears').change(function () {
            if ($('#EmailSendMinimalEmail').is(':checked')) {
                $('#EmailSendMinimalEmail').prop('checked', false);
            }
        });
        $('#EmailSendMinimalEmail').change(function () {
            if ($('#EmailReceiveAllYears').is(':checked')) {
                $('#EmailReceiveAllYears').prop('checked', false);
            }
        });
    });
</script>

 

And the ASP.NET MVC5 razor form:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(a => a.RegisterUserInfoLoggedIn.AttendeesId)

    <div class="important">
        <div class="checkField">
            @Html.CheckBoxFor(m => m.EmailReceiveAllCurrentYear)
            @Html.LabelFor(m => m.EmailReceiveAllCurrentYear,
                "Receive mailings regarding this years event...")
          
        </div>

        <div class="checkField">
            @Html.CheckBoxFor(m => m.EmailReceiveAllYears)
            @Html.LabelFor(m => m.EmailReceiveAllYears,
                "Receive all mailings regarding ...")
          
        </div>

        <div class="checkField">
            @Html.CheckBoxFor(m => m.EmailSendMinimalEmail)
            @Html.LabelFor(m => m.EmailSendMinimalEmail,
                "Receive ONLY critical email ...")
        </div>

        <div class="checkField">
            @Html.CheckBoxFor(m => m.EmailReceiveSponsorEmail)
            @Html.LabelFor(m => m.EmailReceiveSponsorEmail,
                "Receive emails from our sponsors.  From ...")  
        </div>

    </div>
    <div>
        <div>
            <input type="submit" class="button magenta" 
            value="Save Changes"  />
        </div>
    </div>
}

 

HTH’s!

 

 

Microsoft Surface Pro 3 Mini Review

I just went over to a Microsoft store here in San Jose, California and tested and did a review of a Surface Pro 3 for about 30 minutes.  As the owner of a Microsoft Surface Pro 2, I was quite curious about the new model from Microsoft.  I’ll wrap up my thoughts quickly in bullet points.

image

 

  • The Trackpad on the keyboard works well (huge improvement)
  • The screen is bigger, but still pretty small (see picture below for comparison)
  • It feels a little less heavy but not that much to me
  • The keyboard itself seems to type better
  • I love the variable position built in stand
    Personally, I’m not a big pen user so though I understand the pen technology is much improved, it did not do much for me.  Like I mention above, the keyboard is much more usable.  I find the Surface Pro 2 keyboard requires an external mouse.  Touch is not enough (especially for tasks like editing code) and the trackpad is just not good.  It feels like Microsoft built the trackpad of the Surface Pro 2 right into the keyboard.  The Surface Pro 3 feels like the trackpad had some good thought put into it and is not just part of the keyboard material.
    The biggest takeaway for me is that I will be able to buy a keyboard for the Microsoft Surface Pro 3 and use it on my Surface Pro 2 (a little awkward and the nice magnetic bar doesn’t work but much better).
    Green Represents Surface Pro 2, Yellow is the extra space for Surface Pro 3.

image

Plugin by Social Author Bio

Follow

Get every new post delivered to your Inbox

Join other followers: