• ExtJS - ExtJS实例

    更新记录
    转载请注明出处:https://www.cnblogs.com/cqpanda/p/16583540.html
    2022年8月14日发布。
    2022年8月13日 从笔记迁移到博客。

    ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

    ExtJS实例

    JSON转换

    对象转为JSON使用Ext.encode(o);方法，Ext.JSON.encode的别名
    JSON转为对象使用Ext.decode(str);方法，Ext.JSON.decode的别名

    实例：对象转为JSON

    1. Ext.onReady(function(){
    2.     //数据
    3.     var pandaObject = {
    4.         name:"Panda",
    5.         code:666,
    6.         hobby:['Paly Games','Make Something']
    7.     };
    8.  
    9.     //转换为JSON
    10.     var parseStr = Ext.encode(pandaObject);
    11.     console.log(parseStr);
    12. });

    实例：JSON转为对象

    1. Ext.onReady(function(){
    2.     //数据
    3.     var pandaObject = {
    4.         name:"Panda",
    5.         code:666,
    6.         hobby:['Paly Games','Make Something']
    7.     };
    8.  
    9.     //转换为JSON
    10.     var parseStr = Ext.encode(pandaObject);
    11.     console.log(parseStr);
    12.     
    13.     //转为对象
    14.     var parseObject = Ext.decode(parseStr);
    15.     console.log(pandaObject);
    16. });

    判断操作系统信息

    使用以下方法判断操作系统的版本信息

    1. Ext.isLinux
    2. Ext.isMac
    3. Ext.isWindows

    实例：判断是否Windows系统

    1. if(Ext.isWindows)
    2. {
    3.     console.log("Windows Yes!");
    4. }

    判断浏览器版本信息

    使用以下方法判断浏览器的版本信息

    1. Ext.isChrome
    2. Ext.isEdge
    3. Ext.isOpera
    4. Ext.isSafari
    5. Ext.isGecko     //判断是否Gecko内核，Firefox的内核
    6. Ext.isWebKit
    7. Ext.isIE
    8. Ext.isIE8
    9. Ext.isIE8m
    10. Ext.isIE8p
    11. Ext.isIE9
    12. Ext.isIE9m
    13. Ext.isIE9p
    14. Ext.isIE10
    15. Ext.isIE10m     //判断是否 IE 10.x或者更低
    16. Ext.isIE10p     //判断是否 IE 10.x或者更高
    17. Ext.isIE11
    18. Ext.isIE11m
    19. Ext.isIE11p

    实例：判断是否WebKit内核

    1. if(Ext.isWebKit)
    2. {
    3.     console.log("WebKit Yes!");
    4. }

    判断是否Chrome浏览器

    1. if(Ext.isChrome)
    2. {
    3.     console.log("Chrome Yes!");
    4. }

    获得浏览器版本信息

    使用Ext.chromeVersion属性，获得Chrome版本信息
    使用Ext.firefoxVersion属性，获得Firefox版本信息
    使用Ext.ieVersion属性，获得IE版本信息
    使用Ext.operaVersion属性，获得opera版本信息
    使用Ext.safariVersion属性，获得safari版本信息
    使用Ext.webKitVersion属性，获得WebKit版本信息

    实例：获得Chrome版本

    console.log(Ext.chromeVersion);

    实例：获得Firefox版本

    console.log(Ext.firefoxVersion);

    判断是否启用HTTPS

    使用Ext.isSecure属性

    实例：获得是否启用HTTPS

    console.log(Ext.isSecure);

    判断是否浏览器JavaScript严格模式

    使用Ext.isStrict属性

    实例：获得是否严格模式

    console.log(Ext.isStrict);

    HTML代码与实体转换

    HTML代码转为实体，使用Ext.htmlEncode()方法
    实体转为HTML代码，使用Ext.htmlDecode()方法

    实例：html代码转为实体

    1. var htmlCode = '
      panda666.com
      '      ;
    2. var parseHtml = Ext.htmlEncode(htmlCode);
    3. console.log(parseHtml); //<h1>panda666.com</h1>

    实例：实体字符串转为HTML代码

    1. var htmlCode = '
      panda666.com
      '      ;
    2. var parseHtml = Ext.htmlEncode(htmlCode);
    3. var originHtmlCode = Ext.htmlDecode(parseHtml);
    4. console.log(originHtmlCode); //
      panda666.com

    生成唯一Id

    使用Ext.id()方法，直接生成一个Id：

    Ext.id(); //默认以ext-*为前缀

    直接生成一个Id(带前缀)：

    Ext.id(null,'Panda-');

    给对象/DOM元素分配一个独一无二的Id

    1. var obj = {};
    2. var id1 = Ext.id(obj); //默认以ext-element-*为前缀
    3. console.log(id1);

    给对象/DOM元素分配一个独一无二的Id(带前缀)

    1. var obj = {};
    2. var id1 = Ext.id(obj, 'Panda-');
    3. console.log(id1);

    判断数据类型

    判断Number类型，使用Ext.isNumber()方法
    判断Numeric类型，使用Ext.isNumeric()方法
    判断String类型，使用Ext.isString ()方法
    判断boolean类型，使用Ext.isBoolean()方法
    判读Array类型，使用Ext.isArray()方法
    判断Object类型，使用Ext.isObject()方法
    判断Date类型，使用Ext.isDate()方法
    判断Function类型，使用Ext.isFunction()方法
    判断是否可迭代对象，使用Ext.isIterable()方法
    判断原始类型，使用Ext.isPrimitive()方法
    判断文本节点类型，使用Ext.isTextNode ()方法

    实例：判断Boolean类型

    1. var isHandsome = true;
    2. if(Ext.isBoolean(isHandsome))
    3. {
    4.     console.log("Handsome!");
    5. }

    实例：判断是否数组

    1. var animals = ["Panda","Dog","Monkey"];
    2. if(Ext.isArray(animals))
    3. {
    4.     animals.map(function(animal){
    5.         console.log(animal);
    6.     });
    7. }

    实例：判断对象类型

    1. var pandaObject = {};
    2. console.log(Ext.isObject(pandaObject));

    实例：判断日期类型

    1. var date = new Date();
    2. console.log(Ext.isDate(date)); //true

    实例：判断数值类型

    1. Ext.isNumber(123);      //true
    2. Ext.isNumber(666);      //true
    3. Ext.isNumber(666.66);   //true
    4. Ext.isNumber('666');    //false
    5. Ext.isNumber(0);        //true

    实例：判断数值类型(Numeric)

    1. Ext.isNumeric(666);     //true
    2. Ext.isNumeric('666');   //true
    3. Ext.isNumeric('666.66');   //true

    实例：判断Function类型

    1. Ext.isFunction(function(){});           //true
    2. Ext.isFunction(()=>{});                 //true
    3. Ext.isFunction(new Function());         //true

    实例：判断是否可迭代对象

    1. Ext.isIterable({});             //false
    2. Ext.isIterable([1,2,3]);        //true
    3. Ext.isIterable(new Array());    //true

    判断类型是否已经定义

    使用Ext.isDefined()方法

    实例：判断对象是否已经定义

    1. var obj = {};
    2. console.log(Ext.isDefined(obj));      //true
    3. console.log(Ext.isDefined(null));     //true
    4. console.log(Ext.isDefined(false));    //true
    5. console.log(Ext.isDefined(0));        //true
    6. var abc;
    7. console.log(Ext.isDefined(abc));      //false

    判断是否HTMLElement对象

    使用Ext.isElement()方法

    实例：判断是否HTMLElement对象

    1. var ele = document.createElement('p');
    2. console.log(Ext.isElement(ele));            //true
    3. console.log(Ext.isElement({}));             //false
    4. console.log(Ext.isElement([1,2]));          //false

    判断是否为空

    使用Ext.isEmpty ( value, [allowEmptyString] ) 方法

    实例：判断是否为空

    1. Ext.isEmpty(1);         //false
    2. Ext.isEmpty(null);      //true
    3. Ext.isEmpty(undefined); //true
    4. Ext.isEmpty(0);         //false
    5. Ext.isEmpty({});        //false
    6. Ext.isEmpty([]);        //true
    7. Ext.isEmpty([1,2]);     //false

    查询获得所有匹配的元素

    Ext.all ( selector, [root] ) : Ext.Component[]

    注意：Ext.ComponentQuery.query()方法的别名

    查询获得匹配的第一个元素

    Ext.first ( selector, [root] ) : Ext.Component

    查询获得元素(只使用一次)

    Ext.fly ( dom, [named] ) : Ext.dom.Element

    查询获得元素

    Ext.get ( element )

    查询获得元素

    Ext.query ( selector, [asDom] ) : HTMLElement[]/Ext.dom.Element[]

    注意：该方法是Ext.dom.Element.query别名
    查询获得元素

    Ext.select ( selector, composite ) : Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

    注意：该方法是Ext.dom.Element.select别名

    获得Ext.app.Application对象

    使用

    Ext.getApplication()

    获得window对象

    使用Ext.getWin()方法
    注意：返回的是一个ExtJS Element对象，不是DOM 对象
    可以使用.dom属性获得Dom对象

    实例：获得Windows对象及其DOM对象

    1. console.log(Ext.getWin());
    2. //获得浏览器DOM对象
    3. console.log(Ext.getWin().dom);

    获得document对象

    Ext.getDoc

    获得标签

    Ext.getHead

    获得标签

    Ext.getBody

    获得指定的Store

    Ext.getStore ( name ) : Ext.data.Store

    获得视窗的高宽

    1. Ext.getViewportHeight()
    2. Ext.getViewportWidth()

    获得对象的类型

    Ext.getClass ( object ) : Ext.Class

    获得对象的类的名称

    Ext.getClassName ( object ) : String

    获得对象的DOM元素

    Ext.getDom ( el ) : HTMLElement

    实例：

    1. // gets dom node based on id
    2. var elDom = Ext.getDom('elId');
    3.  
    4. // gets dom node based on the dom node
    5. var elDom1 = Ext.getDom(elDom);
    6.  
    7. // If we don't know if we are working with an
    8. // Ext.Element or a dom node use Ext.getDom
    9. function(el){
    10.     var dom = Ext.getDom(el);
    11.     // do something with the dom node
    12. }

    加载Ext.app.Application并初始化

    Ext.application ( config )

    对象组合

    1. Ext.apply ( object, config, [defaults] ) : Object 
    2. Ext.applyIf ( object, config ) : Object

    对象成员复制

    1. Ext.copy ( dest, source, names, [usePrototypeKeys] ) : Object
    2. Ext.copyIf ( destination, source, names ) : Object

    实例：

    1. var foo = { a: 1, b: 2, c: 3 };
    2.  
    3. var bar = Ext.copy({}, foo, 'a,c');
    4. // bar = { a: 1, c: 3 };

    创建类

    Ext.create ( [name], [args] ) : Object

    创建类(使用别名)

    Ext.createByAlias ( alias, args ) : Object

    定义对象

    Ext.define ( className, data, [createdFn] ) : Ext.Base

    定义命名空间

    1. Ext.namespace ( namespaces ) : Object 
    2. Ext.ns ( namespaces ) : Object

    绑定事件

    Ext.on ( eventName, [fn], [scope], [options], [order] ) : Object

    注意：该方法是Ext.GlobalEvents#addListener别名

    解绑事件

    Ext.un ( eventName, fn, [scope] )

    延迟加载函数

    Ext.defer ( fn, millis, [scope], [args], [appendArgs] ) : Number

    实例：

    1. var sayHi = function(name) {
    2.     alert('Hi, ' + name);
    3. }
    4.  
    5. // executes immediately:
    6. sayHi('Fred');
    7.  
    8. // executes after 2 seconds:
    9. Ext.defer(sayHi, 2000, this, ['Fred']);

    指定间隔时间加载函数和取消函数

    1. Ext.interval ( fn, millis, [scope], [args], [appendArgs] ) : Number 
    2. Ext.uninterval ( id )

    实例：

    1. var sayHi = function(name) {
    2.     console.log('Hi, ' + name);
    3. }
    4.  
    5. // executes every 2 seconds:
    6. var timerId = Ext.interval(sayHi, 2000, this, ['Fred']);
    7.  
    8. //timer stopped
    9. Ext.uninterval(timerId);

    转为数组

    Ext.toArray ( iterable, [start], [end] ) : Array

    释放对象

    Ext.destroy ( args )

    释放对象指定的成员

    Ext.destroyMembers ( object, args )

    遍历成员

    Ext.each ( array, fn, [scope], [reverse] ) : Boolean/Number

    实例：

    1. var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
    2.  
    3. Ext.Array.each(countries, function(name, index, countriesItSelf) {
    4.     console.log(name);
    5. });
    6.  
    7. var sum = function() {
    8.     var sum = 0;
    9.  
    10.     Ext.Array.each(arguments, function(value) {
    11.         sum += value;
    12.     });
    13.     
    14.     return sum;
    15. };
    16.  
    17. sum(1, 2, 3); // returns 6

    遍历成员

    Ext.iterate ( object, fn, [scope] )

    注意：该方法是Ext.Array.each别名

    排除指定组件

    Ext.exclude ( excludes ) : Object

    实例：

    1. Ext.exclude('Ext.data.*').require('*');
    2. Ext.exclude('widget.button*').require('widget.*');

    输出日志

    Ext.log ( [options], [message] )

    参数：
    options : String/Object (optional)
    The message to log or an options object with any of the following properties:
    msg: The message to log (required).
    level: One of: "error", "warn", "info" or "log" (the default is "log").
    dump: An object to dump to the log as part of the message.
    stack: True to include a stack trace in the log.
    indent: Cause subsequent log statements to be indented one step.
    outdent: Cause this and following statements to be one step less indented.
    message : String... (optional)
    The message to log (required unless specified in options object).

    获得当前时间戳

    Ext.now()

    ExtJS准备函数

    Ext.onReady ( fn, [scope], [options] )

    延迟执行

    1. Ext.defer(function() {
    2.     //do something
    3. }, 3000);
  • 相关阅读:
    MySQL - 触发器
    AKK菌——下一代有益菌
    『C语言』深度走入取整 & 4种函数
    基于Python实现的语音特征提取声音信号处理
    聊聊springboot自动装配出现的TypeNotPresentExceptionProxy异常排查
    设计模式_模板方法模式
    Windows 下使用bpg 图片 - 查看，转换，预览
    （Part2）Python编写的计算跳过带有特定数字的车位数量小程序，并利用wxPython做成GUI界面打包成可执行文件
    自定义vue项目的雷达图组件
    K8S核心概念之SVC（易混淆难理解知识点总结）
  • 原文地址：https://blog.csdn.net/weixin_38304160/article/details/126335042