extjs02

Ext.js 自定义事件和监听器

2022-05-20 17:11 更新

事件是在类发生的时候触发的。 例如,当一个按钮被点击或元素被渲染之前/之后。

写事件的方法:

  1. 内置事件使用侦听器
  2. 附加事件监听
  3. 自定义事件

内置事件使用侦听器

xt JS提供了用于在Ext JS文件中编写事件和自定义事件的侦听器属性。

在Ext JS中编写侦听器

我们将通过在面板中添加listen属性来将监听器添加到上一个程序中,如下所示:

<!DOCTYPE html>
<html><head><link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /><script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.create('Ext.Button', {renderTo: Ext.getElementById('helloWorldPanel'),text: 'My Button',listeners: {click: function() {Ext.MessageBox.alert('Alert box', 'Button is clicked');	}}});});</script> </head><body><p> Please click the button to see event listener </p><div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- ></body>
</html>

这样我们可以在listeners属性中写多个事件。

同一个侦听器中的多个事件

<!DOCTYPE html>
<html><head><link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /><script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.get('tag2').hide()Ext.create('Ext.Button', {renderTo: Ext.getElementById('helloWorldPanel'),text: 'My Button',listeners: {click: function() {this.hide();},hide: function() {Ext.get('tag1').hide();Ext.get('tag2').show();}}});});           </script> </head><body><div id = "tag1">Please click the button to see event listener.</div><div id = "tag2">The button was clicked and now it is hidden.</div><div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- ></body>
</html>

 

 

 

附加事件监听

在前面的写事件的方法中,我们在创建元素时在侦听器中写入事件。

也可以在之后的代码中使用附加事件监听的方式:

