Sencha 그리드로 16 개의 웹 앱을 구축하는 방법

Sencha Extreact 그리드를 사용하여 REACT 16 애플리케이션에서 대형 데이터 세트를 효율적으로 관리하고 표시하며, 많은 DOM 작업이 필요없이 정렬, 필터링 및 편집과 같은 내장 기능을 활용합니다.

키 포인트 :

많은 DOM 작업이 필요하지 않고 Sencha Extreact Grid를 사용하여 REACT 16 응용 프로그램에서 대형 데이터 세트를 효율적으로 관리하고 표시합니다.

extreact npm 패키지 및 Extreact 응용 프로그램 생성기로 개발 프로세스를 단순화하십시오. 버튼 및 스파크 라인 다이어그램과 같은 대화 형 구성 요소를 그리드 셀에 직접 포함시켜 동적이고 반응이 좋은 사용자 경험을 제공하여 사용자 인터페이스를 향상시킵니다. 그리드 수출자 플러그인을 사용하여 소량의 코드만으로 데이터 내보내기 기능을 활성화하여 사용자는 그리드에서 Excel 또는 CSV 형식으로 직접 데이터를 내보낼 수 있습니다.

조건부 플러그인 및 반응 형 디자인 기능을 사용하여 데스크탑 및 모바일 플랫폼의 애플리케이션을 최적화하여 원활한 크로스 플랫폼 사용자 경험을 보장합니다.

