이 글은 Ext JS 버전 4.2.1을 기준으로 작성되었습니다.
UI 컴포넌트의 기본
ExtJS를 배우는 것은 컴포넌트의 사용법을 배우는 것입니다. ExtJS4는 프레임워크를 재구성하는데, 그 중 가장 중요한 것은 명확한 구조와 계층 구조를 갖춘 구성 요소 시스템을 형성하는 것입니다.
ExtJs4의 구성 요소 시스템에는 약 100개의 구성 요소가 있으며 이러한 구성 요소는 대략 컨테이너 구성 요소, 도구 모음 및 메뉴 표시줄 구성 요소, 양식 및 요소 구성 요소, 기타 구성 요소라는 네 가지 주요 범주로 나눌 수 있습니다.
테마
ExtJs4는 Sass와 Compass 기술을 사용하여 표준 테마 템플릿을 제공하는 새로운 테마 시스템을 도입했습니다. 테마 템플릿의 간단한 사용자 정의를 통해 다양하고 다채로운 테마를 만들 수 있습니다.
Sass 및 Compass 개요
Sass
Sass 스타일 시트 언어는 CSS의 확장으로, CSS 상속 및 기타 항목에 대한 변수, 인라인 규칙, 믹스인 및 선택기를 제공합니다. 최신 Sass3에서는 CSS3와 100% 호환되며 구문 파일도 SCSS(Sassy CSS)로 업그레이드되었습니다. 이 호환성으로 인해 학습 비용이 절감되고 개발자가 원활하게 작업할 수 있습니다. CSS에서 Sass 개발로 전환합니다.
Sass 스타일 시트 언어는 CSS 계단식 스타일 시트를 위한 프로그래밍 기능을 제공합니다. 이제 Sass에서 변수를 정의하여 다양한 스타일로 참조하고 계산할 수 있으며, 다양한 위치에서 재사용할 수 있는 믹스인을 정의할 수 있습니다. . 컴파일 후에 Sass는 다른 브라우저에서 사용할 수 있는 표준 CSS 파일을 출력합니다.
Sass 기능:
믹스인 - 클래스 내의 클래스
매개변수 믹스인 - 함수와 마찬가지로 매개변수를 전달할 수 있는 클래스
중첩 규칙 - 클래스 내의 중첩 클래스 , 이를 통해 반복되는 코드를 줄입니다.
색상 기능 - 색상을 편집할 수 있습니다.
스타일을 로컬에서 수정합니다. 🎜> JavaScript 할당 - JavaScript 표현식을 사용하여 CSS에 값을 할당합니다.
Sass에 대한 자세한 소개와 설명은 http://sass-lang.com/에서 확인할 수 있습니다.
Compass
Compass는 CSS 생성을 위한 Ruby 기반 오픈 소스 프레임워크입니다. Compass는 매우 쉽고 효율적으로 스타일 시트를 구성할 수 있는 Sass 스타일 시트 언어를 사용합니다. 동시에 Compass는 개발자가 사용할 수 있도록 웹 개발에 뛰어난 재사용 가능한 패턴을 많이 내장하고 있습니다. Compass의 역할을 설명하기 위해 아래에 간단한 방정식이 사용됩니다.
Compass = Sass 스타일 시트 언어에서 재사용 가능한 다수의 우수한 CSS 패턴
Compass에 대한 자세한 소개와 설명은 http:/에서 확인할 수 있습니다. /compass-style.org/
준비 작업(실행 환경 설치)
Ruby 설치
SASS와 Compass를 사용하려면 Ruby 설치 패키지를 http://rubyinstaller.org/에서 다운로드할 수 있습니다. 다운로드한 파일은 "rubyinstaller-1.9.3-p429.exe"입니다.
(참고로 최신 버전의 Ruby 2.0.0-p195를 다운로드하지 마세요. 그렇지 않으면 후속 개발 시 버전 문제로 인해 오류가 발생합니다. Ruby 1.9.3-p429가 됩니다.)
더블클릭하여 실행하세요. , 단계는 다음과 같습니다.
설치 디렉터리에서 3가지 옵션을 모두 선택하세요.
완료를 클릭하세요.
이제 Ruby 설치가 완료되었습니다.
시작 메뉴의 Ruby 프로그램 그룹에서 "Ruby로 명령 프롬프트 시작"을 클릭하세요.
Ruby의 명령줄 인터페이스로 들어갑니다.
ruby –v
를 입력하고 Enter를 누르세요. 인터페이스 프롬프트는 다음과 같습니다.
는 Ruby 운영 환경이 성공적으로 설치되었음을 나타냅니다.
Compass 및 Sass 설치
Compass를 사용하려면 먼저 Ruby에 프레임워크를 설치해야 합니다.
시작 메뉴의 Ruby 프로그램 그룹에서 "Ruby로 명령 프롬프트 시작"을 클릭하면 명령 프롬프트 창이 표시됩니다. Compass 설치를 시작하려면 명령줄에 다음 명령을 입력하십시오:
gem install compass
(이 명령을 사용하면 Compass 관련 문서를 로컬 폴더에 원격으로 자동 설치할 수 있습니다. 원격 설치 방식으로 인해 설치 시간이 오래 걸리므로, 기다려주세요.)
아래와 같은 창에 정보가 표시되면 Compass가 성공적으로 설치되었음을 의미합니다.
사진에서 보시다시피 sass-3.2.9 버전과 compass-0.12.2 버전이 설치되어 있습니다.
명령줄에서 compass -v 및 sass -v를 실행하면 각각 현재 시스템에 설치된 버전 정보를 볼 수 있습니다.
이제 Sass와 Compass 설치가 완료되었습니다.
Compass 프로젝트(Css로 컴파일된 Sass)
1. 프로젝트 초기화
다음으로 이름이 myproject라고 가정하고 명령줄에 다음을 입력합니다.
compass create myproject
현재 디렉토리에 myproject 하위 디렉토리가 생성됩니다.
디렉토리를 입력하세요:
cd myproject
내부에 프로젝트의 구성 파일인 config.rb 파일이 있는 것을 볼 수 있습니다. 또한 sass와 스타일시트라는 두 개의 하위 디렉터리가 있습니다. 전자는 Sass 소스 파일을 저장하고 후자는 컴파일된 CSS 파일을 저장합니다.
다음으로 코드 작성을 시작해 보세요.
2. 컴파일
코드를 작성하기 전에 컴파일 방법도 알아야 합니다. 우리가 작성하는 내용은 접미사가 scss인 파일이기 때문에 css 파일로 컴파일해야만 프로젝트에서 사용할 수 있습니다.
Compass의 컴파일 명령어는
compass compile
입니다. 이 명령어는 프로젝트 루트 디렉터리에서 실행되며, sass 하위 디렉터리에 있는 scss 파일을 css 파일로 컴파일하여 stylesheets 하위 디렉터리에 저장합니다.
기본적으로 컴파일된 CSS 파일에는 많은 수의 댓글이 포함되어 있습니다. 그러나 프로덕션 환경에는 압축된 CSS 파일이 필요하며, 이 경우 --output-style 매개변수를 사용해야 합니다.
compass compile --output-style 압축
Compass는 변경된 파일만 컴파일합니다. 변경되지 않은 파일을 다시 컴파일하려면 --force 매개변수를 사용해야 합니다.
compass compile --force
명령줄 매개변수를 사용하는 것 외에도 구성 파일 config.rb에서 컴파일 모드를 지정할 수도 있습니다.
output_style = :expanded
:확장 모드는 컴파일 후에도 원래 형식이 유지됨을 의미합니다. 다른 값으로는:nested, :compact 및 :compressed가 있습니다.
설명:
* 중첩: 들여쓰기된 CSS 코드가 중첩되어 있으며 기본값입니다.
* 확장됨: 들여쓰기되지 않은 확장된 CSS 코드입니다.
* 컴팩트: 간결한 형식의 CSS 코드입니다.
* 압축: 압축된 CSS 코드.
제작 단계에 들어간 후에는 압축 모드로 변경해야 합니다.
output_style = :compressed
환경 값(:production 또는:development)을 지정하여 컴파일 모드를 지능적으로 결정할 수도 있습니다.
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
명령줄 모드에서는 일회성 컴파일 명령 외에도 compass에 자동 컴파일 기능이 있습니다. 명령
compass watch
이 명령을 실행한 후 scss 파일이 변경될 때마다 자동으로 CSS 파일로 컴파일됩니다.
나침반 명령줄 사용법에 대한 자세한 내용은 공식 문서를 참조하세요.
Compass, Sass, eclipse 통합
위 구성을 통해 Sass 파일을 텍스트 컴파일러 등을 통해 편집한 후 해당 디렉터리 구조를 통해 Ruby를 통해 Sass를 CSS로 컴파일한 후 복사하여 붙여넣을 수 있습니다. 개발은 우리 프로젝트 내에서 수행됩니다. 이 과정이 상대적으로 번거롭다는 것을 알 수 있습니다. 그렇다면 Eclipse에서 Sass 파일을 직접 편집하고 엔지니어링 응용을 위해 CSS로 자동 컴파일하려면 어떻게 해야 할까요? 다음은 Compass, Sass 및 Eclipse의 통합에 대한 연구입니다.
1 Ant가 설치되었는지 확인
2 프로젝트의 "속성"을 열고 "Builders"를 선택한 다음 "New..." 버튼을 클릭합니다.
3 "Ant Builder"를 선택하고 클릭합니다. "OK"
4 이름 "compass.compile"을 입력하고 "Main" 탭 페이지에서 "Browse Workspace"를 클릭하여 프로젝트에 배치된 build.xml 파일을 선택합니다.
5 "Targets" 탭을 선택하고 Auto-Build에서 "Set Targets" 버튼을 클릭한 다음 Compass를 사용하려면 "compass.compile"을 선택하고("sass.compile은 Sass만 사용함) "OK"를 클릭합니다.
6 "빌드 옵션" 탭을 선택하고 "리소스 선택" 버튼을 클릭한 후 Sass 파일 디렉터리를 선택하고 "마침"을 클릭한 다음 "확인"을 클릭합니다.
이제 Sass 파일을 편집하면 CSS 파일이 자동으로 생성되거나 업데이트됩니다.
Sencha CMD 설치
Sencha CMD는 ExtJ 및 Sencha Touch 애플리케이션을 패키징하고 배포하기 위한 명령줄 도구입니다. ExtJs4.2 테마를 개발하려면 Sencha CMD3.1 이상을 설치해야 합니다.
7 Java Run-time Environment 또는 JRE 설치, 버전 필요>=6.0.
8 스타일을 편집하려면 Compass와 Sass가 필요하므로 Ruby를 설치해야 합니다. 최신 버전의 Ruby2.0.0-p195를 다운로드하지 마십시오. 그렇지 않으면 후속 개발 중 버전 문제로 인해 오류가 발생합니다. Ruby 1.9.3-p429가 가능합니다.
9 Sencha Cmd 설치 패키지를 다운로드하여 설치하세요.
10 Ext JS SDK를 다운로드하고 압축을 풉니다.
ExtJS 커스텀 테마 스타일 개발
2.3.1 작업공간 만들기
(참고로 디렉터리 이름 등에는 중국어를 사용하지 말고, 특수 기호도 사용하지 않는 것이 가장 좋습니다. 그렇지 않으면 오류가 발생합니다) 🎜>시스템 cmd 명령 열기 창을 실행하고 SDK의 압축이 풀린 디렉터리로 이동합니다. my-workspace라는 사용자 정의 테마 패키지가 포함된 작업 공간을 생성하려면
sencha -sdk d:/ExtJs4-App/ext-4.2.1.883 generate Workspace my-workspace
를 입력하세요. 이 명령은 테마와 애플리케이션이 필요한 종속성을 찾을 수 있도록 Ext JS SDK와 패키지를 작업 공간에 연결합니다. 이 명령으로 생성된 테마와 애플리케이션은 작업 공간 디렉토리에서 실행되어야 하므로 작업 디렉토리를 새로운 "my-workspace" 디렉토리로 변경하십시오:
cd my-workspace
"my-workspace"에 있어야 합니다. 폴더 아래에 두 개의 폴더가 표시됩니다.
l "ext": Ext JS SDK 포함
l "package"에는 Ext JS 로케일 및 테마 패키지 포함
2.3.2 테스트용 애플리케이션 테마 생성
맞춤 테마를 만들기 전에 테마를 테스트할 수 있는 방법을 설정해야 합니다. 이를 테스트하는 가장 좋은 방법은 애플리케이션 내에서 사용하는 것입니다. "my-workspace" 디렉토리에서 다음 명령어를 실행하세요:
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
이렇게 하면 Sencha Cmd가 ThemeDemoApp이라는 애플리케이션도 Ext JS SDK와 연결되어 있습니다. "Ext" 디렉토리에 있습니다. 이제 앱을 빌드해 봅시다:
cd theme-demo-app
sencha app build
앱을 실행하는 방법은 두 가지가 있습니다:
11 개발 모드: "theme-demo-app/index.dll"을 엽니다. HTML".
이 리소스(소스 파일)는 압축되지 않아 디버그하기 쉽습니다.
12 제품 모드: 브라우저를 통해 "build/ThemeDemoApp/production/index.html"을 엽니다.
애플리케이션에 더 작은 메모리 공간과 더 나은 성능을 제공하기 위해 리소스(소스 파일)를 압축하는 것입니다.
2.3.3 테마 패키지 및 파일 구조 생성
Sencha Cmd를 사용하면 테마 패키지 및 파일 구조를 자동으로 생성할 수 있습니다. "theme-demo-app" 아래에서 다음 명령을 실행한다:
sencha generate theme my-custom-theme
이는 Sencha Cmd에게 현재 워크스페이스 Bag 아래에 "my-custom-theme"이라는 테마를 생성하도록 지시한다.
내용을 살펴보겠습니다.
l “package.json” – 패키지 속성 파일입니다. 이는 Sencha Cmd에게 이름, 버전, 종속성(다른 패키지에 필요한 구성)과 같은 일부 패키지 정보를 알려줍니다.
l "sass/" - 이 디렉토리에는 테마와 관련된 모든 sass 파일이 포함되어 있습니다. sass 파일은 세 가지 주요 부분으로 나뉩니다.
1) "sass/var/" - sass 변수를 포함합니다.
2) "sass/src/" - 사용할 수 있는 sass 규칙과 UI mixin 호출을 포함합니다. "sass/var/" 아래의 변수;
3) "sass/etc/" - 추가 공용 기능을 포함하거나 "sass/var/" 및 "sass/src/"가 혼합된 파일입니다. 컴포넌트 클래스 경로. 예를 들어, Ext.panel.Panel의 스타일 변수는 "sass/var/panel/Panel.scss"라는 파일에 배치되어야 합니다.
l "resources/" - 테마에 필요한 이미지 및 기타 정적 리소스가 포함되어 있습니다.
l "overrides/" - Ext JS 구성 요소 클래스(구성 요소를 테마로 하는 클래스)를 대체하는 일부 JavaScript가 포함되어 있습니다.
2.3.4 테마 상속 구성
테마 패키지는 일반적으로 매우 중요하고 추가 기능이 포함된 특수 패키지이며, 다른 테마 패키지에서 상속될 수 있습니다. Ext Js 4.2의 새 버전은 테마 패키지의 이 기능을 사용하여 테마 계층 구조를 만듭니다.
각 테마 패키지는 Base 테마에서 확장되어야 합니다. 사용자 정의 테마를 만드는 다음 단계는 확장할 테마를 파악하는 것입니다. 작업공간에서 다음 테마 패키지를 볼 수 있습니다.
l "ext-theme-base"--이 패키지는 다른 테마의 기본 테마이며 상위 테마가 없는 유일한 테마 패키지입니다. Ext JS 컴포넌트와 레이아웃이 올바르게 작동하도록 하기 위해 필요한 CSS 규칙을 설정하기 위한 최소값이 포함되어 있습니다. "ext-theme-base"에 대한 스타일 규칙은 파생 테마에서 구성할 수 없으며 이 테마로 생성된 스타일 규칙을 재정의하는 것은 피해야 합니다.
l "ext-theme-neutral"--대부분의 구성 가능한 스타일 규칙을 포함하여 "ext-theme-base"에서 확장됩니다. 대부분의 변수는 "ext-theme-neutral"에 정의된 Ext JS 구성 요소의 스타일을 구성하는 데 사용됩니다. 이러한 변수는 사용자 정의 테마로 대체될 수 있습니다.
l "ext-theme-classic"--기본 테마입니다. "확장 테마 중립"에서 확장되었습니다.
l "ext-theme-gray"--"ext-theme-classic"에서 확장됨
l "ext-theme-access"--"ext-theme-classic"에서 확장됨.
l "ext-theme-neptune"--"ext-theme-neutral"에서 확장되었습니다.
사용자 정의 테마 확장의 시작 노드로 "ext-theme-neptune" 또는 "ext-theme-classic"을 사용하는 것이 좋습니다. 이러한 테마에는 매력적이고 즉시 사용할 수 있는 테마를 만드는 데 필요한 모든 코드가 포함되어 있기 때문입니다. "ext-theme-neutral"은 매우 추상적인 테마이므로 확장에 직접 사용하면 안 됩니다. "ext-theme-neutral"을 기반으로 사용자 정의 테마를 확장하려면 수백 가지의 가변 범위와 과도한 작업량이 필요하며, 매우 숙련된 테마 개발자만이 이 작업을 수행할 수 있습니다. 반대로 "ext -theme-neptune" 또는 " ext-theme-classic"은 몇 가지 변수만 변경하면 몇 분 안에 실행될 수 있습니다. 또는 사용자 정의 테마를 위한 보다 이상적인 시작점을 제공하는 경우 "ext-theme-gray" 또는 "ext-theme-access"를 재정의할 수 있습니다.
예를 들어 "ext-theme-neptune"으로 확장된 맞춤 테마를 만듭니다. 먼저 "packages/my-custom-theme/package.json":
"extend": "ext-theme-classic"
디렉터리를
"extend": "ext- theme-neptune"
지금 앱을 업데이트해야 합니다. 애플리케이션이 개발 모드에서 실행될 수 있도록 올바른 테마 JavaScript 파일이 애플리케이션 "bootstrap.js"에 포함되어 있는지 확인하십시오. "theme-demo-app" 디렉터리에서 다음 명령을 실행합니다.
sencha app 새로 고침
2.3.5 전역 테마 변수 구성
이제 자신만의 테마 패키지를 만들었으므로 테마 모양 수정을 시작할 수 있습니다. 먼저 ExtJs 컴포넌트의 공개 색상을 파생할 수 있는 기본 색상을 수정합니다. "my-custom-theme/sass/var/"에서 Component.scss라는 파일을 생성하고 파일에 다음을 입력합니다.
$base-color: #317040 !default;
원하는 경우 사용자 정의 테마는 다음과 같습니다. 확장 가능하므로 모든 변수 끝에 !default를 구성해야 합니다. !default가 없으면 Sencha Cmd 변수는 "역방향" 규칙(대부분의 파생 스타일이 먼저, 기본 스타일이 마지막)을 따르기 때문에 파생 테마의 변수를 재정의할 수 없습니다. !default에 대한 자세한 내용은 변수 기본값을 참조하세요.
Ext JS 전역 SASS 변수의 전체 목록은 Global_CSS를 참조하세요.
2.3.6 빌드 패키지
모든 사용자 정의 스타일 규칙에 대한 CSS 파일을 생성하려면 "packages/my-custom-theme/" 디렉토리에서 다음 명령을 실행해야 합니다:
sencha package build
이 A 디렉토리는 package 아래에 구축됩니다."my-custom-theme/build/resources" 아래에 my-custom-theme-all.css라는 파일이 있습니다. 이 파일에는 모든 Ext JS 구성 요소에 대한 스타일 규칙이 포함되어 있습니다. 이 파일을 애플리케이션에서 직접 사용할 수 있지만 "모든" 파일에는 모든 스타일이 포함되어 있지만 Ext JS 구성 요소와 대부분의 애플리케이션은 Ext JS 구성 요소의 하위 집합만 사용하므로 권장되지 않습니다. Sencha Cmd는 애플리케이션을 빌드할 때 사용되지 않는 CSS 스타일 규칙을 필터링할 수 있지만 먼저 사용자 정의 테마를 사용하도록 테스트 애플리케이션을 구성해야 합니다.
2.3.7 하나의 애플리케이션에서 테마 사용
방금 생성한 사용자 정의 테마에 대한 테스트 애플리케이션을 구성합니다. theme-demo-app/.sencha/app/sencha.cfg
app.theme=ext-theme-classic
을 찾아
app.theme=my-custom-theme
으로 변경하세요. 당신은 이미 클래식 테마를 사용하여 빌드된 애플리케이션을 실행한 후 빌드 디렉토리를 정리해야 합니다. theme-demo-app에서 실행:
sencha ant clean
그런 다음 애플리케이션을 빌드합니다:
sencha app build
브라우저에서 "theme-demo-app/index.html"을 열면 다음과 같은 내용이 표시됩니다. 다음
2.3.8 구성 요소 변수 구성
으로 이동합니다. 각 Ext JS 구성 요소에는 모양을 구성하는 데 사용할 수 있는 전역 변수 목록이 있습니다. 다음으로 패널 제목의 글꼴 유형을 변경해 보겠습니다. 다음 코드를 사용하여 "packages/my-custom-theme/sass/var/panel/Panel.scss" 파일을 만듭니다.
$panel-header-font-family: Times New Roman !default;
In " theme- "demo-app"에서 실행:
sencha app build
브라우저에서 "theme-demo-app/index.html"을 열면 각 섹션에 다음
이 표시됩니다. API 문서 "CSS 변수" 섹션에는 구성 요소 SASS 변수의 자세한 목록이 있습니다.
2.3.9 사용자 정의 구성 요소 UI 만들기
ExtJs 프레임워크에서 각 구성 요소에는 구성 인터페이스가 있습니다(기본값은 "기본값"). 이 속성은 단일 구성 요소 인스턴스에서 구성하여 동일한 유형의 다른 구성 요소와 구별하여 다른 모양을 제공할 수 있습니다.
다음 코드를 사용하여 "packages/my-custom-theme/sass/src/panel/Panel.scss" 파일을 생성합니다.
"theme-demo-app"에서 프로그램을 실행하세요:
sencha app build
브라우저에서 "theme-demo-app/index.html"을 열면 다음을 볼 수 있습니다
UI는 여러 모양 구성을 단일 구성 요소로 혼합하는 편리한 방법이지만 과도하게 사용해서는 안 됩니다. UI 믹스인을 호출할 때마다 추가 CSS 규칙이 생성되므로 무료로 UI 믹스인을 호출하면 지나치게 큰 CSS 파일이 생성됩니다.
기억해야 할 또 다른 중요한 점은 UI 믹스인을 호출할 때 매개변수 값이 없는 정렬된 목록이 아니라 명명된 매개변수를 사용하여 믹스인을 호출한다는 것입니다. SASS는 두 가지 형식을 모두 지원하지만 다음 형식을 사용하는 것이 좋습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
