ExtJS Getting Started instance

Recently learned the next ExtJS, want to record their own results, I hope to just get started ext classmate a little help, first to do a simple example.

First, to the official website Download ExtJS Package EXTJS5, here is the 5.0 version, the following officially open it!

Second, unpack the ExtJS package, find

Ext-all.js Base Package (\ext-5.0.0\build);

Ext-all-debug.js Basic Package, the development of the use, the error will be detailed (\ext-5.0.0\build);

Choose a suitable theme, here I use crisp, find ext-theme-crisp-all.css and images files (\packages\ext-theme-crisp\build\resources)

Third, new index.html page and reference Ext-all-debug.js, Ext-theme-crisp-all.css, new Index.js app launch settings file, new app folder put controller/view/model/ Store

Index.html

<! DOCTYPE html>
　　
Index.js
Ext.Loader.setConfig ({    true}); Ext.application ({    ' Demo1 ',    ' app ',    models: [    ],    stores: [    ],    controllers: [        ' Mycontroller '    ], views    : [        ' Myviewport '    ],     function  () {        varnew  Demo1.view.MyViewport ();    }});
Iv. Creating views, controllers
Add View Myviewport.js under the View folder, below I added a simple form
Myviewport.js
Ext.define (' Demo1.view.MyViewport ', {extend: ' Ext.container.Viewport ', initcomponent:function () {var me =        This Ext.applyif (Me, {items: [{xtype: ' form ', Title: ' User modified password                    ', width:300, Bodypadding:10, DefaultType: ' TextField ', Border:false, items: [{Allowblank:fal SE, id: ' Txtpwdold ', Fieldlabel: ' Original password ', n                            Ame: ' Pwdold ', labelwidth:100, Emptytext: ' Original password ', InputType: ' Password '}, {Allowblank:f                            Alse, ID: ' Txtpwdnew ', Fieldlabel: ' New password ', Name: ' PWDnew ', labelwidth:100, Emptytext: ' New password ',                            InputType: ' Password '}, {allowblank:false, ID: ' TxtPwdNew2 ', Fieldlabel: ' Enter new password again ', NA                            Me: ' PwdNew2 ', labelwidth:100, Emptytext: ' re-enter new password ',                        InputType: ' Password '}], buttons: [                    {text: ' Save ', id: ' Btnsavepwd '}        ]                }            ]        });    This.callparent (arguments); }});
Under the Controller folder to add Controllers Mycontroller.js, program code can be written in the controller, the most used is to listen to control events, the following simple example, the form of the Save button to listen to the Click event
Macontroller.js
Ext.define (' Demo1.controller.MyController ', {    extend: ' Ext.app.Controller ',    init:function (application) {        This.control ({            ' [id=btnsavepwd] ': {                Click:this.onOK            }        });    },    //Save    OnOK: function (obj) {        var form = obj.up (' form '). GetForm ();        if (Form.isvalid ()) {            Ext.Msg.alert (' informational hint ', ' saved ');}        }    );
　　
Here, the program is ready to run, Source: Http://pan.baidu.com/s/1i3rBS8X