Sencha Inc. | HTML5 Apps

The MVC Application Architecture

Published Apr 26, 2011 | The Sencha Dev Team | Guide | Medium
Last Updated Jul 11, 2011

This Guide is most relevant to Ext JS, 4.x.

Guide guides/application_architecture/README.js is not currently available
Share this post:
Leave a reply

Written by The Sencha Dev Team

22 Comments

Crysfel

3 years ago

This is great!! looking forward for the next guide smile Thx

sandeep

3 years ago

Thanks, MVC is nice, but how do i load other grids in he center region on click of some menus.

H.W.

3 years ago

Nice, but pretty cumbersome :(.
Also how does the code generated by ExtDesigner integrate in this picture?

DavidSSL

3 years ago

Excellent walkthrough. However, what actually appears as code after “This is just so that we can return a dummy response so we know things are working. The updateUsers.json file just contains “. I’m on Chrome and I’ve looked at the page source and there’s nothing in there. Could you please update so that people can learn more about the API more than anything?

DavidSSL

3 years ago

The “this.getUsersStore().sync();” causes a 405 error although the grid does update. Has anyone come across this error? I’m using IIS 7.5 and I’ve added the json MIME type.

Alexander K

3 years ago

Great tutorial. Thank you so much.

I have only one thing to admit. I have stuck at the “Creating a Model and a Store” section with JS error “Uncaught TypeError: Cannot read property ‘items’ of undefined”. So it was necessary to define the ‘columns’ property for the ‘List’ view to get rid of this error.

Thus, the whole ‘List’ model code is below:

Ext.define(‘AM.view.user.List’ ,{
  extend: ‘Ext.grid.Panel’,
  alias : ‘widget.userlist’,
 
  title : ‘All Users’, 
 
  store: ‘Users’,
  columns: [
  {header: ‘Name’,  dataIndex: ‘name’},
  {header: ‘Email’, dataIndex: ‘email’}
  ]
});

Sandeep

3 years ago

Alex, please check if you have included the AM.view.user.List in respective controller.

Alexander K

3 years ago

Sandeep, my “app/controller/Users.js” file contains views inclusion:

Ext.define(‘AM.controller.Users’, {
extend: ‘Ext.app.Controller’,
...
views: [‘user.List’, ‘user.Edit’],
....
});

Sandeep

3 years ago

Alex, i faced same error many times and everything it was because i missed something to include. Also check the spellings,just in case.And whats your app.js looks like. Does it include all controllers?

Sandeep

3 years ago

All, i have been able to make an small and working MVC application but found lot of bugs.Not sure these are bugs! For example i have buttons on left panel on viewport. Each button add a tab in the center region. These tabs has a grid with Paginator. But when i close a tab and open it again by clicking the button on left panel. the paginator disappears. Any suggesions?

Alexander K

3 years ago

Sandeep,
>> Does it include all controllers?
I think there is only one controller in this app: “Users”, so it is included within my “app.js” file:
Ext.application({
name: ‘AM’,
...
controllers: [
  ‘Users’
],
...
});

Unfortunately I have no yet enough experience with ExtJS to give you a good advice about disappearing paginator. The only idea, that maybe it is necessary to hide tab, instead of closing it. Then paginator will not be destoryed.

Combined Resource

3 years ago

Excellent tutorial! It’s always a delight to come across a well thought out walk through. Easy to follow with great though having been paid to the order of the introduction of concepts, replacement of static lines along the way. My compliments to the chef!

data/updateUsers.json can be an empty file - I think perhaps some repeated quotes have been stripped in one line of tutorial body.

JoM

3 years ago

I followed the guide until the end and have arrived to the same image as shown last..
When I checked the updateUsers.json, it was not changed. I was expecting to save the contents of the grid to the json file.

Also, mine is not the same as the last image. The “Request Payload” shown in my screen does not include ‘id’.

bill_chuang

3 years ago

I try this tutorial.but when i sync the data into the updateData.json,the firebug prompt “this.getUsersStore() is not a function”.why?

neilcoder

3 years ago

Great tutorial!

I found out I had to add the following to get this to work in the first steps;

Ext.application({
autoCreateViewport: false,


also I have a problem when the page loads, it gives me the following message in the console in IE;

  [Ext.Loader] Synchronously loading ‘Ext.container.Viewport’; consider adding Ext.require(‘Ext.container.Viewport’) above Ext.onReady

Any ideas?

Nicolas Breidinger

3 years ago

Neilcoder: The “Synchronously loading…” error is explained in the Getting Started guide referenced at the top of the article. It’s just a warning telling you to require Viewport so Ext can dynamically load it (which will make it load asynchronously and faster).

Find it here:
http://docs.sencha.com/ext-js/4-0/#/guide/getting_started

Rander

3 years ago

I followed this guide until the end, but a can’t found the updateUsers.json file on the request. It’s feel like this file doesn’t created to pass in the request

Nicolas Breidinger

3 years ago

updateUsers.json should contain the following:

{“success”: true}

For some reason the inline code isn’t showing up right there, but when I followed the guide yesterday it was.

Rander

3 years ago

My learning is growing. For now my app just send dummy response {“success”: true} when I save a user. But I already put this.getUsersStore().sync(); to update the response but isn’t work.

Rander

3 years ago

Great! It’s working…

Shaoning Zeng

3 years ago

Hi, when using Ext.application, Ext loads different version of script, how can we do breakpoint debug now? when file changed, the breakpoints disappeared, too. thanks for reply.

Chanida

3 years ago

I am getting a 405 error.  I have added {“success”: true} to my updateUsers.json and added .json extension to IIS as MIME Type application/json.  What am I missing?  Any suggestions would be greatly appreciated.  Thank you

Leave a comment:

Commenting is not available in this channel entry.