EXT初探

发表于   |  

今天上手Ext.js，简单做一下小结，后续再补充。

认识

Ext.js是一个用javascript写的，主要用于创建RIA（富互联网）应用前端用户界面应用的前端ajax框架。

特点

  • 擅长各种图表，适合企业内部使用的信息管理类系统，不适合电商、门户网站。因为大部分HTML代码是由JS生成的，所以对搜索引擎不是十分友好，不适合需要SEO的网站。
  • EXT是纯JS框架，用来展示后端数据，适合后端程序员兼修，而纯前端人员学习难度稍大。
  • 文档详细到令人发指~不过是英文~

EXT内置对象

  • Ext.MessageBox（简写Ext.Msg）
  • Ext.window.Window（简写为Ext.Window）
  • 等等

亮点

看到一种Button的配置值的写法buttons: Ext.Msg.YES | Ext.Msg.NO | Ext.Msg.CANCEL，还真的能渲染出“yes”“no”“cancel”三个按钮来，很奇怪——三个按钮同时显示的Button常量值不应该是YESNOCANCEL吗？用位运算或“|”是什么鬼？

Ext.onReady(function(){
    Ext.Msg.show({
        title: '地址',
        msg: '轻请输入地址：',
        width: 500,
        buttons: Ext.Msg.YES | Ext.Msg.NO |  Ext.Msg.CANCEL,
        //buttons: Ext.Msg.YESNOCANCEL,
        fn: function(){
            console.log(arguments);
        },
        animateTarget: 'addAddressBtn',
        icon: Ext.window.MessageBox.INFO,
    });
});

点源码进去看（笔者IDE是Webstrom，Ctrl+鼠标左键），发现EXT里的button常量的值并不连续：

OK : 1,

YES : 2,

NO : 4,

CANCEL : 8,

OKCANCEL : 9,

YESNO : 6,

YESNOCANCEL : 14,

一寻思，原来这个Button的取值是真的在做按位或运算：

  • 9=1|8 即 OKCANCEL = OK | CANCEL
  • 14=2|4|8 即 YESNOCANCEL = YES | NO | CANCEL

无论在字面语义上还是在值的运算上都可以用或来解释，这个设计真的很赞~

热评文章