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

2022-05-20 17:11 更新

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

写事件的方法:

内置事件使用侦听器
附加事件监听
自定义事件

内置事件使用侦听器

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

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

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

模态
商店
代理

模型

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。代理由模型和商店用于处理模型数据的加载和保存。

有两种类型的代理:

客户端代理
服务器代理

客户端代理

客户端代理包括使用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 stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js 字体

Ext.js 字体_w3cschool

描述

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

Font-Awesome
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中的绘图包使您能绘制通用图形。这可以用于在所有浏览器和移动设备上工作的图形。

编号	绘图
1	Circle 此图形用于创建圆形。
2	Rectangle 此图形用于创建矩形形状。
3	Arc 此图形用于创建弧形。
4	Ellipse 此图形用于创建椭圆形状。
5	EllipticalArc 此图形用于创建椭圆弧形。
6	Image 此图形用于向应用程序添加图像。
7	Path 此图形用于创建自由路径。
8	Text 此图形用于向应用程序添加任何文本。
9	Translate after render 此属性用于在呈现图形后在容器中移动起点。它可以与任何图形一起使用。
10	Rotation 此属性用于向添加的图形添加旋转。它可以与任何图形一起使用。
11	Square 此图形用于创建正方形。

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 中使用:

extjs02