zoukankan      html  css  js  c++  java
  • 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(),
                    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: '行号', 30 },
                        { header: 'id', 30, dataIndex: 'id', sortable: true },
                        {
                            header: '姓名', 80, dataIndex: 'name', sortable: true,//默认的就是文本列把,没什么特殊性,就是输入文本
                            editor: {
                                xtype: 'textfield',
                                allowBlank: false
                            }


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


                                allowBlank: false
                            }


                        },
                        {
                            header: '生日', 80, dataIndex: 'birthday', sortable: true, xtype: 'datecolumn',
                            format: 'Y年m月d日',//日期列才有的格式化输出配置
                            editor: {
                                xtype: 'datefield',


                                allowBlank: false




                            }
                        }


                    ]








                });








            });





  • 相关阅读:
    占位
    JavaScript(13):用jQuery实现复选框的全、反、取选
    JavaScript(12):jQuery(1)
    JavaScript(11):词法分析
    JavaScript(10):行为(HTML)、结构(CSS)、样式(JS)相分离的页面
    JavaScript(9):非常规form表单提交、弹出框、URL和刷新、定时器
    JavaScript(8):搜索框示例实现、样式操作、属性操作、标签操作
    JavaScript(7):DOM直接查找与间接查找的补充
    JavaScript(6):作用域、面向对象
    开篇杂谈
  • 原文地址:https://www.cnblogs.com/lz3018/p/4579795.html
Copyright © 2011-2022 走看看