• 이 기사는 원래 Sencha에 출판되었습니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.
React 16은 React의 새로운 핵심 아키텍처 (코드 명 "Fiber"를 기반으로 한 최초의 React 버전입니다. REACT 16은 근본적으로 비동기 렌더링을 지원하도록 설계되었으며,이를 통해 기본 실행 스레드를 차단하지 않고 큰 구성 요소 트리를 처리 할 수 ​​있습니다. 오류 경계로 예외를 포착하고, 여러 구성 요소를 렌더링에서 반환하고, 파일 크기를 줄이고, MIT 라이센스를 지원하는 것과 같은 많은 주요 기능을 지원합니다.
• React 16을 사용하여 데이터 중심 웹 응용 프로그램을 개발하는 경우 그리드 또는 스프레드 시트와 같은 인터페이스를 사용하여 어느 시점에서 사용자 데이터를 표시 할 확률이 높습니다. 상황에 따라 사용자는 응용 프로그램의 그리드가 다음을 수행 할 수 있기를 원할 수 있습니다.
고정 제목 로 스크롤하십시오 열 제목을 클릭하여 정렬하십시오 특정 열을 보여주고 숨 깁니다 페이징, 그룹화 및 요약 셀에서 데이터를 편집합니다 엑셀로 내보내기 심층/선 확장 메쉬는 아마도 필요한 많은 기능이 많은 React 전문 지식과 DOM을 깊이 파고 할 의지와 능력을 필요로하기 때문에 React에서 가장 어렵고 복잡한 UI 구성 요소 중 하나 일 것입니다. 다행히 Extreact Grid는 이러한 모든 기능을 제공합니다.
• 이 기사에서는 Sencha Extreact 그리드를 사용하여 주식 및 주식 회사에 대한 정보를 표시하는 예를 작성합니다. HTML 테이블 또는 기타 타사 구성 요소를 사용하여 그리드를 쓰려고하려면 정렬을 위해 열 헤더를 클릭하거나 열 헤더 사이의 분리기를 클릭하여 크기를 조정하고 호출기를 미끄러지고 얻는 등의 작업을 수행해야 할 수도 있습니다. 페이지 데이터와 같은 다음 작업. Extreact 그리드를 사용하면 이러한 기능이 내장되어 있습니다. 직접 시도하고 싶습니까? Extreact의 30 일 무료 평가판으로 시작하십시오-여기에 가입하십시오.
Extreact 그리드를 사용하여 응용 프로그램을 구축하겠습니다.
• extreact 응용 프로그램 생성기 로 시작하는 것 extreact 구성 요소를 사용하여 React 응용 프로그램 개발을 시작하려면 다음을 따르십시오. 노드 환경을 설정했는지 확인하십시오 먼저, Node 8.11과 NPM 6이 시스템에 설정되어 있는지 확인하십시오. 노드 웹 사이트에서 최신 노드 버전을 다운로드 할 수 있습니다. 이미 설치된 노드가 설치된 경우 다음 명령을 사용하여 Node 및 NPM 버전을 쉽게 확인할 수 있습니다. extreact npm 리포지토리 에 대한 로그인 자격 증명을 가져옵니다 extreact npm 패키지는 Sencha의 개인 NPM 저장소에서 호스팅됩니다. 모든 퇴적 패키지에 액세스하려면 리포지토리에 로그인하면됩니다. 로그인 자격 증명을 얻으려면 extreact 30 일 무료 평가판 페이지를 방문하여 양식을 작성하십시오. 로그인 세부 정보와 문서 및 샘플 프로젝트와 같은 일부 리소스 링크가 포함 된 이메일을 보내드립니다.

  extreact npm 저장소에 로그인하고 Extreact 응용 프로그램 생성기를 얻으십시오

  다음 단계는 extreact 패키지를 호스팅하는 Sencha의 개인 NPM 저장소에 로그인하는 것입니다. NPM 로그인 (이메일로 제공)을 사용하여 리포지토리를 @Sencha 범위와 연결하고 프롬프트시 자격 증명을 입력하십시오.

  다음 단계는 Extreact 생성기 패키지를 설치하는 것입니다.

  첫 번째 반응 응용 프로그램을 만듭니다 eoman 생성기를 실행하여 첫 번째 Extreact 응용 프로그램을 만듭니다 :

  <code>node -v
  npm -v</code>

  생성기는 응용 프로그램의 이름을 지정하고 NPM 패키지의 이름을 지정하고 테마를 선택하도록 요청합니다. 기본 재료 테마 (Google의 재료 디자인 가이드 기반)는 좋은 시작 테마입니다. "빈 응용 프로그램 생성"을 선택하십시오. 생성기는 또한 프로젝트를위한 새 디렉토리를 만들도록 프롬프트합니다. 그런 다음 생성기는 관련 종속성을 포함하여 샘플 응용 프로그램을 다운로드하여 만듭니다.

  반응 응용 프로그램을 실행하십시오 생성기 출력에서 ​​응용 프로그램을 실행하는 단계를 찾을 수 있습니다. 새 응용 프로그램 디렉토리로 변경하고 다음 명령으로 응용 프로그램을 실행하는 것만 큼 간단합니다.

  이것은 응용 프로그램을 시작하고 빈 반응 응용 프로그램은 응용 프로그램 제목 만 표시됩니다. 응용 프로그램의 기본 구성 요소 (예 : StocksGrid)는 루트 디렉토리에 컨테이너가 있으며 레이아웃이 맞게 전체 화면으로 표시되어 있으므로 하위 요소를 채우기 위해 하위 요소를 늘립니다.

  github 의이 단계 전에 코드를 참조하십시오.

  응용 프로그램에 그리드를 추가하십시오 재고 데이터 추가 우리는 샘플 데이터 세트를 응용 프로그램에 stocks.json이라는 응용 프로그램에 추가합니다. 이것은 약 10,000 행의 JSON 데이터를 갖춘 꽤 큰 데이터 세트입니다. 각 라인은 회사 또는 재고 코드를 나타냅니다. 따라서 회사 이름, 주식 코드, 산업, 산업, 그리고 그 재고 진드기 배열이 포함 된 마지막 5 회 판매용. 이것은 그리드에 표시 할 데이터입니다. 실제 응용 프로그램 에서이 모든 데이터는 백엔드에서 반환됩니다. 백엔드 REST API를 구축하는 방법의 모든 메커니즘을 반복하지 않고이 샘플 애플리케이션에 대해 정적으로로드합니다. 그러나 실제 백엔드에서 데이터를 얻는 것과 정확히 같은 방식으로로드됩니다.

  기본 그리드를 만듭니다 StockGrid 구성 요소 렌더 메소드에서 열이있는 그리드를 반환합니다.

  기둥을 그리드에 배치하려면 열 구성 요소를 사용합니다. 열 구성 요소는 주식 데이터 이름 필드와 동일한 DatainDex를 사용합니다. 텍스트 소품을 열 헤더 텍스트로 사용하고 고정 너비 또는 플렉스와 같은 열에 대한 너비 또는 플렉스와 최소 또는 최대 값의 조합을 지정할 수 있습니다. 우리는 회사 이름, 코드, 진드기, 산업 및 산업에 열 구성 요소를 추가 할 것입니다. 아래 그림과 같이 새 StockSgrid 클래스를 만듭니다

  이제 다음과 같이 클래스 앱에 StockGrid를 추가하십시오 :
  github 의이 단계 전에 코드를 참조하십시오. NPM 시작시 빈 그리드가있는 웹 응용 프로그램을 볼 수 있습니다.

  <code>node -v
  npm -v</code>

  그리드를 사용하여 재고 데이터를 바인딩합니다 extreact의 그리드는 EXT Data Store에서 데이터를 추출하고 렌더링하는 테이블입니다. Extreact에서 저장소 구현은 그리드 또는 목록 또는 차트와 같은 구성 요소의 데이터를 정렬하고 필터링 할 수있는 데이터 구조입니다.

  이제 재고 데이터로드 및 스토리지 생성을 시작할 수 있습니다. 마찬가지로 그리드는 항상 스토리지에서 데이터를 가져 오며 그리드와의 상호 작용은 재 장전, 정렬 또는 페이징과 같은 스토리지에서 이벤트를 트리거합니다. 이를 위해 여기에서 저장소를 만들 것입니다.

  ext 데이터 스토리지는 플럭스 스토리지와 다릅니다. 메쉬와 스토리지가 표준 React 방법과 약간 다른 점은 두 가지가 단단히 통합된다는 것입니다. 일반적으로 데이터를 스토리지로 직접 전달하거나 스토리지가 프록시를 사용하여 백엔드 자체에서 데이터를 추출 할 수 있습니다. extreact 그리드를 사용하면 실제로 코드를 작성하지 않고 필터링, 정렬, 페이징, 그룹화 및 요약과 같은 대화식 기능을 얻을 수 있습니다.

  <code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

  이 예에서는 데이터를 주식 데이터 파일에서 스토리지로 직접 전달합니다. 프록시 구성을 사용하여 스토리지를 만들 수도 있습니다. 프록시를 소유하면 원격 페이징, 필터링 및 정렬과 같은 다양한 훌륭한 작업을 수행 할 수 있습니다. 오토로드를 true로 설정하여 그리드를 자동으로로드합니다. 데이터는 어떤 기준으로도 구체적으로 정렬되지 않으므로 이름 속성을 지정하여 클라이언트에 정렬합니다.
  그리드에서 스토어 구성을 생성 된 스토어에 할당하십시오.
  이제 우리는 다음과 같이 모든 데이터가있는 그리드를 가지고 있습니다. 이 간단한 코드를 사용하면 정렬과 같은 많은 기능을 무료로 얻을 수 있습니다.이를 통해 열 헤더를 클릭하면 자동으로 정렬됩니다 (아래 상징적 열 참조).

  이 경우 정렬은 클라이언트 측에서 수행됩니다. 그러나 실제 백엔드 API를 구현하면 프록시를 백그라운드에서 원격으로 정렬하여 "Order By Clause"를 사용하여 데이터베이스에 정렬하도록 구성 할 수 있습니다.

  당신은 또한 무료로 Resizable 열을 얻을 수 있습니다. 따라서이 열에서 너비를 설정하더라도 사용자가 무언가를 보거나 닫으려면 왼쪽과 오른쪽 열을 드래그하여 수행 할 수 있습니다.

  당신은 또한 멋진 그룹화 기능을 얻을 수 있습니다. 따라서 업계별로 그룹화하려면이 분야별로 그룹을 말할 수 있고, 모든 데이터를 업계의 가치로 그룹화 할 것이며, 각 그룹을 스크롤하면 고정 제목이 제공됩니다.

  당신은 10,000 개의 레코드의 경우이 데이터가 매우 빠르게 렌더링됩니다. 그것이 너무 빨리 렌더링되는 이유는 우리가 버퍼 렌더링이라고 부르는 것을 사용하기 때문입니다. 따라서이 테이블이 가득 차면 아래로 스크롤 할 수 있고 계속 진행되지만 처음에로드 할 때 "뷰포트 높이"에서 실제로 보는 것보다 약간 더 많은 콘텐츠 만 렌더링합니다.

  아래로 스크롤하면 실제로 스토리지에서 포장하는 것처럼 셀의 내용을 최신 레코드로 대체합니다. 따라서 실제로 DOM 요소를 가능한 한 많이 보존하고 DOM을 작게 유지하여 메모리 소비를 줄이고 고성능을 보장합니다. github 의이 단계 전에 코드를 참조하십시오.

  라인에 버튼을 추가하십시오 이제, 우리는 현실 세계에 더 적합한 일을 할 것입니다. 왼쪽 열의 주식 중 하나를 구입하려면 클릭 할 수있는 버튼을 원한다고 가정 해 봅시다. 이를 위해 열을 추가 할 수 있습니다. 이번에는 DatainDex가 필드의 특정 항목이나 매장의 필드에 해당하지 않기 때문에 DatainDex를 추가하지 않습니다. 버튼이있는 위젯 셀을 추가합니다. 우리는 몇 가지 스타일을 할 것입니다 - 우리는 원형 동작 UI를 추가 할 것입니다. 버튼에 원형 액션 룩이 있습니다 :

  .

  우리가 사용할 구매 처리기는 매우 간단합니다. 구매 버튼을 클릭하면 ext.toast라는 가정을 사용하면 구매중인 주식에 대한 코드를 보여주는 상단에 작은 프롬프트 메시지가 표시됩니다. 마찬가지로 각 행이 렌더링 될 열을 렌더링합니다. 이 버튼을 렌더링 한 다음 클릭하면이 기능이라고합니다.

  이 예에서 기본적으로 그리드 셀 내부에 모든 외부 구성 요소를 포함시킬 수 있으며 완전히 대화식이라는 것을 알 수 있습니다. 완전한 반응 구성 요소 역할을합니다.

  github 의이 단계 전에 코드를 참조하십시오.

  트렌드 스파크 라인 차트를 추가하십시오 주식 데이터에서는 지난 5 개의 주식 판매의 진드기 배열이 있습니다. 스파크 라인 그래프로 그리드에 포함 시겠습니다. 위젯 셀을 사용하여 그리드 셀 내부에서 퇴적 구성 요소를 렌더링합니다.
  마우스가있는 온라인 그래프의 다른 지점을 가리킬 때, 두 자리 자리 자리로 형식화 된 y 값을 표시합니다.
  Github 의이 단계 전에 코드를 참조하십시오.

  <code>node -v
  npm -v</code>

  export 로 내보내십시오 데이터 집약적 인 응용 프로그램의 일반적인 요구 사항 중 하나는 데이터를 Excel로 내보내는 것입니다. extreact는 그리드의 플러그인 소품을 사용하여 쉽게이를 달성 할 수 있습니다.

  수출 함수에 대한 호출을 용이하게하기 위해 더 많은 구성 요소를 추가합니다. 타이틀 바를 추가하고 그리드 상단에 타이틀 바를 도킹하고 메뉴를 배치합니다. 내보내기 버튼을 클릭하면 Excel 또는 CSV로 내보내는 옵션이 있습니다.

  내보내기 핸들러는 내보내기 유형과 파일 이름 확장을 통과합니다.

  package.json 종속성에 수출 업체를 포함시켜야합니다. 예를 들면 :

  의존성 설치.

  <code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

  Expler Plugin은 데이터 내보내기를 다양한 파일 형식으로 내보내는 것을 지원합니다. 기본 XSLX, Excel XML 및 HTML 및 CSV/TSV (Comma/Tab 분리 값) 형식을 지원합니다.
  Github 의이 단계 전에 코드를 참조하십시오.

  <code>npm install -g @sencha/ext-react-gen</code>

  그리드에 편집을 추가하십시오 데이터 편집 기능을 추가하여 그리드를 스프레드 시트처럼 만들 수 있습니다. 이 기능을 추가하려면 GridCellEditing이라는 다른 플러그인을 추가해야합니다. 이 플러그인을 추가하고 편집 가능한 열을 편집 가능한 것으로 표시하면 그리드 셀을 두 번 클릭하여 편집 할 수있는 그리드 데이터가 있습니다. 그리드 셀에서 탭 키를 눌러 그리드를 계속 편집 할 수 있습니다.

  그리드 셀 편집 플러그인 추가 :

  "이름 "편집 가능성 :

  <code>ext-react-gen app your-app-name-here -i</code>

  편집 이벤트 핸들

  그리드 셀을 편집 한 후 일부 특수 작업을 수행하려면 스토리지의 데이터 변경 이벤트를들을 수 있습니다. 리스너 구성 및 "이벤트 업데이트"리스너를 추가하여이를 수행 할 수 있습니다.

  <code>npm start</code>

  "업데이트 이벤트 "는 스토리지, 업데이트 된 레코드, 이벤트 발생을 설명하는 객체를 포함하여 많은 매개 변수를 전달한 다음 변경된 필드 이름을 전달합니다. 핸들러에 추가합니다. 이 경우 프롬프트 메시지 만 표시합니다. 실제 응용 프로그램에서는 실제로 데이터베이스 변경을 지속하는 것과 같은 비즈니스 로직을 적용합니다.
  그리드 셀에 선택 옵션을 추가하십시오 그리드 셀에 "선택"옵션을 추가하려면 Selectfield라는 다른 외계 구성 요소를 사용하여 수행 할 수 있습니다. 원하는 열에 Selectfield Extreact 구성 요소를 추가하면됩니다.

  <code>node -v
  npm -v</code>

  Github 의이 단계 전에 코드를 참조하십시오.

  크로스 플랫폼 경험을 최적화하십시오 이것은 데스크탑 경험에 적합하지만 휴대폰 경험의 화면 크기를 최소화 할 때 셀 편집이 가장 좋은 편집 경험이 아닐 수도 있습니다. 작은 화면 장치의 경우 다른 편집 스타일을 선택해야 할 수도 있습니다.

  PlatformConfig 옵션을 사용하면 데스크탑 또는 모바일 장치의 동작을 지정할 수 있습니다. PlatformConfig에 따라 모든 소품을 다른 값으로 설정할 수 있습니다. 여기서는 플랫폼에 따라 플러그인을 설정합니다. 이 예에서는 응용 프로그램이 데스크탑에있을 때 GridCellediting을 사용합니다. 앱이 모바일 장치에 있으면 GridDitable을 사용하여 모바일 장치에서 데이터를 편집하는 더 나은 방법을 제공합니다.
  github 의이 단계 전에 코드를 참조하십시오.

  extreact 6.6 그리드를 사용하고 REACT 16을 사용하여 데이터 중심 웹 응용 프로그램에 스프레드 시트와 같은 인터페이스를 쉽게 추가 할 수 있습니다. extreact를 사용하면 메시, 트리 메시, 관점 메시, 차트, D3 시각화 등을 포함한 모든 Ext JS 최신 구성 요소를 사용할 수 있습니다. 애플리케이션에 사용하는 구성 요소 만 포함 된 최적화 된 최소화 패키지를 빌드 할 수 있습니다. 데스크탑 및 모바일 장치 모두에서 잘 보이는 레이아웃 및 적응 형 디자인 기능을 사용하여 몰입 형 사용자 참여를 구축 할 수 있습니다. 알림으로, Extreact의 30 일 재판을 무료로 시작할 수 있습니다. 여기에 가입하십시오.

  Sencha Grid를 사용한 16 개의 웹 애플리케이션을 구축하는 것에 대한 자주 묻는 질문 Sencha Grid 란 무엇이며 React 16과 어떻게 통합됩니까?

  Sencha Grid는 다량의 데이터를 처리하도록 설계된 고성능 그리드 구성 요소입니다. 사용자 인터페이스 구축을위한 인기있는 JavaScript 라이브러리 인 React 16과 완벽하게 통합됩니다. 이 통합을 통해 개발자는 React의 구성 요소 기반 아키텍처의 힘과 데이터 분류, 필터링, 그룹화 및 편집과 같은 Sencha 그리드의 힘을 활용할 수 있습니다. 이 조합은 복잡한 웹 응용 프로그램을 구축하기위한 강력한 도구를 제공합니다.

  REACT 16 응용 프로그램에서 Sencha Grid를 시작하는 방법은 무엇입니까?

  <code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

  먼저 NPM (Node.js의 패키지 관리자)을 사용하여 Sencha Grid 패키지를 설치해야합니다. 일단 설치되면 Sencha 그리드 구성 요소를 React 응용 프로그램으로 가져 와서 다른 React 구성 요소와 마찬가지로 사용할 수 있습니다. Sencha Grid 구성 요소는 동작 및 외관을 사용자 정의하는 데 사용할 수있는 다양한 소품을 제공합니다.

  다른 JavaScript 프레임 워크 또는 라이브러리와 함께 Sencha 그리드를 사용할 수 있습니까?

  예, Sencha Grid의 디자인은 프레임 워크가 없으므로 JavaScript 프레임 워크 또는 라이브러리와 함께 사용할 수 있습니다. 그러나 React 및 Sencha Grid는 구성 요소 기반 기능을 갖기 때문에 React 16과의 통합은 특히 원활합니다.

  Sencha Grid의 몇 가지 주요 기능은 무엇입니까?

  Sencha Grid는 다양한 기능을 제공하므로 많은 양의 데이터를 표시하고 조작하는 강력한 도구입니다. 이러한 기능에는 데이터의 정렬, 필터링, 그룹화 및 편집 및 Infinite 스크롤, 행 익스텐더 및 열 잠금과 같은 고급 기능이 포함됩니다. 그리드는 또한 다양한 데이터 유형과 형식을 지원하며 응용 프로그램의 요구에 맞게 쉽게 사용자 정의 할 수 있습니다.

  Sencha Grid는 많은 양의 데이터를 어떻게 처리합니까?

  Sencha Grid는 많은 양의 데이터를 효율적으로 처리하도록 설계되었습니다. 현재 뷰포트에서 볼 수있는 행만 만 렌더링하는 가상 스크롤 메커니즘을 사용합니다. 이는 그리드에 수천 또는 수백만 행이 있더라도 성능이 여전히 높고 사용자 경험이 매끄 럽다는 것을 의미합니다.

  Sencha 그리드의 모양을 사용자 정의 할 수 있습니까?

  예, Sencha Grid는 모양을 사용자 정의 할 수있는 다양한 옵션을 제공합니다. CSS를 사용하여 색상, 글꼴 및 기타 스타일을 변경할 수 있으며 광범위한 API를 사용하여 그리드의 레이아웃 및 동작을 사용자 정의 할 수도 있습니다.

  Sencha Grid와의 사용자 상호 작용을 처리하는 방법은 무엇입니까?

  Sencha Grid는 사용자 상호 작용을 처리 할 수있는 다양한 이벤트를 제공합니다. 이러한 이벤트에는 이벤트 클릭, 이벤트 선택, 이벤트 편집 등이 포함됩니다. 이러한 이벤트를 들으면 응용 프로그램에서 복잡한 행동과 상호 작용을 구현할 수 있습니다.

  상업용 애플리케이션에서 Sencha 그리드를 사용할 수 있습니까?

  예, Sencha Grid는 상업용 및 비상업적 애플리케이션 모두에서 사용할 수 있습니다. 그러나 상업적으로 사용하려면 Sencha에서 라이센스를 구매해야합니다.

  Sencha Grid에서 데이터를 업데이트하는 방법은 무엇입니까?

  Sencha Grid는 데이터를 업데이트하는 다양한 방법을 제공합니다. 전체 데이터 세트 또는 단일 행 또는 셀을 업데이트 할 수 있습니다. 데이터가 업데이트되면 그리드는 영향을받는 행이나 셀을 자동으로 재실행합니다.

  Sencha Grid는 어떤 유형의 지원을 제공합니까?

  Sencha는 Sencha 그리드에 포괄적 인 문서 및 튜토리얼과 다른 개발자와 질문을하고 지식을 공유 할 수있는 커뮤니티 포럼을 제공합니다. 또한 Sencha는 추가 도움이나지도가 필요한 고객에게 전문적인 지원 및 컨설팅 서비스를 제공합니다.

위 내용은 Sencha 그리드로 16 개의 웹 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!