第二章 熟悉Extjs API (入门教程)
我们使用第一章的Window例子进行API讲解。
我们要为第一章的Window做以下修改:
1:设置其属性,使得Window有遮蔽效果和使得Window不可拖动。
2:使用方法改变Windows的标题。
3:使用事件达到事件触发时进行操作。
首先我们打开Extjs的API文档(.chm格式的API在网上有下载,Extjs压缩包里面也有API)
API: http://www.extjs.com/deploy/dev/docs/
Extjs API 里面每个组件无非就是属性(包含只读属性)、方法、事件。
我们在API里面找到Ext.Window,如图:
一,接下来我们就开始实现上面的第1点修改(设置其属性,使得Window有遮蔽效果和使得Window不可拖动)。
1:
代码:
modal : true
modal设置为true,Window就会实现遮蔽效果(建议看英文API,毕竟看几个单词就大概知道什么意思,如果看中文API可能要看长长的一段,如果遇到不认识的单词就用翻译软件吧!)。
2:
代码:
draggable : false
draggable设置为false,Window就不可用鼠标拖动了(默认为true,可以拖动)。
二,使用方法改变Window的标题。
代码:
win.setTitle('标题被改变了!');
只要 对象.方法 就可以调用方法。
三,使用事件达到事件触发时进行操作。
我们可以到Ext.Window的Public Events处查看事件,如:
事件侦听的代码:
// 可以使用listeners属性也可以使用on方法
listeners : {
show : function(win){
win.setTitle('win显示的时候改变了Title');
}
}
// or
win.on({
show: function(win){
win.setTitle('win显示的时候改变了Title');
}
});
完整的代码:
Ext.onReady(function(){
var win = new Ext.Window({
title : "Ext.Window",
resizable : false,
width : 350,
height : 300,
html : "Hi, my name is Ext.Window!",
buttonAlign : "center",
buttons : [{text:"setTitle",handler:changeTitle},{text:"close"}]
});
function changeTitle(){
win.setTitle('标题被改变了!');
}
win.on({
show : function(win){
win.setTitle('win显示的时候改变了Title');
}
});
win.show();
});
运行效果图1
运行效果图2
- 大小: 13.7 KB
- 大小: 26.2 KB
- 大小: 61.6 KB
- 大小: 27.6 KB
- 大小: 14 KB
- 大小: 19.7 KB
- 大小: 13.8 KB
分享到:
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
ExtJs4.0入门教程,详细介绍ExtJs4.0。
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
extjsapi,extjs文档,api手岫
Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习
ExtJS4.2入门教程,
ExtJS入门教程(超级详细)
ExtJs 最新 入门教程(适合新手).ppt
适合ExtJs开发人员extjs技术上手以及深入
ExtJs4.0入门教程.ppt
Extjs 中文API文档,有对Extjs相关API的中文说明
ExtJs_API 3.1.1 是 英文版 API 3.3.1 是 Air 的 英文版 API 2.X 是 Air 的 中文 版 API
ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心
ExtJS入门教程(超级详细).pdf
ExtJs API 文档 下载,初学者必备
EXTJS入门教程 组件的介绍与应用 ext核心 Element:Ext的核心 获取多个DOM的节点 响应事件
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
前端ExtjsAPI 前端ExtjsAPI 前端ExtjsAPI