ext读取xml可编辑grid资源-CSDN文库

共5个文件

html：4个

xml：1个

EditorGridPanel

xml

2星需积分: 10 85 浏览量 2009-08-19 14:38:19 上传评论收藏 5KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ext读取数据.rar （5个子文件）

ext读取数据

Ext Record 之定义.html 1KB

Ext Store 之按部就班定义到高级封装.html 2KB

Ext DataReader 之定义.html 3KB

xmlData

hello.xml 604B

Ext 表格控件之 GridPanel SimpleStore XmlReader 可编辑.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Ext 表格控件之 GridPanel SimpleStore XmlReader 可编辑</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all.js"></script> <script type="text/javascript" > Ext.onReady( function() { var data= [ {id:'1',name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'}, {id:'2',name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1991-5-6'}, {id:'3',name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1991-3-7'} ]; var store=new Ext.data.JsonStore({ data:data, fields:["id","name","sex","email",{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"}, {header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}, {header:"电子邮件",dataIndex:"email",width:250,sortable:true,editor:new Ext.form.TextField()} ]); var grid=new Ext.grid.EditorGridPanel({ renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpanColumn:3 }); /***************** * 吴磊在这里作出总结：初始化一个grid控件，需要一个ColumnModel和一个Store * 初始化一个ColumnModel对象需要知道dataIndex * 初始化一个Store需要data、一个xml、一个json，这个要根据Store类型和数据源的不同而定。 ******************/ var data1= [ {id:'1',name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'}, {id:'2',name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1991-5-6'}, {id:'3',name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1991-3-7'} ]; var store1=new Ext.data.JsonStore({ data:data1, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); //-- var colM1=new Ext.grid.ColumnModel([ {header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()}, {header:"性别",dataIndex:"sex",editor:new Ext.form.ComboBox({typeAhead: true,triggerAction:'all',transform:'sexList',lazyRender:true,listClass: 'x-combo-list-small'})}, /* 吴磊的总结：这里的select必须放到form标签中，否则将提示对象不支持此方法。同理：其他的表单标记就也应该放入form标签中。 */ {header:"出生日期",editor:new Ext.form.DateField({format:'Y年m月d日'}),dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}, {header:"电子邮件",dataIndex:"email",width:250,sortable:true,editor:new Ext.form.TextField()} ]); //-- var grid1=new Ext.grid.EditorGridPanel({ renderTo:"hello1", title:"学生基本信息管理", height:200, width:600, cm:colM1, store:store1, autoExpanColumn:3, clicksToEdit:1 }); /**/ //############################# var xml_store=new Ext.data.Store({ url:"xmlData/hello.xml", reader:new Ext.data.XmlReader( {record:"row"}, ["id","name","organization","homepage"] ) }); xml_store.load(); var xml_colM=new Ext.grid.ColumnModel([ {header:"项目名称",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()}, {header:"开发团队",dataIndex:"organization",sortable:true,editor:new Ext.form.TextField()}, {header:"网址",dataIndex:"homepage",width:250,sortable:true,editor:new Ext.form.TextField()} ]); var xml_grid=new Ext.grid.EditorGridPanel({ renderTo:"hello2", title:"中国Java开源产品及团队", height:200, width:600, cm:xml_colM, store:xml_store, autoExpanColumn:2, clicksToEdit:1 }); //############################# } ); </script> </head> <body> <form> <select name="sexList" id="sexList" style="display: none;"> <option value="男">男</option> <option value="女">女</option> </select> </form> <div id="hello"> </div> <div id="hello1"> </div> <div id="hello2"> </div> <div id="hello3"> </div> </body> </html>

评论收藏

内容反馈