devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ExtJS的View部分的基本操作_extjs 如何设置view的lastbox

作者：Cpp五条 | 2024-03-23 06:52:59

赞

踩

extjs 如何设置view的lastbox

点击有惊喜


先上代码
我们在View的ViewController文件中进行测试，纯属为了方便。

  1. Ext.define('RUKU.view.main.MainController', {
  2.     extend: 'Ext.app.ViewController',
  3.  
  4.     alias: 'controller.main',
  5.  
  6.     onItemSelected: function (sender, record) {
  7.         Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
  8.     },
  9.  
  10.     onConfirm: function (choice) {
  11.         if (choice === 'yes') {
  12.             //
  13.         }
  14.     },
  15.  
  16.     init: function(){
  17.        //创建一个纯javascript变量，就是和ExtJS无关的，js变量
  18.        var rP = Ext.ComponentQuery.query('app-main');
  19.           //显示变量rP的长度
  20.        //alert("init page"+rP.length);
  21.        alert("position : "+Ext.ComponentQuery.query('app-main')[0].getPosition());
  22.        alert("width : "+Ext.ComponentQuery.query('app-main')[0].getSize().width);
  23.        alert("title : "+Ext.ComponentQuery.query('app-main')[0].getTitle());
  24.        alert("class name : "+Ext.ClassManager.getName(Ext.ComponentQuery.query('app-main')[0]));
  25.        alert("class name : "+Ext.ClassManager.getName(Ext.ComponentQuery.query('app-main')[0].getComponent('p1')));
  26.        alert(Ext.ComponentQuery.query('app-main')[0].getComponent('p1').getTitle());
  27.  
  28.        
  29.     }
  30.     
  31. });

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

  1. Ext.define('RUKU.view.main.Main', {
  2.     extend: 'Ext.tab.Panel',
  3.     xtype: 'app-main',
  4.     title: '裸体',
  5.     requires: [
  6.         'Ext.plugin.Viewport',
  7.         'Ext.window.MessageBox',
  8.         'RUKU.view.main.UserList',
  9.         'RUKU.store.UserStore',
  10.         'RUKU.view.main.UserController',
  11.         'RUKU.view.main.Panel2',
  12.         'RUKU.view.main.TreePanel',
  13.         'RUKU.view.main.MainController',
  14.         'RUKU.view.main.MainModel',
  15.         'RUKU.view.main.List'
  16.     ]
  17.     .........................

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的代码：

  1. Ext.ComponentQuery.query('app-main')[0].add({
  2.                    itemId: 'p9',
  3.                    title: '对账单(list)',
  4.                    iconCls: 'fa-cog',
  5.                    bind: {
  6.                        html: 'check list'
  7.                    }

5---localStorage
这个英文单词的含义，很丰富，在奎克系统中它的出现是这样的：

  1. /**
  2.  * 项目永久存储信息
  3.  */
  4. Ext.define('app.utils.storage.localStorage', {
  5.     alternateClassName : 'local', // 设置别名是为了方便调用，这样直接cfg.xxx就能获取到变量。
  6.     statics : {
  7.         /**
  8.          * 设置系统缓存数据
  9.          * @param {} key
  10.          * @param {} obj
  11.          */
  12.         set : function(key, obj){
  13.         
  14.             if (Ext.isEmpty(key)) return;
  15.             //html5的新特性，纯Html5，浏览器；非ExtJS概念
  16.             localStorage.setItem(key, CU.toString(obj));
  17.             
  18.         }

最初以为这里的localStorage是不知道在哪个文件，什么位置定义的ExtJS的变量，查询官网，如下：
_
其实不是这样，localStorage首先不是前端层面的概念，也就是说，它不是代码层面的概念
它是浏览器上的概念
也就是说，localStorage即使没有ExtJS也可以使用
我测试了一下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index page</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. window.onload = function(){
  10. alert("abccccccc");
  11. localStorage.setItem("abbc", "neironga");
  12. alert(localStorage.getItem("abbc")); 
  13. };
  14. </script>
  15. </body>
  16. </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中，这是什么呢？
存储用户信息的代码：

  1. local.set("userinfo", userinfo);
  2. local.set("isLogin", true);

_
local是一个别名，对应的是app.utils.storage.localStorage这个class
那么上图中，set方法中，直接出现的变量（或者对象）localStorage是什么呢？
就是html5这个标准出现以后，生存在浏览器中的变量。
这样我们就搞清楚了localStorage的来历和使用范畴。


点击有惊喜


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/293738
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号