Extjs learning: MVC model case 1)

Extjs is an Ajax framework mainly used to create front-end user interfaces. Compared with traditional web development, extjs is more suitable for enterprise-level system applications. The extjs framework is not only powerful, but it saves a lot of front-end development work, and its development speed is amazing. Therefore, many web developers prefer to use it to develop internal enterprise systems.
Due to work needs, itlee recently came into contact with extjs and used it to develop some simple system applications. During the course of study, many people who came into contact with extjs earlier said that extjs3.0 and extjs4.0 had a big difference, because itlee I did not use version 3.0 here to do too much introduction. Just to put it simply, the biggest change in extjs4.x is probably the MVC model of ext itself. As I am stupid and have a weak foundation, I still have to work hard to find the threshold. Here is a small case for your reference.
Because the MVC mode of extjs does take some twists and turns in itlee's practical application, therefore, the main purpose of this case is to help you understand its MVC model and learn the most basic layout. Let's talk a little bit about it. Let's take a look at the final implementation effect of the case:

The webpage layout consists of the top title, left menu, and right topic content. Here we have a preliminary impression on the layout of the case, so that we can learn more in the future.
After understanding the final results of the project, let's take a look at the final file structure of the case:

 

The file structure shows that the app folder is our main working directory in the entire project, including controller, model, and store) view ). In addition, the server folder is used to provide project data instead of the background server. We willArticleThis day, We will download the index.html and App. js files.
Index.html FileCode:

 <!  Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"  >  <  Html  >  <  Head  >  < Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  >  <  Title  > Extjs learning: MVC model case study </  Title  >  <  Link  REL  = "Stylesheet" Type  = "Text/CSS"  Href  = "../Extjs/resources/CSS/ext-all.css"   />  <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "../Extjs/examples/shared/example.css"   />  <  Script Type  = "Text/JavaScript"  SRC  = "../Extjs/Bootstrap. js"  > </  Script  >  <  Script  Type  = "Text/JavaScript"  SRC  = "../Extjs/locale/ext-lang-zh_CN.js"  > </  Script  > <  Script  Type  = "Text/JavaScript"  SRC  = "App. js"  > </  Script  >  </  Head  >  <  Body  >  <  IFRAME ID  = 'Contentiframework'  Name  = 'Contentiframework'  Style  = 'Height: 100%; width: 100%'  Frameborder  = "No"  > </  IFRAME  >  </  Body  >  </  Html > 

The main purpose of this file is to reference the extjs framework file. We will not introduce it too much here.
App. js file code:

 /*  ** File name: App. js * Source: itlee blog * address: http://www.itlee.name  */  Ext. onready (  Function  (){  //  Enable the floating prompt Function  Ext. quicktips. INIT ();  //  Enable Dynamic Loading  Ext. loader. setconfig ({enabled: True  });  //  Create an applicationProgramInstance  Ext. Application ({  //  Set namespace Name: 'Demo' ,  //  Specify the configuration option and set the corresponding path Appfolder: 'app' ,  //  Load Controller Controllers: ['democontroller' ], //  Automatically load and instantiate viewport files Autocreateviewport: True  });}); 

The app. js file can be viewed as a global setting for our entire project. Note the following:
(1) Ext. loader. setconfig enables the automatic loading function. This function is disabled by default and needs to be manually enabled. Otherwise, many files developed in the future cannot be found and the following error is reported:

 

(2) Name: 'Demo' specifies a namespace for the project. It will be applied as a global variable throughout the project to help us identify the application files belonging to the project.
(3) The appfolder: 'app' configuration item helps us to specify it in the app folder.
So far, we have a general understanding of the case. In the next lecture, we will explain the overall layout of the project.

Source: itlee blog

Address: http://www.itlee.name/qianduan/extjs/457.html/