ExtJs6.0添加事件

来源:http://www.cnblogs.com/lbyjj/archive/2017/11/28/7910099.html
-Advertisement-
Play Games

老早就想有自己的博客,雖說作為一個It入門的新人,寫的博客沒太大技術含量,多數是從網上找資料,查度娘。僅此作為一個自己的學習筆記用 解決:Ext自定義事件 在學習一個PDF的文檔中找到一個Extjs的自定義事件練習,跟著文檔代碼走的時候,怎麼也實現不了功能,先貼上PDF書中的代碼 然後就一直報錯 具 ...


老早就想有自己的博客,雖說作為一個It入門的新人,寫的博客沒太大技術含量,多數是從網上找資料,查度娘。僅此作為一個自己的學習筆記用

解決:Ext自定義事件

在學習一個PDF的文檔中找到一個Extjs的自定義事件練習,跟著文檔代碼走的時候,怎麼也實現不了功能,先貼上PDF書中的代碼

 1   <script>
 2         Ext.onReady(function () {
 3             //創建一個類
 4             var Person = Ext.extend(Ext.util.Observable, {
 5                 constructor: function (name) {
 6                     this.name = name;
 7                     this.sayNum = 0;
 8                     this.say = function () {
 9                         if (this.sayNum < 2) {
10                             this.sayNum += 1;
11                             alert("我是" + this.name + "這是點擊第" + this.sayNum);
12                         }
13                         else {
14                             this.sayNum = 0;//觸發自定義事件後sayNum歸為0
15                             this.fireEvent('onSay', this);//激發自定義事件
16                         }
17                     }
18                     this.addEvents({
19                         //加入自定義事件
20                         "onSay":true
21                     });
22                 }
23             });
24             var per = new Person("晶晶");//創建對象
25             //為自定義事件綁定處理函數
26             per.addListener('onSay', function handler() {
27                 alert("發生了自定義事件");
28             });
29         });
30     </script>

----body下的html元素
    <input type="button" value="ssss" onclick="per.say()" />

然後就一直報錯

 

具體報錯原因不知道,事後發現,

per.addListener('onSay', function handler() {
alert("發生了自定義事件");
});

這行代碼中的addListener添加事件方法在ExtJs6.0的API中不存在,找到百度後從新做了個練習

 1 <script>
 2         Ext.onReady(function () {
 3             var Person = Ext.extend(Ext.util.Observable, {
 4                 constructor: function (config) {
 5                     this.name = config.name;
 6                     this.sayNum = config.sayNum;
 7                     this.listeners = config.listeners;
 8                     Person.superclass.constructor.call(this, config);
 9                     this.say = function () {
10                         if (config.sayNum < 2) {
11                             config.sayNum += 1;
12                             alert("哈哈哈哈我是" + config.name + "這是第" + config.sayNum + "次");
13                         }
14                         else {
15                             config.sayNum = 0;
16                             this.fireEvent('onSay', this);
17                         }
18                     }
19                 }
20             });
21             var per = new Person({
22                 name: '晶晶',
23                 sayNum: 0,
24                 listeners: {
25                     "onSay": function () {
26                         alert("自定義事件能不能成?");
27                     }
28                 }
29             });
30             Ext.get('fireBtn').on('click', function () {
31                 per.say();
32             }); 
});
54 </script>

          <body>
          <input type="button" value="say" id="fireBtn"/>

          </body>

 

實現就是這樣實現的,但是說不出所以然,繼續去搞ExtJs了

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作者: 以前在寫項目過程一直都沒有使用過Javascript的setter與getter方法,所以對其是一種要懂不懂的概念;今天看書看到這個知識點,還是模模糊糊的,於是就打算研究研究; Javascript對象的屬性是由名字,值和一組特性構成的。那麼首先,來瞭解一下對象的兩種屬性: + 數據屬性,我 ...
  • 簡介 Vue.use( plugin ):安裝 Vue.js 插件。如果插件是一個對象,必須提供 install 方法。如果插件是一個函數,它會被作為 install 方法。install 方法將被作為 Vue 的參數調用。 當 install 方法被同一個插件多次調用,插件將只會被安裝一次。 Vu ...
  • 項目的GitHub地址:https://github.com/hellobajie/vue-cli-multipage 該腳手架同時支持vux,scss,less 目錄結構 修改配置文件 構建多頁面應用的關鍵在於向配置對象的plugins子項添加多個HtmlWebpackPlugin。 怎樣根據頁面 ...
  • 如上,想要實現左右持續運動,則把該動畫封裝為一個函數,再反覆調用就好。 ...
  • 前言 參考的 "釘釘調試頁面" 實現,僅供學習! 功能為: __PC端編寫代碼,手機端執行__ 解決的痛點是: __避免了調試 應用時重覆寫各種測試頁面__ 源碼與示例 __源碼__ "https://github.com/dailc/node server examples/tree/master ...
  • DOM“天生就慢”,所以前端各大框架都提供了對DOM操作進行優化的辦法,Angular中的是臟值檢查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual Dom,與React類似。 本文將對於Vue 2.5.3版本中使用的Virtual Dom進行分析。 updataCh ...
  • 由於工作需要相容ie7 但是經常需要用到css3的一些效果 為了省時省力 發現了這款比較實用的插件,分享給大家 希望有點幫助。 項目在git上 git地址:https://github.com/gucong3000/CSS3.js ...
  • 一般來說,給表格加邊框都會出現不同的問題,以下是給表格加邊框後展現比較好的方式 但是根據不同的需要有時候我們需要不同的樣式,在這裡我就影響表格邊框的因素,做一些總結和分析 一、 <table border="1"> 表格邊框 如圖:,也就是border=1,意思就是給表格的每一格,及邊框加上1像素的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...