ExtJs 可编辑表格学习

最新推荐文章于 2017-10-03 03:28:00 发布

xsh118

最新推荐文章于 2017-10-03 03:28:00 发布

阅读量334

点赞数

文章标签：浙江 renderto lazyrender

本文详细介绍了使用ExtJS实现可编辑表的功能，通过定义列信息时指定列的编辑方式，实现对数据的直接编辑。示例包括普通可编辑框、下拉框、日历等编辑形式，并提供了效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示，xtype为editorgrid。利用EditorGridPanel取利用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一列利用的编辑即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>gridpanel jsondata</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
    <script type="text/javascript" src="../js/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all.js"></script>

    <script type="text/javascript">

    Ext.onReady(function(){
      var data = [{id:1,name:'马海亮',sex:'男',borndate:'1988-5-25',jiguan:'甘肃',email:'mahilion@163.com'},
           {id:2,name:'张强',sex:'男',borndate:'1988-5-25',jiguan:'甘肃',email:'张强@163.com'},
        {id:3,name:'林展飞',sex:'男',borndate:'1988-5-25',jiguan:'福建',email:'linzhanfei@163.com'},
       {id:4,name:'周杭剑',sex:'男',borndate:'1988-5-25',jiguan:'浙江',email:'zhouhangjian@163.com'}
          ];

var store = new Ext.data.JsonStore({data:data,fields:['id','name','sex',
{name:"borndate",type:"date",dateFormat:'Y-n-j'},'jiguan','email']});

     var colM = new Ext.grid.ColumnModel([
   {header:"编号",
    dataIndex:"id",
    width:50,
    sortable:true},

   {header:"姓名",
    dataIndex:"name",
    width:100,
    sortable:true,
    editor:new Ext.form.TextField()},

     var grid = new Ext.grid.EditorGridPanel({
   renderTo:"hello",
   title:'学生信息统计',
   width:600,
   height:300,
   cm:colM,
   store:store,
   autoExpandColumn:3,
   clicksToEdit:1
  });
   });
    </script>

</head>

<body>
   <div id="hello">
      <select id="sexList" name="sexList">
   <option>男</option>
      <option>女</option>
  </select>
   </div>

</body>
</html>

   {header:"籍贯",
    dataIndex:"jiguan",
    width:100,
    sortable:true,
    editor:new Ext.form.TextField()},

   {header:"邮箱",
    dataIndex:"email",
    width:200,
    sortable:true,
    editor:new Ext.form.TextField()}
   ]);

   {header:"性别",
    width:50,
    dataIndex:"sex",
    editor:new Ext.form.ComboBox({transform:"sexList",triggerAction:'all',lazyRender:true})},

   {header:"出生日期",
    dataIndex:"borndate",
    width:100,
    sortable:true,
    rendere爱奇艺r:Ext.util.Format.dateRenderer('Y-m-d'),
    editor:new Ext.form.DateField({format:'Y-m-d'})},

效果截图