Grid行编辑插件

时间:2023-03-08 16:21:15
Grid行编辑插件

//操作列不显示应该就是autoLoad的问题。

        Ext.onReady(function () {

            Ext.BLANK_IMAGE_URL = "Extjs/resources/themes/images/access/tree/s.gif";

            var datas = [

                [100, '刘一', 1000, new Date(1990, 05, 07)],

                [200, '黄小珠', 2089, new Date(1994, 10, 07)],

                [300, '王五', 2900, new Date(1990, 11, 17)]

            ];





            Ext.create('Ext.grid.Panel', {

                title: '行编辑插件',

                renderTo: Ext.getBody(),

                width: 500,

                height: 400,

                // frame: true,

                layout: 'fit',

                viewConfig: {

                    forceFit: true,

                    //stripRows: true

                },

                store: {

                    fields: ['id', 'name', 'salary', 'birthday'],

                    proxy: {

                        type: 'memory',

                        data: datas,

                        reader: 'array'

                    },

                    autoLoad: true

                },

                plugins: [Ext.create(Ext.grid.plugin.RowEditing, { clicksToEdit: 1 })],//clicksToEdit设置单击鼠标一次开始编辑

                columns: [

                     { xtype: 'rownumberer', text: '行号', width: 30 },

                    { header: 'id', width: 30, dataIndex: 'id', sortable: true },

                    {

                        header: '姓名', width: 80, dataIndex: 'name', sortable: true,//默认的就是文本列把,没什么特殊性,就是输入文本

                        editor: {

                            xtype: 'textfield',

                            allowBlank: false

                        }





                    },

                    {

                        header: '薪水', width: 80, dataIndex: 'salary', sortable: true, format: '0,000',//数字列才有的格式化输出配置

                        xtype: 'numbercolumn',

                        editor: {

                            xtype: 'numberfield',





                            allowBlank: false

                        }





                    },

                    {

                        header: '生日', width: 80, dataIndex: 'birthday', sortable: true, xtype: 'datecolumn',

                        format: 'Y年m月d日',//日期列才有的格式化输出配置

                        editor: {

                            xtype: 'datefield',





                            allowBlank: false









                        }

                    }





                ]

















            });

















        });