Sencha ExtJs 5.1.0中的渲染器组件列网格

Question

我有关于渲染器的问题，我使用渲染器在numberfield的{​​{1}}中创建column，但它不起作用，请查看代码并帮助我错误的地方

grid

感谢您的帮助。

Answer 1

我认为你应该看Cell Editing plugin。在上面的代码中，您将创建一个数字字段的实例，但实际上并未将其应用于任何内容。

单元格编辑插件允许您在列中使用字段组件（如文本字段，数字字段等），并帮助管理已编辑的数据。

Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224',
                number: 0
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234',
                num: 1
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244',
                num: 2
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254',
                num: 3
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }, {
                header: 'Number',
                dataIndex: 'num',
                editor: 'numberfield'
            }],
            selModel: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});