728x90 반응형 Programming/ExtJS12 [ExtJS] Grid panel (2) Ext.grid.Panel (1) 바로가기 prinha.tistory.com/entry/ExtJS-Grid-panel-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B6%9C%EB%A0%A5?category=904364 [ExtJS] Grid panel (1) Ext.grid.Panel 그리드는 클라이언트 측에 많은 양의 테이블 형식 데이터를 표시하는 방법이다. 형태의 그리드 패널을 사용하면, 많은 양의 데이터를 쉽게 정렬하고 필터링할 수 있다. docs.sencha.com/ex prinha.tistory.com wikidocs.net/2982 위키독스 온라인 책을 제작 공유하는 플랫폼 서비스 wikidocs.net 1. 기본 그리드 패널 - 모델과 스토어 Ext.grid.Panel은 데이터 .. 2020. 11. 27. [ExtJS] Grid panel (1) Ext.grid.Panel 그리드는 클라이언트 측에 많은 양의 테이블 형식 데이터를 표시하는 방법이다. 형태의 그리드 패널을 사용하면, 많은 양의 데이터를 쉽게 정렬하고 필터링할 수 있다. docs.sencha.com/extjs/6.5.3/classic/Ext.grid.Panel.html Ext.grid.Panel | Ext JS 6.5.3 Ext JS Classic - API documentation from Sencha docs.sencha.com 1. 그리드 패널 기본 선언 column config속성을 이용하여 grid header 생성 Ext.onReady(function(){ Ext.create("Ext.grid.Panel",{ title:'Grid Example', renderTo:Ext.g.. 2020. 11. 26. [ExtJS] Dataview 사용자 정의 템플릿 Ext.dataview.DataView 서버 벡엔드 또는 다른 데이터 소스에서 하나 이상의 데이터 항목을 쉽게 렌더링 할 수 있다. DataView는 Ext.dataview.List 및 Grid를 지원한다. 데이터뷰를 이용하게되면 커스텀 레이아웃 템플릿과 데이터스토어에 담겨있는 데이터를 표시할 수 있다. docs.sencha.com/extjs/6.5.3/modern/Ext.dataview.DataView.html Ext.dataview.DataView | Ext JS 6.5.3 Ext JS Modern - API documentation from Sencha docs.sencha.com (부트스트랩 cdn 설정 필요) Ext.onReady(function(){ Ext.create("Ext.panel.Pa.. 2020. 11. 26. [ExtJS] DataStore Ext.data.Store 가공된 데이터를 화면에 출력한다. 스토어 클래스는 모델 객체의 클라이언트 측 캐시를 캡슐화한다. 스토어는 프록시를 경유하여 데이터를 로드하고, 또 그안에 포함되어 있는 모델, 인스턴스를 정렬 필터링 및 조회하기 위한 기능을 제공한다. 1) 여러 컴포넌트에서 사용되는 데이터 스토어 Ext.form.field.ComboBox Ext.view.View Ext.grid.Panel Ext.tree.Panel - 스토어의 개념은 동일하나 사용 클래스가 다름(Ext.data.TreeStore) Chart - Column, Bar, Line, Area, Pie, Financial, Gauge, Combination ... 2) 데이터 스토어에서 알아두어야할 점 데이터 스토어에fields와 d.. 2020. 11. 25. [ExtJS] TreePanel / Tree Store Ext.tree.Panel 트리 구조 데이터의 UI 표현을 제공한다. TreePanel은 Ext.data.TreeStore에 바인딩되어야한다. TreePanels은 열 구성을 통해 여러 열을 지원하는데, 기본적으로 Text Store Node의 필드를 사용하는 단일 열이 포함된다. xtype alias는 treepanel이다. docs.sencha.com/extjs/6.5.3/classic/Ext.tree.Panel.html Ext.tree.Panel | Ext JS 6.5.3 Ext JS Classic - API documentation from Sencha docs.sencha.com Ext.data.TreeStore 트리의 루트 노드를 소유하고 로컬 또는 원격 데이터를 루트 및 하위 비 리프 노드의.. 2020. 11. 25. [ExtJS] Form Field Ext.create("Ext.form.Panel") - 기본 선언만 해도 validation check Field Types Ext.form.field.Checkbox Ext.form.field.ComboBox Ext.form.field.Date Ext.form.field.Display Ext.form.field.File Ext.form.field.Hidden Ext.form.field.HtmlEditor Ext.form.field.Number Ext.form.field.Radio Ext.form.field.Text Ext.form.field.TextArea Ext.form.field.Time examples.sencha.com/extjs/6.5.1/examples/kitchensink/?classic#.. 2020. 11. 25. [ExtJS] window component / tap panel Ext.window.Window 응용 프로그램 창으로 사용하기위한 특수 패널이다. 창을 최대화하여 뷰포트를 채우거나 이전 크기로 복원할 수 있다. Windows를 Ext.ZIndexManager에 연결하거나 Ext.WindowManager로 관리하여 그룹화, 활성화, 전면, 후면 및 기타 응용프로그램 별 동작을 제공할 수 있다. 기본적으로 Windows는 document.body로 렌더링되는데, 다른 요소로 제한하려면 renderTo를 지정한다. 모든 Ext.container.Container와 마찬가지로 Window가 자식 컴포넌트의 크기를 조정하고 배열하는 방법을 고려하는 것이 중요하다. docs.sencha.com/extjs/6.5.3/classic/Ext.window.Window.html Ext... 2020. 11. 25. [ExtJS] 다양한 MessageBox / alert ExtJS에서의 MessageBox ExtJS에서 쓰이는 메시지창을 불러오기 위한 Ext.Msg는 싱글톤 인스턴스이기때문에 create()를 사용하지 않고, 사용하고자 하는 곳에서 곧바로 불러온다. 1. alert('타이틀','메시지') Javascript의 alert()는 확인버튼을 누르기 전까지 다음 라인의 동작이 이루어지지않는다. ExtJS의 alert()는 사용자의 반응을 기다리지않고, 곧바로 다음 로직이 실행된다. 따라서 따로 function을 구현해 return으로 제어해줘야한다. Ext.onReady(function(){ Ext.Msg.alert("title","Hello World!"); }); 2. confirm('타이틀','메시지') Javascript의 confirm은 boolean값.. 2020. 11. 25. [ExtJS] Buttons을 활용한 UI 만들어보기 출처 : kutar37.tistory.com/entry/ExtJS-Buttons?category=778439 ExtJS : Buttons ExtJS : Buttons 기본 버튼들과 크기조절, 버튼에 아이콘 삽입 등에 대해 알아본다. Preview 레이아웃과 버튼을 조합해서 아래와 같이 eclipse UI를 비슷하게 만들어보자. layout border를 이용해 레이아웃을 kutar37.tistory.com Preview - 레이아웃과 버튼을 조합하여 아래와 같은 UI 만들기 1. Layout Ext.onReady(function(){ Ext.create("Ext.container.Viewport",{ layout:'border', renderTo:Ext.getBody(), items:[{ xtype:'p.. 2020. 11. 25. [ExtJS] layout과 layout속성 ExtJS에서 실제로 태그 안에는 아무것도 없지만 app.js에 코드를 작성하면, 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보여진다. html의 div태그와 같이 ExtJS 컴포넌트들은 기본적으로 block 속성을 가진다. 따라서 별도의 레이아웃 속성을 지정하지 않으면 컴포넌트들이 위 아래로 정렬된다. 1. PANEL 레이아웃을 구성할 때 빈번하게 쓰이는 컨테이너로, 하위 구성요소를 포함할 수 있다. docs.sencha.com/extjs/6.5.3/classic/Ext.panel.Panel.html#properties Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ width:300, height:100, border:tr.. 2020. 11. 24. [ExtJS] 테마변경 / 빌드 출처 및 참고 : mongodev.tistory.com/46?category=685442 ExtJS6 네번째 강의 - ExtJS 문법 및 viewport 레이아웃(fit,border) 이해 ▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ ExtJS 는 어떻게 UI 컴포넌트를 그리는 것인가? ExtJS는 기존 HTML 구조.. mongodev.tistory.com 1. ExtJS Theme ExtJS의 theme는 app.json에서 변경이 가능하다. 1) ExtJS (classic) theme theme-classic theme-gray theme-neptune theme.. 2020. 11. 24. [ExtJS] ExtJS설치/환경설정/프로젝트생성 ExtJS란? UI 컴포넌트를 지원하는 Javascript Framework이다. ex) 잘 알려진 자바스크립트 프레임워크로는 AngularJS, ReactJS, NodeJS .. 대표적으로 지원하는 컴포넌트는 크게 세 가지(Grid, Chart, Tree)가 있다. 화면 개발의 경우 JSON구조로 구성되어있다. docs.sencha.com/extjs/7.3.1/guides/getting_started/getting_started_with_npm.html Getting Started with npm | Ext JS 7.3.1 Ext JS - API documentation from Sencha docs.sencha.com ExtJS 설치 및 환경설정 1) ExtJS SDK 설치 www.sencha.com.. 2020. 11. 20. 이전 1 다음 728x90 반응형
