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#

Ext.onReady(function(){
    //数据
    var pandaObject = {
        name:"Panda",
        code:666,
        hobby:['Paly Games','Make Something']
    };

    //转换为JSON
    var parseStr = Ext.encode(pandaObject);
    console.log(parseStr);
});

实例：JSON转为对象#

Ext.onReady(function(){
    //数据
    var pandaObject = {
        name:"Panda",
        code:666,
        hobby:['Paly Games','Make Something']
    };

    //转换为JSON
    var parseStr = Ext.encode(pandaObject);
    console.log(parseStr);
    
    //转为对象
    var parseObject = Ext.decode(parseStr);
    console.log(pandaObject);
});

判断操作系统信息#

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

Ext.isLinux
Ext.isMac
Ext.isWindows

实例：判断是否Windows系统#

if(Ext.isWindows)
{
    console.log("Windows Yes!");
}

判断浏览器版本信息#

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

Ext.isChrome
Ext.isEdge
Ext.isOpera
Ext.isSafari
Ext.isGecko     //判断是否Gecko内核，Firefox的内核
Ext.isWebKit
Ext.isIE
Ext.isIE8
Ext.isIE8m
Ext.isIE8p
Ext.isIE9
Ext.isIE9m
Ext.isIE9p
Ext.isIE10
Ext.isIE10m     //判断是否 IE 10.x或者更低
Ext.isIE10p     //判断是否 IE 10.x或者更高
Ext.isIE11
Ext.isIE11m
Ext.isIE11p

实例：判断是否WebKit内核#

if(Ext.isWebKit)
{
    console.log("WebKit Yes!");
}

判断是否Chrome浏览器#

if(Ext.isChrome)
{
    console.log("Chrome Yes!");
}

获得浏览器版本信息#

使用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代码转为实体#

var htmlCode = '<h1>panda666.com</h1>';
var parseHtml = Ext.htmlEncode(htmlCode);
console.log(parseHtml); //&lt;h1&gt;panda666.com&lt;/h1&gt;

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

var htmlCode = '<h1>panda666.com</h1>';
var parseHtml = Ext.htmlEncode(htmlCode);
var originHtmlCode = Ext.htmlDecode(parseHtml);
console.log(originHtmlCode); //<h1>panda666.com</h1>

生成唯一Id#

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

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

直接生成一个Id（带前缀）：

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

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

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

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

var obj = {};
var id1 = Ext.id(obj, 'Panda-');
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类型#

var isHandsome = true;
if(Ext.isBoolean(isHandsome))
{
    console.log("Handsome!");
}

实例：判断是否数组#

var animals = ["Panda","Dog","Monkey"];
if(Ext.isArray(animals))
{
    animals.map(function(animal){
        console.log(animal);
    });
}

实例：判断对象类型#

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

实例：判断日期类型#

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

实例：判断数值类型#

Ext.isNumber(123);      //true
Ext.isNumber(666);      //true
Ext.isNumber(666.66);   //true
Ext.isNumber('666');    //false
Ext.isNumber(0);        //true

实例：判断数值类型（Numeric）#

Ext.isNumeric(666);     //true
Ext.isNumeric('666');   //true
Ext.isNumeric('666.66');   //true

实例：判断Function类型#

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

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

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

判断类型是否已经定义#

使用Ext.isDefined()方法

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

var obj = {};
console.log(Ext.isDefined(obj));      //true
console.log(Ext.isDefined(null));     //true
console.log(Ext.isDefined(false));    //true
console.log(Ext.isDefined(0));        //true
var abc;
console.log(Ext.isDefined(abc));      //false

判断是否HTMLElement对象#

使用Ext.isElement()方法

实例：判断是否HTMLElement对象#

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

判断是否为空#

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

实例：判断是否为空#

Ext.isEmpty(1);         //false
Ext.isEmpty(null);      //true
Ext.isEmpty(undefined); //true
Ext.isEmpty(0);         //false
Ext.isEmpty({});        //false
Ext.isEmpty([]);        //true
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对象#

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

获得document对象#

Ext.getDoc

获得<head>标签#

Ext.getHead

获得<body>标签#

Ext.getBody

获得指定的Store#

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

获得视窗的高宽#

Ext.getViewportHeight()
Ext.getViewportWidth()

获得对象的类型#

Ext.getClass ( object ) : Ext.Class 

获得对象的类的名称#

Ext.getClassName ( object ) : String 

获得对象的DOM元素#

Ext.getDom ( el ) : HTMLElement 

实例：

// gets dom node based on id
var elDom = Ext.getDom('elId');

// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
    var dom = Ext.getDom(el);
    // do something with the dom node
}

加载Ext.app.Application并初始化#

Ext.application ( config )

对象组合#

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

对象成员复制#

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

实例：

var foo = { a: 1, b: 2, c: 3 };

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

创建类#

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

创建类（使用别名）#

Ext.createByAlias ( alias, args ) : Object 

定义对象#

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

定义命名空间#

Ext.namespace ( namespaces ) : Object 
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 

实例：

var sayHi = function(name) {
    alert('Hi, ' + name);
}

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
Ext.defer(sayHi, 2000, this, ['Fred']);

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

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

实例：

var sayHi = function(name) {
    console.log('Hi, ' + name);
}

// executes every 2 seconds:
var timerId = Ext.interval(sayHi, 2000, this, ['Fred']);

//timer stopped
Ext.uninterval(timerId);

转为数组#

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

释放对象#

Ext.destroy ( args ) 

释放对象指定的成员#

Ext.destroyMembers ( object, args ) 

遍历成员#

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

实例：

var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];

Ext.Array.each(countries, function(name, index, countriesItSelf) {
    console.log(name);
});

var sum = function() {
    var sum = 0;

    Ext.Array.each(arguments, function(value) {
        sum += value;
    });
    
    return sum;
};

sum(1, 2, 3); // returns 6

遍历成员#

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

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

排除指定组件#

Ext.exclude ( excludes ) : Object 

实例：

Ext.exclude('Ext.data.*').require('*');
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] ) 

延迟执行#

Ext.defer(function() {
    //do something
}, 3000);