Grid行编辑插件

时间:2023-01-15 05:32:26
  //操作列不显示应该就是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




                        }
                    }


                ]








            });








        });