Ext4.2学习之GridPanel行编辑功能

最新推荐文章于 2022-09-14 22:25:15 发布

lang20150928

最新推荐文章于 2022-09-14 22:25:15 发布

阅读量324

点赞数

分类专栏： extjs 文章标签： javascript ext html

本文链接：https://blog.csdn.net/m0_37607945/article/details/115005217

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

首先定义一个Ext.grid.plugin.RowEditing类型的编辑器
在这里插入图片描述
然后在表格的plugins属性当中添加即可。

结果如下所示

对应源代码

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {
            // Define our data model
            Ext.define('Employee', {
                extend: 'Ext.data.Model',
                fields: [
                    'name',
                    'email',
                    {name: 'start', type: 'date', dateFormat: 'n/j/Y'},
                    {name: 'salary', type: 'float'},
                    {name: 'active', type: 'bool'}
                ]
            });

            // Generate mock employee data
            var data = (function () {
                var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
                    firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
                    lastLen = lasts.length,
                    firstLen = firsts.length,
                    usedNames = {},
                    data = [],
                    // s = new Date(2020, 1, 3),
                    now = new Date(),
                    s = Ext.Date.add(now, Ext.Date.MONTH, -20);
                    getRandomInt = Ext.Number.randomInt,

                    generateName = function () {
                        var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
                        if (usedNames[name]) {
                            return generateName();
                        }
                        usedNames[name] = true;
                        return name;
                    };

                while (s.getTime() < now.getTime()) {
                    var ecount = getRandomInt(0, 3);
                    for (var i = 0; i < ecount; i++) {
                        var name = generateName();
                        data.push({
                            start: Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
                            name: name,
                            email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
                            active: getRandomInt(0, 1),
                            salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
                        });
                    }
                    s = Ext.Date.add(s, Ext.Date.MONTH, 1);
                }

                return data;
            })();

            // create the Data Store
            var store = Ext.create('Ext.data.Store', {
                // destroy the store if the grid is destroyed
                autoDestroy: true,
                model: 'Employee',
                proxy: {
                    type: 'memory'
                },
                data: data,
                sorters: [{
                    property: 'start',
                    direction: 'ASC'
                }]
            });

            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false
            });

            // create the grid and specify what field you want
            // to use for the editor at each column.
            var grid = Ext.create('Ext.grid.Panel', {
                store: store,
                columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    flex: 1,
                    editor: {
                        // defaults to textfield if no xtype is supplied
                        allowBlank: false
                    }
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    width: 160,
                    editor: {
                        allowBlank: false,
                        vtype: 'email'
                    }
                }, {
                    xtype: 'datecolumn',
                    header: 'Start Date',
                    dataIndex: 'start',
                    width: 90,
                    editor: {
                        xtype: 'datefield',
                        allowBlank: false,
                        format: 'm/d/Y',
                        minValue: '01/01/2006',
                        minText: 'Cannot have a start date before the company existed!',
                        maxValue: Ext.Date.format(new Date(), 'm/d/Y')
                    }
                }, {
                    xtype: 'numbercolumn',
                    header: 'Salary',
                    dataIndex: 'salary',
                    format: '$0,0',
                    width: 90,
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false,
                        minValue: 1,
                        maxValue: 150000
                    }
                }, {
                    xtype: 'checkcolumn',
                    header: 'Active?',
                    dataIndex: 'active',
                    width: 60,
                    editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor'
                    }
                }],
                renderTo: 'grid',
                width: 600,
                height: 400,
                title: 'Employee Salaries',
                frame: true,
                tbar: [{
                    text: 'Add Employee',
                    iconCls: 'employee-add',
                    handler: function () {
                        rowEditing.cancelEdit();

                        // Create a model instance
                        var r = Ext.create('Employee', {
                            name: 'New Guy',
                            email: 'new@sencha-test.com',
                            start: new Date(),
                            salary: 50000,
                            active: true
                        });

                        store.insert(0, r);
                        rowEditing.startEdit(0, 0);
                    }
                }, {
                    itemId: 'removeEmployee',
                    text: 'Remove Employee',
                    iconCls: 'employee-remove',
                    handler: function () {
                        var sm = grid.getSelectionModel();
                        rowEditing.cancelEdit();
                        store.remove(sm.getSelection());
                        if (store.getCount() > 0) {
                            sm.select(0);
                        }
                    },
                    disabled: true
                }],
                plugins: [rowEditing],
                listeners: {
                    'selectionchange': function (view, records) {
                        grid.down('#removeEmployee').setDisabled(!records.length);
                    }
                }
            });
        });
    </script>
</head>
<body>
<div id="grid"></div>
</body>
</html>