ExtJS 5 Bind ViewModel To Template

The simplest things can often be aggravating to get right.  I often find that when something does not work (especially in ExtJS 5 using View Model and Bind) that I need to make the simplest example to prove my understanding to myself.  I thought I would share a very simple yet powerful example of how to bind data from a ViewModel to an xtemplate in ExtJS 5.

There are many other things you can do with databinding including modeling selected row in a grid as well as nice integration with formulas.  The below example is just a very simple case that proves it works which is often all I need.

Notice that in the code below I’ve created a very simple viewport with just one item.  The two big takeaways are:

The data must be enclosed in the bind attribute

The tpl (template) is not in a bind attribute

Hope this helps someone struggling also.

Ext.onReady(function() {
    Ext.create({
        xtype: 'viewport',
        viewModel: {
            data: {
                viewModelAddress: '200 main street'
            }
        },
        items: [{
            bind: {
                data: {
                    address: '100 main street',
                    viewModelAddress: '200 main street'

                }
            },
            tpl: 'address: {address}<br/>viewModelAddress: {viewModelAddress}'
        }],
        renderTo: Ext.getBody()
    });
});


https://fiddle.sencha.com/#fiddle/9is

Common Pattern in ASP.NET Razor For Clean cshtml Pages

I’ve been doing a lot of work over the past year in Microsoft’s ASP.NET Razor.  I’m not an html wizard and definitely a razor syntax wizard, but I have figured out a way that saves me time over and over.  It’s basically the same pattern of thinking that has me often do things in 2 or 3 steps instead of one just to make sure the logic is overly clear.

In this case, I often find myself trying to create complex Razor syntax to output data.  That is, say I want to output a link that combines a static URL with a dynamic one coming from a model.  My first work is almost always trying to do it all at once and I’m guessing at least someone is going to tell me how I could have done.  That is, I want something like (in non-working syntax):

<div class="more">
  <a href='"http://codestarssummit.com/"@(session.SessionUrl)"'>
          Read more</a>
</div>

So, the above does not work, but by sticking in some real C# code the following does (of course).

 <div class="more">
   @{
      var workshopUrl = "http://codestarssummit.com" +
            session.SessionUrl;
    }
   <a href="@(workshopUrl)" target="_blank" >Read more</a>
 </div>

In production, I’ve added a little more error checking but you get the idea.  When I first started using Razor, my thinking was I did not liking using @{} type syntax because if felt like I was putting code in views.  Now, I’m not fooled anymore.  It is.

Feel free to add some comments here and let me know your thoughts. I’m always trying to figure out a better way to build razor pages that is both clear and correct.

 

 

The running program

Proving to Myself that in ExtJS 5 ViewModel data does move Functionally

I’ve been having issues that makes me think that ViewModel data in ExtJS 5 does not move through the prototypical inheritance chain so I put a small example to show my case.  Of course, my example works exactly as exptected.  I’m showing it here just for reference.  The output is simply what is below.

The problem I’ve been having is with bindTo to get a model row.  From what I can tell, data moves exactly as expected but I’m not sure that store and formula model view stuff follow the same path.  I can drill down and see it in the prototype but it is not obvious like it is with data.  More research coming.

Object {from2: “from2″, from1: “from1″}

 Ext.application({
            name: 'MyApp',
            launch: function () {

                var panel = Ext.create('Ext.Panel', {
                    renderTo: Ext.getBody(),
                    height: 500,
                    width: 500,
                    viewModel: {
                        data: {
                            from1: 'from1'
                        }
                    },
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'panel',
                            layout: 'fit',
                            viewModel: {
                                data: {
                                    from2: 'from2'
                                }
                            },
                            items: [
                                {
                                    xtype: 'button',
                                    text: '1st level',
                                    handler: function (button) {
                                        var viewModel = button.up().getViewModel();
                                        console.log(viewModel.getData());
                                        debugger;
                                    }
                                }
                            ]
                        }
                    ]
                });
            }
        })

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}'
                        }
                    ]
                }
            ]
        });
    }
});

Plugin by Social Author Bio

Follow

Get every new post delivered to your Inbox

Join other followers: