ExtJs学习笔记——Ext.grid.EditorGridPanel的使用

最新推荐文章于 2021-11-18 11:24:29 发布

漏气的可乐

最新推荐文章于 2021-11-18 11:24:29 发布

阅读量659

点赞数

文章标签： ExtJS

本文链接：https://blog.csdn.net/weixin_43841301/article/details/99629410

版权

ExtJs学习笔记——Ext.grid.EditorGridPanel的使用

可编辑表格是指可以直接在表格的数据进行编辑，ExtJS的可编辑表格由Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一类使用的编辑即可，下面看一个完整的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" />
    <script src="ext-3.2.0/adapter/ext/ext-base-debug.js"></script>
    <script src="ext-3.2.0/ext-all-debug.js"></script>
    <script>
        Ext.onReady(function(){
            var data=[           //数据添加
                {id:1,
                    name:"小王",
                    email:"xiaowang@126.com",
                    sex:"男",
                    bornDate:"1992-5-6"
                },
                {
                    id:2,
                    name:"小李",
                    email:"xiaoli@126.com",
                    sex:"男",
                    bornDate:"1992-5-6"
                },
                {
                    id:3,
                    name:"小兰",
                    email:"xiaolan@126.com",
                    sex:"女",
                    bornDate:"1993-3-3"
                }];
            var store=new Ext.data.JsonStore({
                data:data,
                fields:["id","name","email","sex",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
            });   //对应字段 设置日期的格式

            var colM=new Ext.grid.ColumnModel([
                        {
                            header:"姓名",
                            dataIndex:"name",
                            sortable:true,     //是否排序
                            editor:new Ext.form.TextField()}, //添加可以修改的属性
                        {header:"性别",dataIndex:"sex",sortable:true,
                            editor:new Ext.form.ComboBox  //定义单选框
                            ({transform:"sexList", //与duv中下拉框的id相对应
                                triggerAction:"all",           //显示下拉数据
                                lazyRender:true    //在对象请求签阻止 combobox 生效

                            })},
                        {header:"邮件",dataIndex:"email",sortable:true,
                            editor:new Ext.form.TextField()},
                        {header:"出生日期",dataIndex:"bornDate",
                    renderer:Ext.util.Format.dateRenderer("Y年m月d日"), //格式化数据
                    sortable:true,
                    editor:new Ext.form.DateField({format:"Y年m月d日"})}  //调用日期化控件
            ]);
            var grid=new Ext.grid.EditorGridPanel({
                renderTo:"hello",    //对应下面div 的id
                cm:colM,
                store:store,
                title:"学生管理",
                width:500,
                height:200,
                autoExpandColumn:3  // 扩展的列
            });
        });
    </script>
</head>
<body>
<div id="hello"></div>
<select id="sexList">
    <option>男</option>
    <option>女</option>
</select>
</body>
</html>

漏气的可乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用

ExtJs学习笔记——Ext.grid.EditorGridPanel的使用可编辑表格是指可以直接在表格的数据进行编辑，ExtJS的可编辑表格由Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一类使用的编辑即可，下面看一个完整的示例。<!...
复制链接

扫一扫