可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑,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'})}, 效果截图
普通可编辑框
|