extjs02

데이터베이스 2023-09-06 17:45:42 독서 시간: null

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>

이 방법으로 리스너 속성에 여러 이벤트를 작성할 수 있습니다.

동일한 리스너의 여러 이벤트

<!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\'를 작성하고 이벤트를 버튼.fireEvent(eventName)로 실행합니다.

Ext.js 데이터

Ext.js data_w3cschool

데이터 패키지는 애플리케이션의 모든 데이터를 로드하고 저장하는 데 사용됩니다.

패킷에는 많은 클래스가 있지만 가장 중요한 클래스는 다음과 같습니다.

  1. 모달
  2. 가게
  3. 연기

모델

모달의 기본 클래스는 Ext.data.Model입니다. 이는 애플리케이션의 엔터티를 나타냅니다. 매장 데이터를 뷰에 바인딩합니다. 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와 동일해야 하며 매핑은 저장소를 사용하여 데이터베이스에서 가져온 정적 또는 동적 데이터와 일치해야 합니다.

또는 동적 데이터.

가게

저장소의 기본 클래스는 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 stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js 글꼴

Ext.js 글꼴_w3cschool

설명하다

Extjs는 다양한 글꼴 패키지를 사용할 수 있는 기능을 제공합니다. 글꼴 패키지는 패키지에서 사용할 수 있는 아이콘에 다양한 클래스를 추가하는 데 사용됩니다.

  1. 멋진 글꼴
  2.  글꼴-픽토스

멋진 글꼴

새로운 ExtJS 테마 Triton에는 프레임워크 자체에 멋진 글꼴 모음이 내장되어 있으므로 멋진 글꼴을 위한 명시적인 스타일시트가 필요하지 않습니다.

다음은 Triton 테마에서 Font-Awesome 클래스를 사용하는 예입니다.

Ext.js용 Triton 테마 Font Awesome

Triton 이외의 다른 테마를 사용하는 경우 멋진 글꼴을 위해 스타일시트를 명시적으로 요구하거나 추가해야 합니다.

다음은 Triton 테마 없이 Font-Awesome 클래스를 사용하는 예입니다.

Ext.js Font Awesome 일반 테마(Triton 테마 제외)

글꼴-픽토스

Font-pictos는 EXTJS 프레임워크에 포함되어 있지 않으므로 먼저 이를 요구해야 합니다. sencha 라이센스가 있는 사용자만 Font-pictos를 사용할 수 있습니다.

글꼴 그림을 추가하는 단계

1. Font-pictos 클래스가 필요합니다.

"requires": ["font-pictos"]

2. 이제 pictos 클래스를 다음과 같이 추가합니다.

iconCls: 'pictos pictos-home'

Ext.js 스타일

Ext.js style_w3cschool

애플리케이션 스타일 지정은 구성 요소의 모양과 느낌에 대한 사용자 조정을 의미합니다. 이러한 조정에는 색상, 색상 그라데이션, 글꼴, 여백/패딩 등이 포함될 수 있습니다. Ext JS 6에는 새로운 애플리케이션 스타일이 있습니다.

SCSS 스타일을 사용합니다. SCSS는 CSS 코드를 작성하는 보다 동적인 방법입니다. 이를 통해 스타일시트에 변수를 작성할 수 있습니다. 그러나 브라우저는 SCSS를 이해하지 못하고 CSS만 이해하므로 모든 SCSS 파일은 CSS 제작 준비 코드로 컴파일되어야 합니다.

이것이 SCSS 파일을 전처리기 파일이라고 부르는 이유입니다. Extjs에서는 Sencha CMD 도구를 통해 컴파일이 수행됩니다.

Sencha CMD는 다음 명령을 사용하여 이를 수동으로 컴파일합니다:

sencha 애플리케이션 빌드 [개발]

Global CSS는 ExtJS와 관련된 모든 SCSS 변수를 포함하는 기본 CSS 파일입니다. 이를 애플리케이션에서 사용하여 테마를 사용자 정의하고 필요에 따라 다른 값을 제공할 수 있습니다.

Ext.js 이미지

Ext.js image_w3cschool

ExtJS의 그리기 패키지를 사용하면 일반적인 그래픽을 그릴 수 있습니다. 모든 브라우저와 모바일 장치에서 작동하는 그래픽에 사용할 수 있습니다.

일련번호 그림
1 원

