Using Sencha ExtJS 4.2, Sencha Architect 2.2, Add CRUD to REST client for calling Microsoft WebAPI server

Three Part Series

(Part 3)

 

Building a Simple REST Controller with Microsoft Visual Studio 2012 and WebAPI
Using Sencha ExtJS 4.2 and Sencha Architect 2.2, Build a Simple REST client (to feed WebAPI server)
Add CRUD to REST client for calling Microsoft WebAPI server

 

In the first two posts, we built a Microsoft WebAPI REST service, then we built the client side ExtJS app to process the GET request of the service (populate the grid panel), now let’s do the other 3 parts of CRUD (insert, update and delete).  We will not build out the WebAPI side because that would involve adding some kind of persistent storage to the server (which is another topic I did not want to add to this post now, but maybe will later).

So, first, let us go back to the Sencha Architect project and make the “TagName” editable so that we can see the “Update” in action.  We also need to add a save button to the toolbar that will simply so a store.sync() which will push the REST proxy into action once we have modified a TagName.

Without going through all the drag and drop, here is what needs to be done from Sencha Architect.

Add a toolbar to the Viewport

Put a “save” button on the Viewport

Add a click event handler to the “save” button and have the code grab a handle to the store and issue a sync() call when pressed

Add an editor to the text field “TagName” so we can edit that field

Add a CellEditing plugin to the grid

Now, that gives us this:

image

and it looks like:

image

Notice that I’ve actually clicked and edited the Tagname for item #3. You can tell because ExtJS puts the little red hat showing the field is edited.

If we press “Save” next we will get an error because the default WebAPI “Put” method does not have the correct signature.  We just change it to take an instance of TagItem and now, when we press the “save” button, we see the browser do a PUT

image

 

If we place a break point in the visual studio 2012 server code when the PUT is called, you will see the new value come in for tagName (as follows):

image

and, if you look at the browser shot above, you will see that the little red hat indicating “dirty” is now gone showing that we generated a clean update.

 

On your own, you can now do the same for POST (Insert) and DELETE.  The pattern is identical.  Simply make the WebAPI parameter TagItem (like we did for update), then, add to the client a delete button that figures out what is the selected row on the Grid Panel (fire the button again), and for insert, create an add button that simply adds a new row to the store, edit it and fire the save button again.

Hope these posts help.  I’m hoping this gives you a clear roadmap to build WebAPI / Sencha ExtJS applications using Microsoft’s WebAPI.

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. Hi Peter,

    am Using Extjs 4.2 MVC , I Have the Store with 2 fields and It Contains the More than 50 Entries(Records), is it Possible to Pass total this Store the WCF Service

  2. Peter Kellner says:

    Unfortunately I don’t know the details of what goes in the rest proxy. I’d post on the sencha forums. You’ll likely get a great answer there. Sorry -Peter

  3. Dennis Palmer says:

    The ExtJS Rest proxy includes the model in the request body for DELETE requests. This isn’t causing any errors, but ideally the request body should be empty. The WebAPI controller gets the id from the url and ignores the request body. Do you know how to tell the rest proxy not to send anything in the request for a DELETE?

  4. warleyalex says:

    Hi, Peter Kellner

    Without going into to much detail, basically, I have a model has a couple fields in it (id, name and email), then a simple store is created that uses this model called myStore.

    Once this store has been created, we simply call the store’s “add” method with a config object that represents the data, then calling sync() on that store forces an (create) to be executed through the proxy.

    If I look at Chrome’s JavaScript debugger (network tab), I can see POST method has been called passing this:
    Request Payload
    —————
    {“id”:””,”name”:”TestName”,”email”:”testemail@yahoo.com”}

    Notice that id is empty. Any idea to hide this ID from this body request?
    Thank you.

  5. Marcian0 says:

    Hi again Peter;

    I certainly appreciate the reply and the guidance.

    Have a happy weekend!

  6. Peter Kellner says:

    Hi Marciano,
    There are more and more out there. Checkout vimeo https://vimeo.com/40504820 for some reasonable tutorials on SA.

  7. Marcian0 says:

    Good Afternoon;
    for the lack of tutorials out there on Sencha Architect, I thought that this tutorial was a hidden gem, of course that was until I read the whole thing…

    I guess that this is not meant for beginners, but it would have been awesome to at least complete the CRUD part of the tutorial.

    Hope you get the chance to do it, this tutorial has potential

Trackbacks

  1. [...] 1. Using Sencha ExtJS 4.2, Sencha Architect 2.2, Add CRUD to REST client for calling Microsoft WebAPI s… [...]

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: