实例代码使用方法：1.第一步：使用senchacmd创建项目名称需要注意输入为oaSystem我使用的命令如下：sencha-sdkE:\openSrc\ext-5.0.0generateappoaSystemE:\workspaces\myeclipse2014\csdn如果不太清楚sen
本文地址：
本文作者：sushengmiyan
------------------------------------------------------------------------------------------------------------------------------------
暂时完成效果图如下：
1.登录界面
输入任意用户名与密码（暂时没有设置登录验证等，后期添加），点击用户登录进入主页面
在左下角，显示了你刚才输入的用户名，实现了数据的传输。
代码模块展示如下：
app.js
/*
* This file is generated and updated by Sencha Cmd. You can edit this file as
* needed for your application, but these edits will have to be merged by
* Sencha Cmd when upgrading.
*/
Ext.application({
name: &＃39;oaSystem&＃39;,
extend: &＃39;oaSystem.Application&＃39;,
//autoCreateViewport: &＃39;oaSystem.view.main.Main&＃39;,
//-------------------------------------------------------------------------
// Most customizations should be made to oaSystem.Application. If you need to
// customize this file, doing so below this section reduces the likelihood
// of merge conflicts when upgrading to new versions of Sencha Cmd.
//-------------------------------------------------------------------------
});
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(&＃39;oaSystem.Application&＃39;, {
extend: &＃39;Ext.app.Application&＃39;,
name: &＃39;oaSystem&＃39;,
uses:[&＃39;oaSystem.SimData&＃39;, &＃39;Ext.ux.ajax.*&＃39;],
views: [
// TODO: add views here
],
controllers: [
&＃39;Root&＃39;
// TODO: add controllers here
],
stores: [
// TODO: add stores here
],
launch: function () {
// TODO - Launch the application
//服务器傀儡，模拟真实世界中服务器交换
//oaSystem.SimData.init();
//console.log(&＃39;launch begin&＃39;);
//this.callParent()
Ext.ux.ajax.SimManager.init().register({
&＃39;/authenticate&＃39;:
{
type: &＃39;json&＃39;,
data: function(ctx){
return Ext.apply({}, true);
}
}
});
}
});
login.js
Ext.define(
&＃39;oaSystem.view.login.Login&＃39;,
{
requires:[&＃39;oaSystem.view.login.LoginController&＃39;],
extend: &＃39;Ext.window.Window&＃39;,
controller: &＃39;login&＃39;,
closable: false,
resizable : false,
modal: true,
//draggable: false,
autoShow: true,
title: &＃39;用户登录---OA办公系统&＃39;,
glyph: &＃39;xf007@FontAwesome&＃39;,
items:[{
xtype:&＃39;form&＃39;,//父窗体
reference: &＃39;form&＃39;,
bodyPadding: 20,
items:[{
xtype: &＃39;textfield&＃39;,
name: &＃39;username&＃39;,
labelWidth: 50,
fieldLabel: &＃39;用户名&＃39;,
allowBlank: false,
emptyText: &＃39;用户名或邮箱地址&＃39;
},{
xtype: &＃39;textfield&＃39;,
name: &＃39;password&＃39;,
labelWidth: 50,
inputType: &＃39;password&＃39;,
fieldLabel: &＃39;密 码&＃39;,
allowBlank: false,
emptyText: &＃39;请输入您的密码&＃39;
}]
}],
buttons: [{
name: &＃39;registbutton&＃39;,
text: &＃39;用户注册&＃39;,
glyph: &＃39;xf118@FontAwesome&＃39;
},{
name: &＃39;loginbutton&＃39;,
text: &＃39;用户登录&＃39;,
glyph: &＃39;xf110@FontAwesome&＃39;,
region: &＃39;center&＃39;,
listeners:{
click: &＃39;onLoginbtnClick&＃39;//单击事件 调用LoginConroller.js中的onLoginbtnClick函数
}
}]
}
);logincontroller.js
Ext.define(
&＃39;oaSystem.view.login.LoginController&＃39;,
{
extend: &＃39;Ext.app.ViewController&＃39;,
alias: &＃39;controller.login&＃39;,
//用户登录按钮事件处理
onLoginbtnClick: function(){
var form = this.lookupReference(&＃39;form&＃39;);
if (form.isValid()) {
this.login({
data: form.getValues(),
scope: this,
success: &＃39;onLoginSuccess&＃39;,
failure: &＃39;onLoginFailure&＃39;
})}
},
onLoginFailure: function() {
// Do something
Ext.getBody().unmask();
},
onLoginSuccess: function(logname, logpass) {
console.log(&＃39;登录成功，用户名： &＃39; + logname);
console.log(&＃39;登录成功，密 码： &＃39; + logpass);
this.fireViewEvent(&＃39;login&＃39;, logname);
//var org = this.lookupReference(&＃39;organization&＃39;).getSelectedRecord();
// this.fireViewEvent(&＃39;login&＃39;, this.getView(), user, org, this.loginManager);
},
login: function(options) {
Ext.Ajax.request({
url: &＃39;/authenticate&＃39;,
method: &＃39;GET&＃39;,
params: options.data,
scope: this,
callback: this.onLoginReturn,
original: options
});
},
/**
applyModel: function(model) {
return model && Ext.data.schema.Schema.lookupEntity(model);
},
*/
onLoginReturn: function(options, success, response) {
optiOns= options.original;
//var session = this.getSession(),
// resultSet;
if (success) {
console.log(&＃39;log in success&＃39;);
/**
resultSet = this.getModel().getProxy().getReader().read(response, {
recordCreator: session ? session.recordCreator : null
});
if (resultSet.getSuccess()) {
Ext.callback(options.success, options.scope, [resultSet.getRecords()[0]]);
/*/
console.log(response);
Ext.callback(options.success, options.scope, [options.data.username, options.data.password]);
return;
//}
}
//Ext.callback(options.failure, options.scope, [response, resultSet]);
}
}
);
main.js
Ext.define(
&＃39;oaSystem.view.main.Main&＃39;,
{
extend: &＃39;Ext.container.Viewport&＃39;,
uses:[&＃39;oaSystem.view.main.region.Top&＃39;, &＃39;oaSystem.view.main.region.Bottom&＃39;],
layout: { type: &＃39;border&＃39; },
viewModel: { type: &＃39;main&＃39; },
items: [{
xtype: &＃39;maintop&＃39;,
region: &＃39;north&＃39;
},
{
xtype: &＃39;mainbottom&＃39;,
region: &＃39;south&＃39;,
bind: &＃39;你好，{currentUser}&＃39;
},
{
xtype: &＃39;panel&＃39;
}],
initComponent: function(){
//设置图标文件，设置后可以使用glyph属性
Ext.setGlyphFontFamily(&＃39;FontAwesome&＃39;);
this.callParent();
}
}
);
root.js
/**
* The main application controller. This is a good place to handle things like routes.
* 这是主程序的控制器，这里适合做类似路由转发这样的事情
*/
Ext.define(&＃39;oaSystem.controller.Root&＃39;,
{
extend: &＃39;Ext.app.Controller&＃39;,
uses: [&＃39;oaSystem.view.login.Login&＃39;,&＃39;oaSystem.view.main.Main&＃39;],
/**
* 初始化事件
*/
onLaunch: function () {
var session = this.session = new Ext.data.Session();
if (Ext.isIE8) {
Ext.Msg.alert(&＃39;亲，本例子不支持IE8哟&＃39;);
return;
};
this.login = new oaSystem.view.login.Login({
session: session,
listeners: {
scope: this,
login: &＃39;onLogin&＃39;
}});
},
/**
* logincontroller 的 "login" 事件回调.
* @param user
* @param loginManager
*/
onLogin: function (username, loginController) {
this.login.destroy();
this.user = username;
console.log(&＃39;username: &＃39; + username);
this.showUI();
},
showUI: function(){
console.log(&＃39;show ui started&＃39;);
//显示主界面
this.viewport = new oaSystem.view.main.Main(
{ //用户信息传入视图
viewModel: {
data:
{
currentUser: this.user
}
}
}
);
}
});
实例代码打包下载地址：
http://download.csdn.net/detail/sushengmiyan/7817549
使用方法：
1.第一步：使用sencha cmd 创建项目 名称需要注意 输入为oaSystem
我使用的命令如下：sencha -sdk E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn
如果不太清楚sencha cmd的命令参数，建议先阅读 http://blog.csdn.net/sushengmiyan/article/details/38313537
2.第二步：使用sencha app build 命令构建应用程序，使用sencha web start 测试是否成功。
建议先阅读：http://blog.csdn.net/sushengmiyan/article/details/38331347
3.将刚才新建目录下的app文件夹全部删除，将下载的压缩文件解压缩，直接解压缩到项目目录即可，重新build运行。
京公网安备 11010802041100号