使用FlexiGrid实现Extjs表格效果方法分享

概述

FlexiGrid是一种基于jQuery的表格插件，能够快速地帮助我们创建灵活、可定制的表格。在ExtJS中，我们可以使用该插件来实现表格的显示和操作，使得我们能够更加高效、方便地开发我们的ExtJS应用。

本文将介绍如何使用FlexiGrid实现ExtJS表格效果，并提供两条示例说明。

步骤

步骤1：引入jQuery和FlexiGrid插件

首先需要在我们的项目中引入jQuery和FlexiGrid插件。那么如何在ExtJS中引入jQuery呢？答案是通过在index.html文件中引入jQuery：

<!-- 引入 jQuery -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后在我们的ExtJS代码中引入FlexiGrid插件：

<!-- 引入 FlexiGrid 插件 -->
<script type="text/javascript" src="https://cdn.bootcss.com/flexigrid/1.1/js/flexigrid.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/flexigrid/1.1/css/flexigrid.css" />

步骤2：创建表格

在ExtJS中，我们通常使用GridPanel来创建表格。为了使用FlexiGrid，我们可以通过配置项的方式来进行设置，如下所示：

Ext.create('Ext.grid.Panel', {
    title: 'FlexiGrid Demo',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    width: 500,
    height: 250,
    renderTo: Ext.getBody()
});

通过以上配置，我们就可以创建出一个简单的表格。但是，这个表格并不是使用FlexiGrid插件创建的，还需要我们进行下一步的设置。

步骤3：设置FlexiGrid选项

在创建GridPanel时，我们可以通过viewConfig配置项来设置FlexiGrid选项，如下所示：

Ext.create('Ext.grid.Panel', {
    title: 'FlexiGrid Demo',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    width: 500,
    height: 250,
    renderTo: Ext.getBody(),
    viewConfig: {
        plugins: [
            {
                ptype: 'gridviewdragdrop'
            },
            {
                ptype: 'gridviewoptions',
                enableTooltip: true,
                optionText: 'Columns'
            }
        ],
        itemTpl: null,
        scrollOffset: 0,
        autoFill: true,
        forceFit: true,
        stripeRows: true,
        showPager: true,
        useRp: true,
        rp: 10,
        rpOptions: [5, 10, 20, 30, 50],
        title: false,
        resizable: false,
        sortOrder: "asc",
        resizable: true,
        resizableWidthIncrement: 10,
        resizableHeightIncrement: 10,
        minWidth: 50,
        minHeight: 50,
        maxWidth: null,
        maxHeight: null
    }
});

在上述配置中，我们设置了以下FlexiGrid的选项：

plugins：设置了两个插件：gridviewdragdrop和gridviewoptions。
itemTpl：设置项的模板，这里设置为null。
scrollOffset：滚动条的偏移量。
autoFill：自动填充。
forceFit：强制适应父容器大小。
stripeRows：是否显示条纹行。
showPager：是否显示分页工具栏。
useRp：是否使用固定的行数分页。
rp：每页显示的行数。
rpOptions：可选的每页行数。
title：是否显示表格标题。
sortOrder：默认排序的顺序。
resizable：是否可调整大小。
resizableWidthIncrement：宽度可调整的增量。
resizableHeightIncrement：高度可调整的增量。
minWidth：最小宽度。
minHeight：最小高度。
maxWidth：最大宽度。
maxHeight：最大高度。

步骤4：完整代码示例

Ext.create('Ext.grid.Panel', {
    title: 'FlexiGrid Demo',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    width: 500,
    height: 250,
    renderTo: Ext.getBody(),
    viewConfig: {
        plugins: [
            {
                ptype: 'gridviewdragdrop'
            },
            {
                ptype: 'gridviewoptions',
                enableTooltip: true,
                optionText: 'Columns'
            }
        ],
        itemTpl: null,
        scrollOffset: 0,
        autoFill: true,
        forceFit: true,
        stripeRows: true,
        showPager: true,
        useRp: true,
        rp: 10,
        rpOptions: [5, 10, 20, 30, 50],
        title: false,
        resizable: true,
        resizableWidthIncrement: 10,
        resizableHeightIncrement: 10,
        minWidth: 50,
        minHeight: 50,
        maxWidth: null,
        maxHeight: null
    }
});

