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




                        }
                    }


                ]








            });








        });





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值