Ext JS 6 다운로드 및 설정

Decument http://docs.sencha.com/extjs/6.0.2-classic/guides/getting_started/getting_started.html

Setup & Getting Started

Sencha Cmd 6 다운로드 설치http://www.sencha.com/products/sencha-cmd/Extjs SDK 다운로드 설치http://www.sencha.com/products/extjs/evaluate/

sencha -sdk /path/to/extjs/framework generate app AppName path/to/app
cd /path/to/app
sencha app watch

extjs/framework는 sdk의 압축을 풀기 위한 디렉터리입니다.path/to/app이 생성된 AppName의 디렉터리입니다.http://localhost:1841/방금 생성된 응용 프로그램에 접근하기

좋은 앱 만들기

앱은 세 가지 중요한 부분으로 구성된다. 1.Shared app area(일반적으로 stores, models, and controllers), 루트 디렉터리에 저장된 app 폴더 2.Classic apparea(응용 프로그램의 고전적인 부분views and logic, 즉 구식 브라우저를 호환하여 전통적인 ext js 구성 요소 개발에 적합), 루트 디렉터리에 저장된classic/srchttp://localhost:1841/아니면Modern app area, (서로 다른 장치를 개발하고 브라우저의 응용 프로그램에 적용) 는 modern/srchttp://localhost:1841/?modern

Classic 소개

Classic 보기는 주로 데스크톱과 태블릿 브라우저에 사용되며 전통적인 extjs 구성 요소에 적용됩니다.이것은 MyApp/classic/src/view/main/Main에 있습니다.js. 이것은 우리classic가 응용하는 입구 파일입니다.그것은 tabpanel과 4개의 tab를 포함하고 있다.그리고 첫 번째 탭에grid 패널을 포함합니다.

Tabs

TabPanels는 표준 Panel과 같이 레이아웃에 사용할 수 있지만, 하위 구성 요소에 대한 지원도 있습니다(items).그것의 하위 구성 요소는 카드 레이아웃 관리자를 사용합니다.특정한 탭을 표시하는 데 사용됩니다.Tabs는 기본적으로 하위 항목의 맨 위에 수평으로 배열되어 있지만, 우리의 응용 프로그램에서는 설정을 통해 왼쪽에 배열하고, 이것은 우리의 전통적인tabs와 다르다. 이것은 우리가 사용자 정의 UI를 만들 수 있기 때문이다.

UI Styling

Ext JS 프레임워크에서 모든 구성 요소는 ui 설정 항목의 default 값을 설정합니다. 이 속성은 변경될 수 있습니다. 우리의 응용 프로그램에서 서로 다른 스타일을 허용할 수 있습니다.대부분의 Ext JS 구성 요소는 SASS의 @mixin을 통해 새로운 UI를 신속하게 생성할 수 있습니다.여기에는 Ext.panel이 포함됩니다.Panel, Ext.button.Button, Ext.Toolbar, Ext.window.윈도우 잠깐만.
tabpanel의 사용자 정의 구성 요소를 엽니다.

classic/sass/src/view/main/Main.scss

보시다시피 구성 요소를 만드는 스타일은 매우 간단합니다.관련 구성 요소의 @mixin을 호출하면 UI를 만들 수 있습니다.

@include extjs-tab-panel-ui(
    $ui: 'navigation'
);

이 @mixin에서 모든 변수를 수정할 수 있습니다.다음 코드를 통해 구성 요소에 UI를 추가할 수 있습니다.

ui: 'navigation'

우리는 다음 페이지에서 SASS에 대해 상세하게 토론할 것이다.

Responsive

tabPanel과tabConfig에 Responsive 플러그인을 추가한 것을 알 수 있습니다

// TabPanel
responsiveConfig: {
    tall: {
        headerPosition: 'top'
    },
    wide: {
        headerPosition: 'left'
    }
},

// Tab Config
tabConfig: {
    plugins: 'responsive',
    responsiveConfig: {
        wide: {
            iconAlign: 'left',
            textAlign: 'left'
        },
        tall: {
            iconAlign: 'top',
            textAlign: 'center',
            width: 120
        }
    }
}

이 플러그인은 태블릿과 탭의 파일/아이콘 위치를viewport의 넓이와 높이에 따라 변경할 수 있도록 규칙을 설정할 수 있습니다.너는 살 수 있다http://docs.sencha.com/extjs/6.0.2-classic/guides/application_architecture/developing_for_multiple_screens_and_environments.html응답 레이아웃에 대해 자세히 알아보십시오.

View Models and Data Binding

View Models and Data Binding을 결합하면 성명 스타일에서 최소한의 코드로 더 많은 기능을 실현할 수 있습니다.View Model은 데이터 쌍을 관리하는 클래스입니다.그리고 구성 요소가 원하는 데이터를 연결할 수 있도록 합니다. 데이터가 바뀌면 구성 요소가 알림을 받을 수 있습니다.예를 들어 ViewController
대부분의 경우, 설정은 setter 방법을 통해 설정되며, ViewModel에서 데이터 귀속에 사용할 수 있습니다.이 예에서 setHtml () 및 setTitle () 방법을 사용했습니다.

