Ext js4 页面控件-表格插件

最新推荐文章于 2017-03-21 20:30:22 发布

Web攻城狮-前端

最新推荐文章于 2017-03-21 20:30:22 发布

阅读量385

点赞数

文章标签： ext stylesheet date plugins html function

本文链接：https://blog.csdn.net/guojing5721/article/details/8061820

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>EditTable.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css"></link>
    <script type="text/javascript" src="ext-4.0.7-gpl/ext-all.js"></script>
    <script type="text/javascript">

    var store = Ext.create('Ext.data.ArrayStore',{
       fields:['id', 'name', 'age', 'address',{name:'date', type:"date",dateFormat:'Y-m-d' }],
       data: [
                    [1, 'aaa', '23', '河南','2012-10-11'],
                    [2, 'bbb', '34', '河南','2012-10-11'],
                    [3, 'ccc', '33', '河南','2012-10-11'],
                    [4, 'ddd', '54', '河南','2012-10-11'],
                    [5, 'eee', '24', '河南','2012-10-11']
                ]
    });
    var column= [
                {
                   text:'ID',
                   dataIndex:'id'
                },{
                    text: '姓名', dataIndex: 'name',
                    //定义编辑状态时的控件，没有定义不能编辑
                    editor: {
                        xtype: 'textfield',
                        //是否可以为空
                        allowBlank: false
                    }
                }, {
                    text: '年龄', dataIndex: 'age',
                    editor: {
                        xtype: 'numberfield'
                    }
                },{
                   text:'Address',
                   dataIndex:'address',
                   editor:{xtype:'textfield'}
                },{
                   text:'Date',
                   dataIndex:'date',
                   renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                   editor:{
                       xtype:"datefield",

                       format:'Y-m-d'
                   }
                }];
Ext.onReady(function() {
   Ext.create('Ext.grid.Panel', {
                title: '学习grid控件',
                store: store,
                forceFit: true,
                width:500,
                renderTo: Ext.getBody(),
                //单元格选择模式
                selType: 'rowmodel',
                plugins: [
                //编辑单元格插件
                    Ext.create("Ext.grid.plugin.RowEditing", {
                        //双击开始编辑
                        clicksToEdit: 1
                    })
                ],
                columns:column
            });
        });

    </script>
    </head>

<body>

</body>
</html>

Web攻城狮-前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext js4 页面控件-表格插件

EditTable.html var store = Ext.create('Ext.data.ArrayStore',{ fields:['id', 'name', 'age', 'address',{name:'date', type:"date",dateFormat:'Y-m-d' }],
复制链接

扫一扫