<!DOCTYPE html>
<html><head><link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /><script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){var button = Ext.create('Ext.Button', {renderTo: Ext.getElementById('helloWorldPanel'),text: 'My Button'});// This way we can attach event to the button after the button is created.button.on('click', function() {Ext.MessageBox.alert('Alert box', 'Button is clicked');});});</script> </head><body><p> Please click the button to see event listener </p><div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- ></body>
</html>

 

自定义事件

我们可以在ext JS中编写自定义事件,并使用fireEvent方法触发事件,下面的示例解释了如何编写自定义事件。

<!DOCTYPE html>
<html><head><link href="./ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /><script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){var button = Ext.create('Ext.Button', {renderTo: Ext.getElementById('helloWorldPanel'),text: 'My Button',listeners: {myEvent: function(button) {Ext.MessageBox.alert('Alert box', 'My custom event is called');}}});Ext.defer(function() {button.fireEvent('myEvent');}, 5000);}); </script> </head><body><p> The event will be called after 5 seconds when the page is loaded. </p><div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- ></body>
</html>

 

 

一旦页面被加载并且文档准备就绪,UI页面与按钮将出现,并且我们在5秒后触发事件文档准备就绪,警报框将在5秒后出现。

这里我们写了自定义事件\'myEvent\',我们将事件触发为button.fireEvent(eventName)

Ext.js 数据

Ext.js 数据_w3cschool

数据包用于加载和保存应用程序中的所有数据。

数据包有许多类,但最重要的类是:

  1. 模态
  2. 商店
  3. 代理

模型

modal的基类是Ext.data.Model.It表示应用程序中的一个实体。 它将存储数据绑定到视图。 它有后端数据对象到视图dataIndex的映射。 在store的帮助下获取数据。

创建模型

为了创建一个模型,我们需要扩展Ext.data.Model类,我们需要定义字段的名称和映射。

 Ext.define('StudentDataModel', {extend: 'Ext.data.Model',fields: [{name: 'name', mapping : 'name'},{name: 'age', mapping : 'age'},{name: 'marks', mapping : 'marks'}]});

这里的名称应该与我们在视图中声明的dataIndex相同,并且映射应该匹配使用store从数据库获取的静态或动态数据。

或动态数据。

商店

store的基类是Ext.data.Store。 它包含本地缓存的数据,该数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据,代理具有为服务定义的路径以获取后端数据。

存储数据可以从静态或动态两种方式获取。

静态存储

对于静态存储,我们将存储在存储中的所有数据如下:

Ext.create('Ext.data.Store', {model: 'StudentDataModel',data: [{ name : "Asha", age : "16", marks : "90" },{ name : "Vinit", age : "18", marks : "95" },{ name : "Anand", age : "20", marks : "68" },{ name : "Niharika", age : "21", marks : "86" },{ name : "Manali", age : "22", marks : "57" }];});

动态存储

可以使用代理获取动态数据。 我们可以让代理可以从Ajax,Rest和Json获取数据。

代理

代理的基类是Ext.data.proxy.Proxy。 代理由模型和商店用于处理模型数据的加载和保存。

有两种类型的代理:

  1. 客户端代理
  2. 服务器代理

客户端代理

客户端代理包括使用HTML5本地存储的内存和本地存储。

服务器代理

服务器代理使用Ajax,Json数据和Rest服务处理来自远程服务器的数据。

定义服务器中的代理:

Ext.create('Ext.data.Store', {model: 'StudentDataModel',proxy : {type : 'rest',actionMethods : {read : 'POST'  // Get or Post type based on requirement},url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data from database or Json file path where the data is storedreader: {type : 'json',  // the type of data which is fetched is of JSON typeroot : 'data'},}
});

Ext.js 字体

Ext.js 字体_w3cschool

描述

Extjs提供了使用不同字体包的功能。 字体包用于为包中可用的图标添加不同的类。

  1. Font-Awesome
  2.  Font-Pictos

Font-Awesome

ExtJS的新主题Triton有内置的字体家族字体awesome包含在框架本身,所以我们不需要任何明确的要求的字体真棒样式表。

下面是在Triton主题中使用Font-Awesome类的示例。

Ext.js字体 Awesome的Triton主题

当我们使用除了Triton之外的任何其他主题时,我们需要明确地要求或添加样式表以用于font-awesome。

下面是使用没有Triton主题的Font-Awesome类的示例。

Ext.js字体 Awesome正常主题(除了Triton主题)

Font-Pictos

Font-pictos不包括在EXTJS的框架中,所以我们必须首先要求它,只有sencha的许可用户才能使用font-pictos。

添加字体pictos的步骤

1.需要font-pictos类:

"requires": ["font-pictos"]

2.现在将pictos类添加为:

iconCls: 'pictos pictos-home'

Ext.js 风格

Ext.js 风格_w3cschool

应用程序样式是指用户调整组件的外观和感觉。 这些调整可能包括:颜色,颜色渐变,字体,边距/填充等。Ext JS 6有一种新的应用程序样式。

它使用SCSS的样式。 SCSS是编写CSS代码的更动态的方式。 我们可以在这个帮助下在我们的样式表中写入变量。 但是浏览器不能理解SCSS,它只能理解CSS,所以所有的SCSS文件应该被编译成CSS生产就绪代码。

这就是为什么SCSS文件被称为预处理器文件。 在Extjs中,编译通过Sencha CMD工具完成。

Sencha CMD手动编译它一次使用命令如下:

sencha应用程序构建[开发]

全局CSS是主要的CSS文件,它具有所有的SCSS变量与ExtJS相关联,我们可以在我们的应用程序中使用它来定制我们的主题,根据我们的需要提供不同的价值。

Ext.js 图像

Ext.js 图像_w3cschool

ExtJS中的绘图包使您能绘制通用图形。 这可以用于在所有浏览器和移动设备上工作的图形。

编号绘图
1Circle

此图形用于创建圆形。

2Rectangle

此图形用于创建矩形形状。

3Arc

此图形用于创建弧形。

4Ellipse

此图形用于创建椭圆形状。

5EllipticalArc

此图形用于创建椭圆弧形。

6Image

此图形用于向应用程序添加图像。

7Path

此图形用于创建自由路径。

8Text

此图形用于向应用程序添加任何文本。

9Translate after render

此属性用于在呈现图形后在容器中移动起点。 它可以与任何图形一起使用。

10Rotation

此属性用于向添加的图形添加旋转。 它可以与任何图形一起使用。

11Square

此图形用于创建正方形。

Ext.js 可访问性(鼠标经过事件)

Ext.js 可访问性_w3cschool

什么是可访问性?

一般来说,可访问性意味着可用性,内容可访问意味着内容可用。

在软件术语中,应用程序可访问意味着应用程序可用于所有人。 这里所指的是残疾人,视障者一次或使用屏幕阅读器的人,使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。

可访问的应用程序称为ARIA(可访问富互联网应用程序)。

Ext JS中的辅助功能:

Ext JS旨在牢记这一点,它应该与所有键盘导航工作。它已内置标签索引和聚焦能力,它始终是默认开启,所以我们不需要添加任何属性来启用此功能。

此功能允许所有键盘启用的组件在标签页插入时与用户交互。 像我们可以使用tab键移动到下一个组件,而不是鼠标点击该组件。 同样,我们可以tab+shift键移动到上一个组件,然后输入键盘进行点击等。

焦点样式和选项卡:

当使用tab按键切换替代鼠标点击时,聚焦样式将内置在Extjs中。

下面的示例显示了当焦点随着tab的使用而改变时如何改变样式。

 

您可以使用TAB和上下左右键或者使用鼠标在网格上移动焦点,方便视障人士进行阅读。

这是ExtJS内置主题和聚焦的方式,可以让任何人都可以轻松访问

Ext.js 方法

Ext.js 方法_w3cschool

它用于在Android OS中返回true值;否则返回false。

下面是几个内置函数,主要在 Ext JS 中使用:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/252758.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Extjs6 --- 学习笔记(1)创建一个新项目

原公司使用的前端框架是Extjs&#xff0c;于是系统学习了Extjs的4和6。旧东家的项目主要为后台管理系统&#xff0c;因此对前端界面UI的要求并不高&#xff0c;侧重于数据的展示与处理 &#xff0c;刚开始使用的是Extjs4&#xff0c;后升级成6。现在&#xff0c;把自己的学习过…

Extjs6 学习(一)

一 学习前的了解: 1.Extjs6其实是结合了两个框架:Extjs 和Sencha Touch; 2.Extjs6有两个工具包: classic (存放原来Extjs的可视化组件)和 modern (存放原来Sencha Touch的可视化组件); 3.你需要安装一个叫Sencha Cmd的工具, 这会让你的Extjs应用开发变得简单; 二 安装 1.下…

我的第一篇博客---ExtJs6安装

我的第一篇博客—ExtJs6安装 1、下载extjs6 GPL版和sencha cmd。 下载地址&#xff1a;http://pan.baidu.com/s/1qYGk2T2&#xff08;百度云盘里面就有这两个&#xff09; 官方下载地址&#xff1a; extjs6 GPL版&#xff1a;https://www.sencha.com/legal/gpl/ sencha cm…

ExtJs6 响应式布局

ExtJs6实现布局响应式 目前我想实现两个效果 1.屏幕分辨率低的时候&#xff0c;红色部分移到下面(north->south) 2.行列布局&#xff0c;分辨率大的时候显示一行4个&#xff0c;中等的时候显示一行3个&#xff0c;小的时候显示一行2个 效果如图所示 代码如下 var center…

用GoldWave剪辑编辑视频中的音频文件

现在无论是学生还是上班族&#xff0c;都会上一些网课学习&#xff0c;学生上网课加强巩固自己要考试的知识。上班上网课拓宽自己的知识面&#xff0c;增强专业技能。小编最近也报了一个网课&#xff0c;学习英语口语。 在上网课的时候&#xff0c;通常都会把网课给录下来&…

如何用GoldWave交叉淡化两首音乐?

音频编辑的交叉淡入淡出功能&#xff0c;是音频编辑的基础功能&#xff0c;但如淡出能让音频的开始与结束显得不那么突兀&#xff0c;也能让音频之间的过度更加流畅。 GoldWave中文版正可以让前一段音频淡出&#xff0c;而另一端音频淡入&#xff0c;这样声音既没有中断&#…

关于GoldWave给Vegas视频添加音频叠加的教程分享

有时我们会用Vegas为某段影片配音&#xff0c;我们要怎么把配音和背景声融合在一起呢&#xff1f;想必马上会有人反应过来&#xff1a;让配音和背景声分别置于两条轨道上就好了。这当然是一个相当好的方式。 可是&#xff0c;如果我想要把两段音频合成一个文件&#xff0c;方便…

巧用GoldWave预设,设置音频效果模板!

GoldWave是一款小巧、功能丰富的音频编辑软件。它的功能丰富体现在声音编辑、录制、播放、音频效果设置以及转换各种音频格式和支持丰富的音频格式&#xff0c;主要包括WAV、IFF、MP3、OGG以及DWD等数十种音频格式。除此之外&#xff0c;它还是一款非常友好的音频编辑工具&…

[音视媒体制作]小巧的音频处理工具 GoldWave 进阶教程

( http://vod.sjtu.edu.cn/help/Article_Show.asp?ArticleID1065&ArticlePage1 …… …… http://vod.sjtu.edu.cn/help/Article_Show.asp?ArticleID1065&ArticlePage8 ) &#xff3b; 作者&#xff1a;cl1003 转贴自&#xff1a;winzheng.com &#xff3d; G…

使用GoldWave制作“淡入/淡出”效果

播放音乐时&#xff0c;我们总不太喜欢音乐的突然进入&#xff0c;由远及近的效果较为舒适。可以使用音频编辑软件——GoldWave&#xff0c;对音频文件添加“淡出/淡入”音效。 此篇内容&#xff0c;小编将简单介绍使用GoldWave&#xff0c;如何在音频“开头/结尾”分别加入“…

CSS-盒子模型

前言&#xff1a; 当对一个文档进行布局&#xff08;layout&#xff09;的时候&#xff0c;浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型&#xff08;CSS basic box model&#xff09;&#xff0c;将所有元素表示为一个个矩形的盒子&#xff08;box&#xff09;。CSS 决…

盒子模型

1.常见的块级元素均具有盒子模型的特征&#xff1b; 2. div{border:2px solid red; } 等价于&#xff1a; div{border-width:2px;border-style:solid;border-color:red; } 其中&#xff1a; 1&#xff09;、border-style&#xff08;边框样式&#xff09;常见样式有&#xff…

CSS:盒子模型

盒子模型 盒子模型属性 网页中的所有元素都可以看成一个个的盒子&#xff0c;盒子模型由以下四部分组成&#xff1a;外边距、边框、内边距、内容 CSS就是控制盒子的尺寸、位置等&#xff0c;来实现网页的布局 <style type"text/css"> .box{margin: 15px;bo…

CC攻击常见类型集合

什么是CC攻击&#xff1f; CC攻击是攻击者借助代理服务器或者大量肉鸡模拟多个用户不断访问目标网站&#xff0c;生成指向受害主机的合法请求&#xff0c;实现DDoS和伪装攻击。 因需处理大量请求及后台数据库查询动作&#xff0c;服务器CPU、内存、带宽等资源长时间被占用浪费…

初识弹性盒子

1.介绍 弹性盒子就是当页面需要适应不同的尺寸以及设备类型时确保元素布局恰当的布局方式&#xff0c;未来还有网格布局但目前兼容性不好 display:grid 2.移动端的补充 再次强调 在移动端所有有尺寸的地方推荐单位 rem meta不能忘记写 calc&#xff08;&#xff09; 比如定义75…

烧写linux系统到盒子,在Linux命令行中将礼品包装在盒子中

春节&#xff0c;圣诞&#xff0c;元旦&#xff0c;每个节日&#xff0c;每个Linux终端用户都应该得到一份小礼物。不管你是庆祝春节&#xff0c;还是另一个节日。我收集到的几个Linux命令行工具&#xff0c;供您欣赏并与朋友共享。让我们一起来找点乐子&#xff0c;给这个寒冷…

CSS盒子

CSS盒子 盒子介绍 盒子必须是块元素 使用前需要添加 * {margin: 0;padding: 0;box-sizing: border-box; }让盒子根合理 盒子主要包括:盒子宽高,盒子边框,盒子内边距 ,盒子外边距,盒子阴影, 盒子圆角 先来看一个案例 <!DOCTYPE html> <html lang"en"&…

flex弹性盒子布局

flex是flexible box 的缩写&#xff0c;即为“弹性布局”&#xff0c;用来为盒子模型提供最大的灵活性&#xff0c;任何容器都可以指定为flex布局&#xff1b; flex容器&#xff1a;采用 flex 布局的元素&#xff0c;即容器&#xff1b; flex项目&#xff1a;采用 flex 布局的…

Wireshark网络抓包工具(cap文件查看器) v2.6.2 绿色便携版

Wireshark 是一款免费开源的网络嗅探抓包工具&#xff0c;网络封包分析软件的功能是撷取网络封包&#xff0c;并尽可能显示出最为详细的网络封包资料。Wireshark 网络抓包工具使用WinPCAP作为接口&#xff0c;直接与网卡进行数据报文交换&#xff0c;可以实时检测网络通讯数据&…

一款二进制文件查看器

由于使用的是Notepad 64位版本&#xff0c;在网上找了很多二进制查看插件HexEditor.dll要么是32位不兼容&#xff0c;要么是出现除零的错误&#xff08;以前找到过一次支持Notepad 64位版本的HexEditor.dll&#xff0c;这次死活找不到啦&#xff09;。 本人仅仅是看看二进制文件…