ExtJs学习笔记——Ext.grid.EditorGridPanel的使用
生活随笔
收集整理的這篇文章主要介紹了
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 的idcm: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>總結
以上是生活随笔為你收集整理的ExtJs学习笔记——Ext.grid.EditorGridPanel的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 查看计算机硬盘序列号的软件,硬盘序列号,
- 下一篇： Lua身份证号校验