IT Develop/ExtJs

Extjs Grid Sample

K-popcorn 2023. 4. 24. 14:34
반응형

Sench Extjs

ExtJS는 동적이고 대화식인 사용자 인터페이스를 만들기 위한 많은 기능을 제공하는 강력한 JavaScript 프레임워크입니다. Ext.JS에서 그리드를 만드는 것은 일반적인 작업이며, Ext.grid를 사용하여 쉽게 수행할 수 있습니다.패널 클래스.

다음은 ExtJS를 사용하여 간단한 그리드를 만드는 예입니다:

Ext.onReady(function() {
  // Define the data for the grid
  var data = [
    { name: 'John', age: 30, city: 'New York' },
    { name: 'Jane', age: 25, city: 'Los Angeles' },
    { name: 'Bob', age: 40, city: 'Chicago' },
    { name: 'Alice', age: 35, city: 'Houston' },
  ];
  
  // Define the model for the grid
  Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
      { name: 'name', type: 'string' },
      { name: 'age', type: 'int' },
      { name: 'city', type: 'string' }
    ]
  });
  
  // Create a store for the grid
  var store = Ext.create('Ext.data.Store', {
    model: 'Person',
    data: data
  });
  
  // Create the grid
  var grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: store,
    columns: [
      { text: 'Name', dataIndex: 'name' },
      { text: 'Age', dataIndex: 'age' },
      { text: 'City', dataIndex: 'city' }
    ]
  });
});

이 예에서는 그리드에 표시할 데이터를 정의하는 것으로 시작합니다. 그런 다음 Ext. 데이터를 사용하여 그리드에 대한 모델을 정의합니다.모델 클래스 - 그리드에 표시할 필드를 지정합니다.

다음으로, 우리는 Ext. 데이터를 사용하여 그리드에 대한 저장소를 만듭니다.스토어 클래스. 저장소는 그리드에 표시될 데이터를 로드하고 관리합니다.

마지막으로, 우리는 Ext.grid를 사용하여 그리드 자체를 만듭니다.패널 클래스. 그리드에 표시할 저장소와 열을 지정한 다음 renderTo 메서드를 사용하여 페이지에 그리드를 렌더링합니다.

이는 ExtJS를 사용하여 그리드를 생성하는 간단한 예에 불과하지만 프레임워크는 그리드 및 그리드 동작을 사용자 정의하기 위한 훨씬 더 많은 옵션과 기능을 제공합니다.

 

(Eng.Ver)

ExtJS is a powerful JavaScript framework that provides a lot of functionality for creating dynamic and interactive user interfaces. Creating grids in ExtJS is a common task, and it can be accomplished easily using the Ext.grid.Panel class.

Here is an example of creating a simple grid using ExtJS:

Ext.onReady(function() {
  // Define the data for the grid
  var data = [
    { name: 'John', age: 30, city: 'New York' },
    { name: 'Jane', age: 25, city: 'Los Angeles' },
    { name: 'Bob', age: 40, city: 'Chicago' },
    { name: 'Alice', age: 35, city: 'Houston' },
  ];
  
  // Define the model for the grid
  Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
      { name: 'name', type: 'string' },
      { name: 'age', type: 'int' },
      { name: 'city', type: 'string' }
    ]
  });
  
  // Create a store for the grid
  var store = Ext.create('Ext.data.Store', {
    model: 'Person',
    data: data
  });
  
  // Create the grid
  var grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: store,
    columns: [
      { text: 'Name', dataIndex: 'name' },
      { text: 'Age', dataIndex: 'age' },
      { text: 'City', dataIndex: 'city' }
    ]
  });
});

 

In this example, we start by defining the data that we want to display in the grid. We then define a model for the grid using the Ext.data.Model class, which specifies the fields that we want to display in the grid.

Next, we create a store for the grid using the Ext.data.Store class. The store is responsible for loading and managing the data that will be displayed in the grid.

Finally, we create the grid itself using the Ext.grid.Panel class. We specify the store and columns that we want to display in the grid, and then render the grid to the page using the renderTo method.

This is just a simple example of creating a grid using ExtJS, but the framework provides many more options and features for customizing the grid and its behavior.

반응형