文档章节

ExtJS 4.2 02 ExtJs 基础

fokYaland
 fokYaland
发布于 2015/06/04 17:27
字数 596
阅读 241
收藏 2

动态引用加载

ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。

1.动态引用外部Js

//加载配置可用
Ext.Loader.setConfig({ enabled: true });
//动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
Ext.Loader.setPath('Ext.ux', '../ux/');

2.动态加载类

//加载单个类
Ext.require('Ext.window.Window');
//加载多个
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.PagingScroller'
]);
//加载所有类,除了“Ext.data.*”之外
Ext.exclude('Ext.data.*').require('*');
 

组件的别名

使用别名机制,一是可以解决引入名过长的问题,二是可以使用xtype类型。
Ext.define('Customer.support.SupportMessage', {
extend : 'Ext.panel.Panel',
alias : 'widget.supportMessage',
title : 'Customer Support',
html : 'Customer support is online'
});
Ext.application({
name : 'Customer',
launch : function() {
            Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [{xtype : 'supportMessage'}]
});
}
});

我们可以在类的定义中,加入 alias 关键字,以启动别名机制; 当一个类使用alias进行别名处理之后,我们就可以使用对应的别名进行类的使用了; 使用类的别名时, 必须使用widget.作为别名的前缀 ;使用别名之后,我们就可以使用  xtype:'别名'  来进行类型的引用;

基本数据类型

ExtJs支持数值型、字符串型、日期型、布尔型等基本数据类型,内容比较简单,下面演示基本的声明用法,以及类型转换。

//定义一个日期类型的数据
var date1 = new Date("2011-11-12");
var date = new Date(2011, 11, 12, 12, 1, 12);
//转化为字符串型
alert(date.toLocaleDateString());
//转化为数值型
alert(Number(date));
//布尔型,假
var myFalse = new Boolean(false);
//真
var myBool = new Boolean(true);
//定义数值
var num = new Number(45.6);
alert(num);

 

函数执行时间控制

主要用两个方面,1.让某个函数等待一段时间后自动执行。2.然某个函数按照一定频率反复执行。

1.函数等待执行

实现一个功能,页面加载完毕后,等待3秒后弹出提示。

var func1 = function (name1, name2) {
    Ext.Msg.alert("3秒钟后自动执行", "你好," + name1 + "、" + name2 + "!");
};
Ext.defer(func1, 3000, this, ["张三", "李四"]);

2.函数按照一定频率反复执行

让div1每隔一秒更新一次显示当前时间,10秒又自动停止更新:

//周期执行
var i = 0;
var task = {
    run: function () {
        Ext.fly('div1').update(new Date().toLocaleTimeString());
        if (i > 10) Ext.TaskManager.stop(task);
        i++;
    },
    interval: 1000
}
Ext.TaskManager.start(task);

 

本文转载自:http://blog.csdn.net/yanliang1/article/details/46238021

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
ExtJS 4.2 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

oschina
2013/03/15
10.6K
31
Ext JS 6.0.0 正式版本发布,跨浏览器的 RIA 框架

Ext JS 6.0.0 正式版本发布,此版本包括大量的新特性以及错误修复: 新特性: Accessibility (3) EXTJS-12098 Containers should track their children’s focus EXTJS-13606 Floating mixi...

chpinck
2015/07/06
8.6K
49
ExtJS 4.2.1 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

chpinck
2013/05/30
5.4K
14
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
0
1
Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String

Firefox给出的错误 Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String: articlelist.jsp {"results":"100","rows":[{"id":"1"......

anonymous_007
2014/05/28
2.2K
2

没有更多内容

加载失败,请刷新页面

加载更多

Linux输入法fcitx的安装问题

Fcitx 总共要安装的包如下 fcitxfcitx-binfcitx-config-commonfcitx-config-gtk | fcitx-config-gtk2fcitx-datafcitx-frontend-allfcitx-frontend-gtk2fcitx-frontend-gtk3......

CHONGCHEN
49分钟前
4
0
网络基础

前言: 最近整理一些以前的学习笔记(有部分缺失,会有些乱,日后再补)。 过去都是存储在本地,此次传到网络留待备用。 计算机网络的功能: 1.数据通信; 2.资源共享; 3.增加数据可靠性; 4....

迷失De挣扎
50分钟前
5
0
spring boot升级到spring cloud

1、先升级spring boot 版本到2.1.3 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>2.1.3.RELEAS......

moon888
53分钟前
10
0
从蓝鲸视角谈DevOps

DevOps源于Development和Operations的组合 常见的定义 DevOps是一种重视“软件开发人员(Dev)”和“IT运维技术人员(Ops)”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变...

嘉为科技
56分钟前
1
0
微服务设计 笔记

微服务设计 一、微服务架构理论 1.六边形架构 1)六边形架构(Hexagonal Architecture),又称为端口和适配器架构风格;使用适配器与外界进行交互,外界通过应用层API与内部进行交互。 2)经典...

啃不动地大坚果
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部