1、下载Sencha及Ext包
2、用sencha生成项目
sencha -sdk ext generate app -classic MES mes-app
app.js是主程序的入口文件
/*
* This file launches the application by asking Ext JS to create
* and launch() the Application class.
*/
Ext.application({
extend: 'Mes.Application',
name: 'Mes',
/**
requires: [
// This will automatically load all classes in the Mes namespace
// so that application classes do not need to require each other.
'Mes.*'
]
**/
// The name of the initial view to create.
//mainView: 'Mes.view.main.Main'
//mainView: 'Mes.view.login.Login'
});
Application.js
/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('Mes.Application', {
extend: 'Ext.app.Application',
name: 'Mes',
views: [
'Mes.view.main.Main',
'Mes.view.login.Login',
],
launch:function(){
var loginState = window.localStorage.getItem('loginState');
Ext.create({
xtype:loginState==='true' ? 'app-main' : 'login'
});
},
onAppUpdate: function () {
console.log('onAppUpdate...');
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});
Login.js
Ext.define('Mes.view.login.Login',{
extend: 'Ext.window.Window',
xtype:'login',
requires: [
'Mes.view.login.LoginController',
'Mes.view.login.LoginModel'
],
controller: 'login-login',
viewModel: {
type: 'login-login'
},
bodyPadding:10,
autoShow:true,
title:'Login',
//closable:true,
//html: 'Hello, World!!',
items:{
xtype:'form',
reference:'loginForm',
items:[
{
xtype:'textfield',
name:'username',
fieldLabel:'Username',
allowBlank:false
},
{
xtype:'textfield',
name:'password',
inputType:'password',
fieldLabel:'Password',
allowBlank:false
},
{
xtype:'displayfield',
hideEmptyLabel:false,
value:'Enter password'
}
],
buttons:[
{
text:'Login',
formBind:true,
listeners:{
click:'onLoginClick'
}
}
]
}
});
LoginModel.js
Ext.define('Mes.view.login.LoginModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.login-login',
data: {
name: 'Mes'
}
});
LoginController.js
Ext.define('Mes.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login-login',
onLoginClick:function(){
window.localStorage.setItem('loginState',true);
this.getView().destroy();
Ext.create({
xtype:'app-main'
});
}
});
Main.js
/**
* This class is the main view for the application. It is specified in app.js as the
* "mainView" property. That setting automatically applies the "viewport"
* plugin causing this view to become the body element (i.e., the viewport).
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('Mes.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
//renderTo: Ext.getBody(),
alias:'widget.app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'Mes.view.main.MainController',
'Mes.view.main.MainModel',
'Mes.view.main.List'
],
controller: 'main',
viewModel: 'main',
plugins:'viewport',// renderTo: Ext.getBody()用于显示页面
ui: 'navigation',
tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,
header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
iconCls: 'fa-th-list',
items:[
{
xtype:'button',
text:'Logout',
margin:'10 0',
handler:'LogoutClick'
}
]
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},
autoShow:true,
defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},
items: [{
title: 'Home',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Users',
iconCls: 'fa-user',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Groups',
iconCls: 'fa-users',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]
});
MainController.js
/**
* This class is the controller for the main view for the application. It is specified as
* the "controller" of the Main view class.
*/
Ext.define('Mes.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onItemSelected: function (sender, record) {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
},
LogoutClick:function(){
window.localStorage.removeItem('loginState');
this.getView().destroy();
Ext.create({
xtype:'login'
});
}
});
MainModel.js
/**
* This class is the view model for the Main view of the application.
*/
Ext.define('Mes.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Mes',
loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
//TODO - add data, formulas and/or methods to support your view
});
List.js
/**
* This view is an example list of people.
*/
Ext.define('Mes.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
requires: [
'Mes.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
listeners: {
select: 'onItemSelected'
}
});
登录页面
首页