// View Model Declaration
viewModel: 'main',

// Binding to header's title
header: {
    title: {
        bind: {
            text: '{name}'
        },
        flex: 0
    }
},

// Binding to tab's HTML config
{
    title: 'Users',
    iconCls: 'fa-user',
    bind: {
        html: '{loremIpsum}'
    }
}

ViewModel(app/view/main/MainModel.js)에서tabs와 app에 연결된 데이터를 볼 수 있습니다. 이 ViewModel에서 데이터는 정적으로 설정되어 있지만 대부분의 경우proxy를 통해 생성된 ViewModels and Data Binding Guide [http://docs.sencha.com/extjs/6.0.2-classic/guides/application_architecture/view_models_data_binding.html] 자세한 내용을 참조하십시오.

Grids

다음은 Ext.grid를 살펴보겠습니다.Panel, MyApp/classic/src/view/main/List를 엽니다.js List.js는 첫 번째tab에 불러옵니다. 우리는 최소한의 코드로 기능이 전면적인grid를 만들었습니다.기본적으로 모든 열은 정렬할 수 있으며, 꼭대기를 누르면 상승 순서와 하락 순서를 변환할 수 있습니다.각 열의 순서도 드래그를 통해 변경할 수 있다.
뿐만 아니라, 우리는 모든 열을 독립적으로 설정할 수 있다.grid 구성을 더 자세히 살펴보겠습니다.

Store

우리가 설정한store는'personnel'입니다. 이것은classic 구역이 아니라 일반 구역 app/store/Personnel에 있습니다.js, 그래서 Classic grid와 Modern grid는 같은store와 데이터를 사용할 수 있습니다.실제 개발에서 위의store는proxy로 URL 속성에 설정되어 서버에서 정보를 얻을 수 있습니다.이 예에서 우리는 내장된 가상 데이터를 사용한다.

Listeners

Listener 이미지는 select 이벤트를 포함하고 있으며, 리셋 함수는'onItemSelected'입니다.마찬가지로 app/view/main/MainController에 있기 때문에 Classic 영역에서 이 방법을 찾을 수 없습니다.js. 그것 역시classic와modern에 적용된다.

onItemSelected: function (sender, record) {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},

Modern

MyApp/modern/src/view/main/Main.js, ViewController, ViewModels, Models, Stores, 그리고 Tabs와 Grid의 개념이 Classic와 유사하다는 것에 대해 다음과 같은 새로운 개념을 설명합니다.

Change Themes

새 응용 프로그램이 생성될 때마다 기본 theme는 Triton입니다.그러나 당신이 응용 프로그램을 만든 후에도 간단하게 다른 themes를 전환할 수 있습니다.Crisp theme 한번 해볼게요.
앱을 엽니다.json

"theme": "theme-triton",

... 로 하다

"theme": "theme-crisp"

Styling Your Application

많은 경우에 사용자 정의 응용 프로그램이 필요합니다. 여기서tabs의active를 파란색으로 변경합니다.
현재, 아래의 모임은classicview에만 영향을 줄 수 있습니다.머지않아 Ext JS6는view의 주제를 바꾸어 같은 응용 프로그램의classic와modern을 모두 유효하게 할 것이다
SCSS 파일을 만들고 수정하여 응용 프로그램의 스타일을 수정할 수 있습니다.글로벌 SCSS 변수를 보려면 API 문서를 볼 수 있습니다.Global_CSS[http://docs.sencha.com/extjs/6.2.0-classic/Global_CSS.html]
별도의 구성 요소에도 전문적인 SCSS 변수가 있습니다. 예를 들어 Panel SCSS 변수는 Ext.panel에서 사용할 수 있습니다.Panel[http://docs.sencha.com/extjs/6.2.0-classic/Ext.panel.Panel.html] 의 CSS Variables 를 참조하십시오.
classic/sass/src/view/main/디렉터리를 열면 Main을 볼 수 있습니다.scss 파일.이 디렉터리와 파일은 필요에 따라 수동으로 추가할 수 있으며, 프로그램의 모든 종류에 대해senchacmd는sacc/var에서 정의한 변수와sass/src에서 정의한 규칙에 따라 검사합니다.
새 SCSS 파일을 추가할 때,sencha app watch는 그것들을 전체 앱 스타일에 수록합니다.
계속해서 메인을 보도록 하겠습니다.scss 파일.
보이는 경우, 맨 윗부분의 패널, extjs-panel-ui, 다음과 같은 배경색

$ui-header-background-color: $base-color,

로 변경할 수 있습니다.

$ui-header-background-color: #87BD3E,

전체 응용 프로그램을 수정하려면 다음 위치에서 전역적인 규칙을 만들 수 있습니다

classic/sass/etc/all.scss // all.scss may contain any SASS / CSS rules

이 파일을 만든 후에 @base-color를 추가하고 앱 theme의 @base-color를 다시 쓸 수 있습니다

$base-color: #87BD3E dynamic();

sencha cmd

sencha generate app DesktopApp Classic ../Desktop sencha generate app MobileApp Modern ../MobileApp sencha generate app DemoApp ../DemoApp Build application sencha app build sencha app refresh sencha app watch