先上代码
我们在View的ViewController文件中进行测试，纯属为了方便。
Ext.define('RUKU.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') {
//
}
},
init: function(){
//创建一个纯javascript变量，就是和ExtJS无关的，js变量
var rP = Ext.ComponentQuery.query('app-main');
//显示变量rP的长度
//alert("init page"+rP.length);
alert("position : "+Ext.ComponentQuery.query('app-main')[0].getPosition());
alert("width : "+Ext.ComponentQuery.query('app-main')[0].getSize().width);
alert("title : "+Ext.ComponentQuery.query('app-main')[0].getTitle());
alert("class name : "+Ext.ClassManager.getName(Ext.ComponentQuery.query('app-main')[0]));
alert("class name : "+Ext.ClassManager.getName(Ext.ComponentQuery.query('app-main')[0].getComponent('p1')));
alert(Ext.ComponentQuery.query('app-main')[0].getComponent('p1').getTitle());
}
});1--init方法，如下代码所示，我们使用了init方法这是extjs种viewController的一个方法，定义如下
Called when the view initializes. This is called after the view's initComponent method has been called.
这个方法通常的格式如下：
我们的目的就是在init中，写一些extjs的代码，可以在网页被加载的第一时间，运行这些代码。
2--js变量的长度
var v1 = XXX;
的方式定义一个js变量，然后使用v1.length可以获取这个变量的长度。
3--上述代码的运行结果：
上述过程中最有价值的就是获取component的名字
Ext.ClassManager.getName(Ext.ComponentQuery.query('app-main')[0]));
上述语句对应的UI的代码是：它成功的获取了RUKU.view.main.Main
Ext.define('RUKU.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
title: '裸体',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'RUKU.view.main.UserList',
'RUKU.store.UserStore',
'RUKU.view.main.UserController',
'RUKU.view.main.Panel2',
'RUKU.view.main.TreePanel',
'RUKU.view.main.MainController',
'RUKU.view.main.MainModel',
'RUKU.view.main.List'
]
.........................4---Ext.tab.Panel
这个Component的样子实际上是这样的：
三个tab页
我们想要的效果是，依据数据库查询结果，显示不同数量的tab页，也就是权限。你是admin那么就显示7个tab；你是入库者，那么只显示2个tab；如果你是工艺人员，那么显示5个tab。
如何实现呢？
用户名密码登陆以后，查询数据库中用户名对应的role也就是角色，依据角色去menu数据表中查询有哪些menu item的数据（返回值是个字符串）。
然后依据返回来的字符串，向Ext.tab.Panel中add()新的tab页。
也就是说最初默认只有两个tab页：
case ck:
不再add
case tc:
add 3个新的tab
case admin:
add 5个新的tab
这样就实现了权限在view上的区分。下面代码是add的代码：
Ext.ComponentQuery.query('app-main')[0].add({
itemId: 'p9',
title: '对账单(list)',
iconCls: 'fa-cog',
bind: {
html: 'check list'
}5---localStorage
这个英文单词的含义，很丰富，在奎克系统中它的出现是这样的：
/**
* 项目永久存储信息
*/
Ext.define('app.utils.storage.localStorage', {
alternateClassName : 'local', // 设置别名是为了方便调用，这样直接cfg.xxx就能获取到变量。
statics : {
/**
* 设置系统缓存数据
* @param {} key
* @param {} obj
*/
set : function(key, obj){
if (Ext.isEmpty(key)) return;
//html5的新特性，纯Html5，浏览器；非ExtJS概念
localStorage.setItem(key, CU.toString(obj));
}最初以为这里的localStorage是不知道在哪个文件，什么位置定义的ExtJS的变量，查询官网，如下：
其实不是这样，localStorage首先不是前端层面的概念，也就是说，它不是代码层面的概念
它是浏览器上的概念
也就是说，localStorage即使没有ExtJS也可以使用
我测试了一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index page</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
alert("abccccccc");
localStorage.setItem("abbc", "neironga");
alert(localStorage.getItem("abbc"));
};
</script>
</body>
</html>经测试，ie6浏览器，无法显示第二个alert的信息；
但是firefox等浏览器的新版本，都可以。
下面去mozilla的官网看看
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
这个网站有更加详实的介绍
https://www.cnblogs.com/st-leslie/p/5617130.html
可以使用chrome浏览器查看localStorage
对照奎克系统，看看local storage是怎样工作的
原本平静的登录界面
登录以后看到了local storage中的数据
userinfo这个变量中的内容如下：
{"usercode":"admin","keepusername":"1","keeppassword":"0","invalidate":false,"companyid":"00"}
那么在代码上，上述登录过程是怎样使用local storage的呢？
上述三个文件，是网站刚一访问的时候，弹出的主界面main以及login界面
我们看到Login.js页面配有ViewController.js文件
这个文件的名字是LoginController.js
输入用户名密码后，js代码会使用EU.RS()方法，其内核是Ext.Ajax.request();方法
向一个url发送一个ajax请求，返回来的结果被callback方法进行解析；
url的request的响应过程是spring mvc来处理的，返回值是json
过程略过
success登录以后，我们通常的做法是将用户的信息存放在session中，这样贯穿整个网站，都可以随时获取用户信息，从而知道给这个用户什么样的权限
但是上图代码，将用户信息存储在local中，这是什么呢？
存储用户信息的代码：
local.set("userinfo", userinfo);
local.set("isLogin", true);
local是一个别名，对应的是app.utils.storage.localStorage这个class
那么上图中，set方法中，直接出现的变量（或者对象）localStorage是什么呢？
就是html5这个标准出现以后，生存在浏览器中的变量。
这样我们就搞清楚了localStorage的来历和使用范畴。
