Home > Developer > Web Develop
Because of their own from Android development to learn web development, recently in the study of JSP, before the touch of a little ExtJS, so use JSP to cooperate with ext test.
Ext JS IntroductionExtJS is a JavaScript framework that has the advantage of having its own interface and event handling. We can achieve the function we want according to its syntax, specifically I do not introduce, own Baidu.
EXT MVC Structure IntroductionIt's always annoying to do a big project at any time. Because of the large, so the development of the time is difficult to organize, maintenance, not to mention. It's certainly more troubling as business grows. Ext's MVC is the same as what you've learned in other places, so MVC's purpose is to:
1, organize your code, make it easy to maintain
2. Reduce your code volume
Let's take a look at a picture given in the official documentation
Well, there's a general understanding, and then we'll start the actual operation.
The development tool for this example is IntelliJ idea
Project BuildingWhichever tool you use, the first step is, of course, creating a Web project.
1. Create a Web project1. Open IntelliJ Create a new project, then tick the Web application under Java EE, select your project directory a project is created.
2, after the creation, the project directory is as follows
SRC is the Java code, the Web is our project root directory. At this point, you also need to configure your Tomcat container to specify your project Web path. Specific as follows
3. Click the triangle editconfigurations in the upper-right corner of the IDE, then click + On the left, look for Tomcat Server, then click Local. Such a Tomcat configuration item appears
4. After the Tomcat configuration item is added, you also need to specify the Tomcat directory, and the Web project's directory, just select your Tomcat directory and your project's Web folder.
Such a Web project can be run, click on the upper right corner of Run, in the browser input localhost:8080 can be accessed to the next step.
2, integrated ext Js1, ext as a JavaScript framework, we just need to use the page simply by introducing JavaScript in a way that can be used.
Create a new JS folder in the Web folder, put the ExtJS SDK into it, and then introduce it on the homepage
The index.jsp code is as follows
<%@ page contenttype="Text/html;charset=utf-8" language="java" %><html> <head> <title>Extjsdemo</title> <link rel="stylesheet" type="text/css" href=" Js/extjs/resources/css/ext-all.css "> <script type="text/javascript" src="Js/extjs/ext-all.js "></script> <script type="text/javascript" src="Js/extjs/locale/ext-lang-zh_ Cn.js "></script> <script type="text/javascript" src="App/appjs/app.js" ></script> </head> <body> </body></html>In this way index.jsp can use EXT, note that the last line of script drank app.js, this is the beginning of the EXT application place.
At the beginning of the article on the EXT website, the MVC file structure is behind the app folder, so create a new app folder under the Web
3. Use Ext JS MVC structure to create an application in App.jsNone of the Ext JS 4 applications start with a application class. Application contains the settings for the app folder, and a startup function that is called after application is started. So we create App.js in the app folder, of course name you can take, we write a application inside
ext .application ({requires : [ ' Ext.container.Viewport ' ], name: ' AM ' , Appfolder: ' app ' , launch: function () {ext.create ( ' Ext.container.Viewport ' , {layout: ' fit ' , items: [{ Xtype: ' Panel ' , title: ' Users ' , HTML: ' List of users would go here ' }] }); }); The above code creates a application class called AM by Ext.application, and specifies that the application's folder is a App,launch function, which is called before it is loaded, and you can see that a viewport class is created. Items is what it contains, and it contains a panel with a simple set of text.
At this time you refresh index.jsp, the effect is this, completely did not write what style, is not very cool, and you can change the effect according to the skin
Controllers in Ext is generally used in conjunction with application to listen for processing events. The following code creates a simple controller and remembers to create it under the Controller folder.
Ext.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, function() { console.log(‘Initialized Users! This happens before the Application launch function is called‘); }});
Also to be referenced in application after creation
Ext.application({ ... controllers: [ ‘Users‘ ], ...});
When index.jsp is accessed in the browser, the controller is automatically loaded because the controller is specified in the Applicaton, and the controller The init function is called before the Lauch function of the application class.
Opening the browser to open the console console will reveal the output of initialized users! This happens before the application launch function is called
The controller's init function typically calls-control () to set up event snooping.
As follows:
Ext.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, function() { this.control({ ‘viewport > panel‘: { this.onPanelRendered } }); }, function() { console.log(‘The panel was rendered‘); }});
Control is called in the Init function to find any panel class under the Viewport class, and render represents the display event, that is, when the panel display is output the panel was rendered
Change to the above code, then refresh, the console console will print.
See here, the basic event processing is demonstrated, after in-depth understanding can do more events, haha. Okay, here's the view.
Ext contains a lot of view components, here is a simple example, we set up in the View folder list.js representative user list, code
Ext.define (' AM.view.user.List ', {extend:' Ext.grid.Panel ', alias:' Widget.userlist ',//aliases, references in other places can be directly used userlistTitle' All Users ', InitComponent: function() { This. Store = {fields: [' name ',' Email '], data: [{name:' Ed ', Email:' [email protected] '}, {name:' Tommy ', Email:' [email protected] '} ] };//Do a demo, this is specifying the data This. columns = [{header:' Name ', Dataindex:' name 'Flex:1}, {header:' Email ', Dataindex:' Email 'Flex:1} ];//The columns used for grid display will display the same data as the name in the store This. Callparent (arguments); }});Note that the name after the define, ' AM.view.user.List ', AM is the name,view we have created application, the MVC view, which is the List under the User folder under the View folder, All other files follow this pattern, which is MVC.
After the view is created, it needs to be referenced in the controller, and because Weight.userlist is used as the alias alias, the alias reference can be used directly in the controller.
Ext.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, views: [ ‘user.List‘ ], ... ...});
Remember before the application in the launch directly after the display of a panel, now have their own view, we will not use the panel, directly add the view to the application
Ext.application({ ... function() { Ext.create(‘Ext.container.Viewport‘, { ‘fit‘, items: { ‘userlist‘ } }); }});
This will load the view after startup, re-refresh the browser, the effect
Simply set the data source to specify the grid columns can be shown is not cool, but the current data is not real data.
The panel's render event was previously monitored in the controller, but may be uncomfortable because it shows events. We operate the grid with the knot.
Output a message in the console console by double-clicking on the controller code
ext.define ( " AM.controller.Users ' , {extend: ' Ext.app.Controller ' , Views: [], init: function () { this . Control ({ ' userlist ' : {itemdblclick: this . Edituser}} ); }, Edituser: function ( Grid, Record) { console.log ( ' Double clicked on ' + record.get ( ' name ' )); }});
Simply modified the code in the control, listening Userlist,itemdbclick represents a double-click event, pointing to the edituser, listening for the input of a double clicked on ' + record.get (' name ')
Refresh again, double-click
So what if we want to edit gird directly?
You'll need a form to see the code when you edit it.
Ext.define (' AM.view.user.Edit ', {extend:' Ext.window.Window ', alias:' Widget.useredit ', Title:' Edit User ', Layout:' Fit ', AutoShow:true, InitComponent: function() { This. Items = [{xtype:' form ',// form formItems: [{xtype:' TextField ', Name:' name ', Fieldlabel:' Name '}, {xtype:' TextField ', Name:' Email ', Fieldlabel:' Email '} ] } ]; This. buttons = [{text:' Save ', Action:' Save '}, {text:' Cancel ', Scope: This, Handler: This. Close}]; This. Callparent (arguments); }});The above code defines a window to display, which contains a form form and two buttons.
So we're going to have to contoller. The window must be displayed at double-click to fill in the original data into the form.
Okay, on the code.
Create model and storeExt.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, views: [ ‘user.List‘, ‘user.Edit‘ ], ... function(grid, record) { var view = Ext.widget(‘useredit‘);//找到window view.down(‘form‘).loadRecord(record);window下的 form，回填数据。 }});
Before we created the view, we directly wrote the data in the view, in fact, the view can be referenced store,store is the place to encapsulate data, can be loaded from the server can also be configured locally.
Ext.define(‘AM.store.Users‘, { ‘Ext.data.Store‘, [‘name‘‘email‘], data: [ ‘Ed‘, ‘[email protected]‘}, ‘Tommy‘‘[email protected]‘} ] //简单的指定了本地数据});
Need to reference stores in controller
Ext.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, stores: [ ‘Users‘ ], ...});
So in view, we can use the store directly.
Ext.define(‘AM.view.user.List‘ ,{ ‘Ext.grid.Panel‘, ‘widget.userlist‘, ‘All Users‘, in the `initComponent` method ‘Users‘, function() { this.columns = [ ...});
Next to model
Ext.define(‘AM.model.User‘, { ‘Ext.data.Model‘, [‘name‘‘email‘]});
The store and controller need to cite model,
Ext.define(‘AM.store.Users‘, { ‘Ext.data.Store‘, ‘AM.model.User‘, data: [ ‘Ed‘, ‘[email protected]‘}, ‘Tommy‘‘[email protected]‘} ]});Ext.define(‘AM.controller.Users‘, { ‘Ext.app.Controller‘, stores: [‘Users‘], models: [‘User‘], ...});
This is the same as the previous effect.
The store can load data from the server to display in the view. As space is limited, we will not introduce it for the time being. Here is the main explanation of Ext JS MVC.
In fact, it starts with ext.application, and after the project name is specified,
Name is the project name. View or controller or store or model. File name.
In the middle you can add the folders according to the function, so that it is well managed and maintained.
Finally, attach the file structure of the demo.
Haha, ExtJS mvc is not very good understanding, how to use the same MVC in SRC is better. A little praise.
SOURCE download
Using IntelliJ idea to build ext JSMVC Web Project
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
