二章 Ext 框架基础及核心 (1)
一 类库简介
src 文件夹下
1 底层API (core文件夹下)
2 控件
3 实用工具 Utiles
二 core 案例
使用 core 下的 Examplesr 的Index.html,此例引用了Sample下定义的 Person.js
1. 创建对象及使用
代码:
学习的第一章我们使用了<script type="text/javascript" src="js/ext-all.js"></script> 在页面加载时
将Ext的包全部下载使用了,这样将会导致一个简单页面加载了许多不需要的资源,所以Ext4加入了动态加载的概念。
其余的属性赋值与方法调用,比较简单,就不详述了。
Ext.require函数可支持数组的参数,传入多个要加载的类。用起来十分方便,当然背后隐藏了相当多的细节。
Ext JS 4的动态加载这种方式不需要服务端的安装什么,纯客户端的。
值得一提的是,它能自动计算依赖关系,下载所需的类。
2 案例:动态加载一个窗口
Html:
Dload2.js:
一 类库简介
src 文件夹下
1 底层API (core文件夹下)
2 控件
3 实用工具 Utiles
二 core 案例
使用 core 下的 Examplesr 的Index.html,此例引用了Sample下定义的 Person.js
1. 创建对象及使用
代码:
Ext.require('Sample.Person', function() {
var aaron = new Sample.Person({
name: 'Aaron Conran',
gender: 'male',
isCool: true
});
alert(aaron.getName()); // 'Aaron Conran'
alert(aaron.getGender()); // 'male'
alert(aaron.getIsCool()); // true
aaron.eat("Salad"); // alerts "I'm eating: Salad"
aaron.setGender('weird');
alert(aaron.getGender()); // 'unknown'
});
学习的第一章我们使用了<script type="text/javascript" src="js/ext-all.js"></script> 在页面加载时
将Ext的包全部下载使用了,这样将会导致一个简单页面加载了许多不需要的资源,所以Ext4加入了动态加载的概念。
Ext.require('Sample.Person', function() { }
其余的属性赋值与方法调用,比较简单,就不详述了。
Ext.require函数可支持数组的参数,传入多个要加载的类。用起来十分方便,当然背后隐藏了相当多的细节。
Ext JS 4的动态加载这种方式不需要服务端的安装什么,纯客户端的。
值得一提的是,它能自动计算依赖关系,下载所需的类。
2 案例:动态加载一个窗口
Html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试动态加载</title>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/bootstrap.js"></script> //这里可以不是 Ext-all.js了
<script type="text/javascript" src="Dload2.js" ></script>
<script type="text/javascript" src="js/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<input type="button" id="btn_show" value="加载窗口"/>
</body>
</html>
Dload2.js:
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]); //引入需要的类库
Ext.onReady(function(){
var win,
button = Ext.get('btn_show'); //关联 Id 为 btn_show 的button对象
//定义 button的onclick事件
button.on('click', function(){
if (!win) {
win = Ext.create('widget.window', {
title: '动态加载窗口',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350,
layout: 'border',
bodyStyle: 'padding: 5px;',
items: [{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
html: '第 1 个'
}, {
title: 'Tab 2',
html: '第 2 个'
}, {
title: 'Tab 3',
html: '第 3 个',
closable: true
}]//Tab Panel Items
}]//Window itmes
});
}
button.dom.disabled = true;
//切换窗口的显示状态
if (win.isVisible()) {
win.hide(this, function() {
button.dom.disabled = false;
});
} else {
win.show(this, function() {
button.dom.disabled = false;
});
}
});
});