示例

示例1：支持排序和过滤的FlexiGrid表格

下面是一个示例，演示如何使用FlexiGrid实现排序和过滤功能的表格。

Ext.create('Ext.grid.Panel', {
    title: 'Sortable and Filterable FlexiGrid Demo',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name', sortable: true },
        { text: 'Email', dataIndex: 'email', flex: 1, sortable: true },
        { text: 'Phone', dataIndex: 'phone', sortable: true }
    ],
    width: 500,
    height: 250,
    renderTo: Ext.getBody(),
    viewConfig: {
        plugins: [
            {
                ptype: 'gridviewdragdrop'
            },
            {
                ptype: 'gridviewoptions',
                enableTooltip: true,
                optionText: 'Columns'
            }
        ],
        itemTpl: null,
        scrollOffset: 0,
        autoFill: true,
        forceFit: true,
        stripeRows: true,
        showPager: true,
        useRp: true,
        rp: 10,
        rpOptions: [5, 10, 20, 30, 50],
        title: false,
        resizable: true,
        resizableWidthIncrement: 10,
        resizableHeightIncrement: 10,
        minWidth: 50,
        minHeight: 50,
        maxWidth: null,
        maxHeight: null,
        remoteSort: true,
        remoteFilter: true
    }
});

在这个示例中，我们设置了sortable选项来支持排序，同时设置了remoteSort选项来实现远程排序。我们还设置了remoteFilter选项来实现远程过滤。

示例2：支持编辑、添加和删除的FlexiGrid表格

下面是一个示例，演示如何使用FlexiGrid实现编辑、添加和删除功能的表格。

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Editable FlexiGrid Demo',
    store: store,
    columns: [
        { text: 'Name', dataIndex: 'name', editor: 'textfield' },
        { text: 'Email', dataIndex: 'email', flex: 1, editor: 'textfield' },
        { text: 'Phone', dataIndex: 'phone', editor: 'textfield' }
    ],
    width: 500,
    height: 250,
    renderTo: Ext.getBody(),
    viewConfig: {
        plugins: [
            {
                ptype: 'gridviewdragdrop'
            },
            {
                ptype: 'gridviewoptions',
                enableTooltip: true,
                optionText: 'Columns'
            }
        ],
        itemTpl: null,
        scrollOffset: 0,
        autoFill: true,
        forceFit: true,
        stripeRows: true,
        showPager: true,
        useRp: true,
        rp: 10,
        rpOptions: [5, 10, 20, 30, 50],
        title: false,
        resizable: true,
        resizableWidthIncrement: 10,
        resizableHeightIncrement: 10,
        minWidth: 50,
        minHeight: 50,
        maxWidth: null,
        maxHeight: null,
        plugins: [
            {
                ptype: 'cellediting',
                clicksToEdit: 2
            }
        ]
    },
    tbar: [
        {
            text: 'Add New Row',
            handler: function() {
                var rec = new store.model();
                grid.store.insert(0, rec);
                grid.plugin.startEdit(rec, 0);
            }
        },
        {
            text: 'Remove Selected Row',
            handler: function() {
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    grid.store.remove(selection);
                }
            }
        }
    ]
});

在这个示例中，我们通过设置editor选项来支持编辑功能。同时，我们添加了一个Tbar，通过按钮的方式来实现添加和删除功能。

结论

本文介绍了如何使用FlexiGrid来实现ExtJS表格效果，并提供了两个示例。使用FlexiGrid可以让我们更加灵活、高效地开发ExtJS应用。希望本文对读者能够有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用FlexiGrid实现Extjs表格效果方法分享 - Python技术站