이 모양은 원을 만드는 데 사용됩니다.
2 직사각형

이 그래픽은 직사각형 모양을 만드는 데 사용됩니다.
삼 호

이 모양은 호를 만드는 데 사용됩니다.
4 타원

이 그래픽은 타원형 모양을 만드는 데 사용됩니다.
5 타원형호

이 그래픽은 타원형 호를 만드는 데 사용됩니다.
6 영상

이 그래픽은 애플리케이션에 이미지를 추가하는 데 사용됩니다.
7 길

이 그래픽은 자유 경로를 만드는 데 사용됩니다.
8 텍스트

이 그래픽은 응용 프로그램에 텍스트를 추가하는 데 사용됩니다.
9 렌더링 후 번역

이 속성은 그래픽이 렌더링된 후 컨테이너의 시작점을 이동하는 데 사용됩니다. 어떤 그래픽에도 사용할 수 있습니다.
10 회전

이 속성은 추가된 도형에 회전을 추가하는 데 사용됩니다. 어떤 그래픽에도 사용할 수 있습니다.
11 정사각형

이 그래픽은 사각형을 만드는 데 사용됩니다.

Ext.js 접근성(마우스 오버 이벤트)

Ext.js 접근성_w3cschool

접근성이란 무엇입니까?

일반적으로 접근성은 유용성을 의미하고 콘텐츠 접근성은 콘텐츠를 사용할 수 있음을 의미합니다.

소프트웨어 측면에서 애플리케이션 액세스 가능이란 모든 사람이 애플리케이션을 사용할 수 있음을 의미합니다. 여기서 의미하는 것은 장애가 있는 사람, 한때 시각 장애가 있는 사람, 화면 판독기를 사용하는 사람, 컴퓨터를 사용하는 사람, 모든 탐색에 마우스 대신 키보드를 사용하는 것을 선호하는 사람입니다.

액세스 가능한 애플리케이션을 ARIA(Accessible Rich Internet Application)라고 합니다.

Ext JS의 접근성 기능:

Ext JS는 이를 염두에 두고 설계되었으며 모든 키보드 탐색에서 작동해야 합니다. 기본적으로 항상 켜져 있는 탭 인덱싱 및 포커스 기능이 내장되어 있으므로 이 기능을 활성화하기 위해 속성을 추가할 필요가 없습니다.

이 기능을 사용하면 탭이 삽입될 때 모든 키보드 지원 구성 요소가 사용자와 상호 작용할 수 있습니다. 마찬가지로 마우스로 구성요소를 클릭하는 대신 탭 키를 사용하여 다음 구성요소로 이동할 수 있습니다. 마찬가지로 Tab+Shift 키를 사용하여 이전 구성 요소로 이동한 다음 키보드를 입력하여 클릭하는 등의 작업을 수행할 수 있습니다.

포커스 스타일 및 탭:

마우스 클릭 대신 탭 이동을 사용할 때 포커스 스타일이 Extjs에 내장되어 있습니다.

아래 예는 탭을 사용할 때 포커스가 변경될 때 스타일을 변경하는 방법을 보여줍니다.

 

TAB과 상하좌우 키를 이용하거나 마우스를 이용하여 그리드 위의 초점을 이동할 수 있어 시각장애인이 읽기에 편리합니다.

ExtJS에는 테마와 포커스가 내장되어 있어 누구나 쉽게 접근할 수 있습니다.

Ext.js 메소드

Ext.js 메소드_w3cschool

Android OS에서 true 값을 반환하는 데 사용되며, 그렇지 않으면 false를 반환합니다.

다음은 Ext JS에서 주로 사용되는 몇 가지 내장 함수입니다.

 

추천

출처blog.csdn.net/qq_50319351/article/details/129640562
추천
행
(MySQL의 마이그레이션 테이블 데이터에서 MSSQL2008R2에) MySQL 용 마이크로 소프트 SQL 서버 마이그레이션 지원 _3
양적 연구 방법 (PUBL0055)
C # 색상 변환
vim 일반 작업
지도에 스트림 내 목록에 추가
[전체 가이드] 비밀번호 없이 OPPO 전화 잠금 해제하는 방법
vim이 정지 모드에서 응답하지 않습니다.
Qt: 윈도우 이벤트 전달 순서
MySQL 内存泄露怎样检查
고급 C 언어 포인터
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com