Original http://www.cnblogs.com/good-temper/archive/2013/04/12/3015843.html
Dizzy, today is not good, Bai Tianji was delayed for a long time because of a small problem, just half of the write, suddenly the browser is stuck again, after opening it, it will be re-written ......
1. Create a project
This is not to mention. You can create a new web project.
2. Import the extjs File
Create an ext folder under webroot and merge the following files into the downloaded ext package:
3. Create required folders and files
Create folders and files according to the following structure:
The Green Box shows the required files.
4. write code
First, write the index. JSP, which is the entry page of extjs (in fact, it is accurate to say that extjs only exists in this page during the running process, and others are components generated by Js, its essence is Div + CSS). Introduce extjs library files and style files inside it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Next is app. js. As mentioned earlier, it is the extjs Startup File. Its content is as follows:
Ext. loader. setconfig ({enabled: true}); // Enable dynamic loading of Ext. application ({Name: 'et', // ha, that is, exttest autocreateviewport: True, appfolder: 'app', // specify the root directory controllers: ['menu '// introduce the menu here. Next time, we will detail how to load the menu]});Previously, if you do not know the viewport, ext will automatically load the viewport class under the view, which should inherit Ext. viewport and complete the creation of the main interface. The content is as follows:
Ext. define ('ET. view. viewport', {extend: 'ext. viewport', layout: 'fit ', hideborders: True, requires: ['Et. view. header ', 'Et. view. menu ', 'Et. view. tabpanel ', 'Et. view. south '], initcomponent: function () {var me = This; Ext. apply (Me, {// here, items is added to the current class (that is, viewport). In fact, directly configuring the items of viewport has the same effect as items: [{ID: 'desk ', layout: 'border', // This is the key. This layout implements the "east, west, north, and South" layout. You can find the details by yourself. There are a lot of items on the Internet: [Ext. create ('ET. view. header '), // create the top header Ext. create ('ET. view. menu '), // create the left menu Ext. create ('ET. view. tabpanel '), // create the intermediate panel tab Ext. create ('ET. view. south') // create a sidebar]}); me. callparent (arguments );}});Below are the JS files of various parts, so we will not introduce them one by one. As long as we can understand the call and the nested relationship of each internal items, and know the common layout effects of Ext, we can easily understand them.
Header. js
Ext. define ('ET. view. header ', {extend: 'ext. panel. panel ', border: false, layout: 'anchor', Region: 'North ', CLS: 'docs-head', height: 80, items: [{ID: 'header-top', xtype: 'box', CLS: 'header', border: false, anchor: 'None-25', HTML: '<span style = "margin-left: 10px; font-size: 30; color: White; font-family: "> exttest </span>' // html: 'Menu. js
Ext. define ('ET. view. menu ', {extend: 'ext. tree. panel ', alias: 'widget. sxptmenu ', requires: ['Et. store. menus '], initcomponent: function () {Ext. apply (this, {ID: 'menu-panel ', Title: 'System menus', iconcls: 'icon-call', margins: '0 0-1 1', Region: 'west', border: false, enabledd: false, split: True, width: 212, minsize: 130, maxsize: 300, rootvisible: false, containerscroll: True, collapsible: True, autoscroll: false, store: ext. create ('ET. store. menus ')}); this. callparent (arguments );}});TabPanel.jsExt. define ('ET. view. tabpanel ', {extend: 'ext. tab. panel ', initcomponent: function () {Ext. apply (this, {ID: 'content-panel ', Region: 'center', defaults: {autoscroll: True, bodypadding: 10}, activetab: 0, border: false, items: [{ID: 'homepage', Title: 'homepage', iconcls: 'home', layout: {type: 'hbox', Pack: 'start', align: 'stretch'}, items: [{xtype: 'panel ', flex: 5, border: 0, width: 604, layout: {Align: 'stretch', type: 'vbox'}, header: false, Title: 'p1', items: [{xtype: 'panel ', flex: 1, layout: {type: 'absolute '}, title: 'Personal information'}, {xtype: 'panel ', flex: 1, margin: '10 0 0 0', layout: {Align: 'stretch', type: 'hbox'}, header: false, border: 0, Title: 'grouping question information', items: [{xtype: 'panel ', flex: 1, margin: '0 0 0 0', Title: 'group question information'}, {xtype: 'panel ', flex: 1, margin: '0 0 0 10', title: 'value-on-duty table'}]}, {xtype: 'panel ', flex: 1, margin: '10 0 0 0', Title: 'Task hint'}]}, {xtype: 'panel ', flex: 2, margin: '0 0 10', header: false, border: 0, layout: {Align: 'stretch', type: 'vbox'}, Title: 'announcement list', items: [{xtype: 'panel ', flex: 1, margin: '0 0 0 0', title: 'latest ads'}, {xtype: 'panel ', flex: 1, margin: '10 0 0 0', title: 'material download'}]}); this. callparent (arguments );}});South.jsExt. define ('ET. view. south', {extend: 'ext. toolbar ', initcomponent: function () {Ext. apply (this, {ID: "bottom", // frame: True, Region: "South", height: 23, items: ['-> ', "Copyright copyright 2013 Emy of computer science", '->']}); this. callparent (arguments );}});4 others
The current implementation is very simple. If you are proficient in writing, you can achieve it in half an hour. The menu has been implemented here, but this will not be detailed for further introduction. Finally, we have the source code. You can study it on your own. Here we recommend sencha effecect, which can be used to implement the extjs effect and then learned through the generated code. Despite the charge, there is a 30-day trial period (as a non-professional front-end, 30 days a day to take out an hour to learn extjs, then it will be far enough to learn ).
Laizhang:
Finally is the source code: http://files.cnblogs.com/good-temper/ExtTest.rar
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
