ExtJS下grid的一些属性说明

下面是关于ExtJS下grid的一些属性说明的详细攻略。

ExtJS下grid的一些属性说明

Grid是ExtJS中非常重要和强大的组件，它常常被用来显示数据列表信息。在使用Grid的时候，常用的配置属性有：

1. store

Grid的数据存储对象。store可以是一个数组，也可以是一个实现了Store接口的对象，例如Ext.data.Store对象。

示例1：

Ext.define('User', {
  extend: 'Ext.data.Model',
  fields: ['id', 'name', 'email', 'phone']
});

const store = Ext.create('Ext.data.Store', {
  model: 'User',
  proxy: {
    type: 'ajax',
    url: 'users.json', // 数据存储地址
    reader: {
      type: 'json',
      rootProperty: 'items'
    }
  },
  autoLoad: true // 自动加载数据
});

const grid = Ext.create('Ext.grid.Panel', {
  store: store,
  columns: [
    {text: 'ID', dataIndex: 'id'},
    {text: '姓名', dataIndex: 'name'},
    {text: '邮箱', dataIndex: 'email'},
    {text: '电话', dataIndex: 'phone'}
  ]
});

以上示例中，我们创建了一个store对象，并且将其传入grid的配置中。

2. columns

定义Grid的列，每一列可以定义字段名、显示标题、宽度等等。

示例2：

const grid = Ext.create('Ext.grid.Panel', {
  // ...
  columns: [
    {text: 'ID', dataIndex: 'id', width: 100},
    {text: '姓名', dataIndex: 'name', width: 100},
    {text: '邮箱', dataIndex: 'email', flex: 1},
    {text: '电话', dataIndex: 'phone', flex: 1}
  ]
});

以上示例中，我们定义了4列，前两列分别指定了宽度，后两列使用了flex属性自动分配宽度。

3. bbar

Grid底部的工具栏。

示例3：

const grid = Ext.create('Ext.grid.Panel', {
  // ...
  bbar: Ext.create('Ext.PagingToolbar', {
    store: store,
    displayInfo: true
  })
});

以上示例中，我们将一个PagingToolbar对象传入了Grid的bbar配置中，实现了分页显示。

4. selModel

选择模式，用于定义每一行或者列的选择方式。

示例4：

const grid = Ext.create('Ext.grid.Panel', {
  // ...
  selModel: 'rowmodel'
});

以上示例中，我们定义了选择模式为rowmodel，表示每一行的选择方式。

以上是一些常用的Grid配置属性说明以及示例。在使用Grid的时候，还有很多其他的属性可以设置，需要根据实际情况进行选择和配置。