동적으로 격자 만들기 EXTJS

Question

격자보기를 동적으로 만들 수 있는지 궁금합니다. 설명을 위해 최선을 다할 것입니다 ...

저는 현재 서로 다른 영역을 가진 데이터베이스 테이블을 가지고 있으며이 테이블 주위에 그리드를 만들었으며이 그리드에 새 항목을 추가 할 수 있습니다 테이블.

또한 이름, 전화 번호가 포함 된 담당자에게 데이터베이스 테이블이 있으며 모든 지역을 드롭 다운으로 사용합니다. 다시 그리드를 통해이 테이블에 새 항목을 추가 할 수 있습니다.

마지막으로 제 3의 눈금이 모든 접촉자를 지역으로 구분하여 보여줍니다. 내가 겪고있는 문제는 그것을 어떻게 동적으로 만드는가? 현재 저는 지역 제목을 하드 코딩하고 올바르게 필터링하는 격자를 채 웁니다. 그러나 누군가 새로운 영역을 완전히 추가한다면 어떻게해야합니까? 새로 추가 된 영역에 적절한 필터를 사용하여 제목과 격자를 만들려면 어떻게해야합니까?

세 번째 그리드 코드 : 첫 번째의 경우

Ext.define('myproject.example', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.********', 

    requires: [ 
     'store.exampleStore' 
    ], 
    modal: true, 
    draggable: true, 
    header: { 
     title: 'Technical Advisors Contact Information', 
     height: 55, 
     items: [{ 
      xtype: 'button', 
      text: 'X', 
      listeners: { click: 'onModalX' } 
     }] 
    }, 
    scrollable: true, 
    align: 'center', 
    floating: true, 
    width: 1500, 
    height: 800, 

    items: [{ 
     xtype: 'grid', 
     title: 'Region: ME', 
     scrollable: true, 
     collapsible: true, 
     store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] }, 
     columns: [{ 
      text: 'Contact', 
      dataIndex: 'ContactName', 
      sortable: true, 
      flex: 2 
     }, { 
      text: 'Office #', 
      dataIndex: 'Office', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Home #', 
      dataIndex: 'Home', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Pager #', 
      dataIndex: 'Pager', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Cellular #', 
      dataIndex: 'Cellular', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Area', 
      dataIndex: 'Region', 
      sortable: true, 
      flex: 3 
     }] //continues... 

Answer 1

, 당신은 (브라우저에서) 클라이언트 측에 데이터를 얻을 필요가있다. 이 작업은 ajax 요청 (jsonp, ext.direct, rest 등)을 통해 수행 할 수 있습니다. 수동으로이 작업을 수행 할 수

grid.store.loadData(result.data); 

, 또는에 extjs에서 프록시에 대해 읽어 :

그런 다음 당신은 당신의 가게에 데이터를로드 할 수 있습니다. 가장 쉬운 시작 방법은 rest-proxy입니다.