EXTJS5 Project in Progress (i)

Have not contacted ExtJS before, now need to write a project, plan to use ExtJS to write. After all, the page looks more refreshing. I read the documents and examples for 2 weeks, or foggy. Optical Java configuration for 4-5 days, and finally had to give up. Changed to VS2013 development.

The first successfully run code, of course not Hello Word

I am a rookie, so only consider the function is normal display. Although EXTJS5 is used, some features may be implemented in the lower version of the syntax. Because the English is too difficult, the API basically can not understand. Please bypass the groove.

EXTJS5 the file directory referenced in the package: where icons is copied from a friend's project, the UX is copied from the Build subfolder.

　　

Project directory:

　　

　　HTML page Code reference :

<link href= "Extjs5/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel= " Stylesheet "/>
<script src= "Extjs5/build/bootstrap.js" ></script>
<script src= "Appliction.js" ></script>

　　appliction.js Code :

(function () {
Ext.onready (function () {
Turn on hover alert function
Ext.QuickTips.init ();
Turn on dynamic loading
Ext.Loader.setConfig ({
Enabled:true
});
To create an instance of an application
Ext.application ({
Set namespace
Name: ' Lz ',
Specify configuration options, set the appropriate path
Appfolder: ' Application ',
Load Controller
controllers: [' Systemes.user1 '],

Automatic loading and instantiation of viewport files
Autocreateviewport: ' Lz.view.Systemes.users1 '
});
});
})();

Controller Layer User1.js Code:

Ext.define (' Lz.controller.Systemes.user1 ', {
Extend: ' Ext.app.Controller ',
Adding Viewport.js to the controller
Views: [' systemes.users1 ']
});

View Layer Users1.js Code

Ext.Loader.setConfig ({
Enabled:true
});
Ext.Loader.setPath (' Ext.ux ', '/extjs5/ux ');
Ext.require ([
' Ext.ux.statusbar.StatusBar '
]);

Ext.define (' Lz.view.Systemes.users1 ', {
Extend: ' Ext.panel.Panel ',
Xtype: ' Layoutdefault ',
Layout: ' Border ',
Items
[ {
Region: ' North ',
Xtype: ' Panel ',
HEIGHT:80,
Style: ' text-align:center;margin:-1px; ',
HTML: ' <div style= font-weight:bold;font-size:24px ' > Shanghai Li Zhong Integrated Management system </div> '
}, {
Region: ' West ',
WIDTH:300,
Title: ' Navigation bar ',
Split:true,
Collapsible:true
}, {
Region: ' Center ',
Xtype: ' TabPanel ',
ID: ' Centertabpanel ',
activetab:0,
Items: {
Title: ' My Work ',
Icon: '. /.. /.. /extjs5/icons/house.png ',
Layout: ' Fit '//auto-populate page
}
},
{
Region: ' South ',
Style: ' margin:-2px ',
Items: [{
Xtype: ' StatusBar ',
Defaulticoncls: ' Default-icon ',
Text: ' Ready ',
Iconcls: ' Readyicon ',
Items: [{}, '-', ' Integrated Management system ']
}]
}]
});

At last:

If there is a great God advice, please add QQ: three Lu Ying II JIU Wu Ying Restaurant

EXTJS5 Project in Progress (i)