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);

posted @ 2022-08-14 07:23 重庆熊猫阅读(504) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

重庆熊猫 Loading

重庆熊猫

wx：wdfysoft

ExtJS - ExtJS实例

ExtJS实例

JSON转换

实例：对象转为JSON

实例：JSON转为对象

判断操作系统信息

实例：判断是否Windows系统

判断浏览器版本信息

实例：判断是否WebKit内核

判断是否Chrome浏览器

获得浏览器版本信息

实例：获得Chrome版本

实例：获得Firefox版本

判断是否启用HTTPS

实例：获得是否启用HTTPS

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

实例：获得是否严格模式

HTML代码与实体转换

实例：html代码转为实体

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

生成唯一Id

判断数据类型

实例：判断Boolean类型

实例：判断是否数组

实例：判断对象类型

实例：判断日期类型

实例：判断数值类型

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

实例：判断Function类型

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

判断类型是否已经定义

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

判断是否HTMLElement对象

实例：判断是否HTMLElement对象

判断是否为空

实例：判断是否为空

查询获得所有匹配的元素

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

查询获得元素（只使用一次）

查询获得元素

查询获得元素

获得Ext.app.Application对象

获得window对象

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

获得document对象

获得<head>标签

获得<body>标签

获得指定的Store

获得视窗的高宽

获得对象的类型

获得对象的类的名称

获得对象的DOM元素

加载Ext.app.Application并初始化

对象组合

对象成员复制

创建类

创建类（使用别名）

定义对象

定义命名空间

绑定事件

解绑事件

延迟加载函数

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

转为数组

释放对象

释放对象指定的成员

遍历成员

遍历成员

排除指定组件

输出日志

获得当前时间戳

ExtJS准备函数

延迟执行

公告

获得`<head>`标签

获得`<body>`标签