ExtJS的View部分的基本操作

  1. 云栖社区>
  2. 博客列表>
  3. 正文

ExtJS的View部分的基本操作

pandamonica 2018-01-08 22:23:26 浏览2000 评论0

摘要: 先上代码我们在View的ViewController文件中进行测试,纯属为了方便。 Ext.define('RUKU.view.main.MainController', { extend: 'Ext.

先上代码
我们在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的来历和使用范畴。

用云栖社区APP,舒服~

【云栖快讯】《阿里巴巴Java开发手册》(详尽版)已经上线!您的Java学好了吗?如果没有,那就赶紧加入学习吧!  详情请点击

网友评论

pandamonica
文章75篇 | 关注11
关注
操作审计(ActionTrail)会记录您的云账户资源操作,提供操作记录查询,并可以将记录文... 查看详情
MySQL 是全球最受欢迎的开源数据库,阿里云MySQL版 通过深度的内核优化和独享实例提供... 查看详情
阿里云数据库内置的智能专家,提供云数据库问题诊断、性能优化、SQL分析、资源分析、优化报告等... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
飞天发布会第8期:智能选址解决方案

飞天发布会第8期:智能选址解决方案