程序博客网 > 淘宝家纺拍摄

Ext2.2-用XML做数据源,可编辑Grid的例子

来源：互联网 发布：淘宝家纺拍摄 编辑：程序博客网 时间：2024/06/05 00:58
原文地址:http://www.java2000.net/p8972

先看看运行效果


html源代码
查看复制到剪切板打印
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" c>  
  4. <title>Editor Grid Example</title>  
  5.   
  6. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />  
  7.          <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
  8.     <script type="text/javascript" src="../ext-all.js"></script>  
  9.     <script type="text/javascript">  
  10.         Ext.onReady(function(){  
  11.             Ext.QuickTips.init();  
  12.   
  13.                 // 日期格式化  
  14.             function formatDate(value){  
  15.                 return value ? value.dateFormat('Y年m月d日') : '';  
  16.             };  
  17.             // shorthand alias  
  18.             var fm = Ext.form;  
  19.   
  20.             // 自定义的字段  
  21.             var checkColumn = new Ext.grid.CheckColumn({  
  22.                header: "婚否?",  
  23.                dataIndex: 'married',  
  24.                width: 55  
  25.             });  
  26.   
  27.             // 列数据的模型  
  28.             // dataIndex 对应着数据里面的字段  
  29.             var cm = new Ext.grid.ColumnModel([{  
  30.                    id:'name', // 数据模型的唯一编号  
  31.                    header: "姓名", // 标题  
  32.                    dataIndex: 'name', // 对应于数据源里面的字段  
  33.                    width: 220, // 宽度  
  34.                    editor: new fm.TextField({ // 编辑的类型  
  35.                        allowBlank: false // 不允许为空，如果为空，则会显示红色波浪线警告且恢复原始数值  
  36.                    })  
  37.                 },{  
  38.                    header: "学位", // 学位的标题  
  39.                    dataIndex: 'degree', // 对应于学位  
  40.                    width: 130,  
  41.                    editor: new Ext.form.ComboBox({ // 使用自定义的下拉框  
  42.                        typeAhead: true,  
  43.                        triggerAction: 'all',  
  44.                        transform:'degree', // 对应的下拉列表ID  
  45.                        lazyRender:true,  
  46.                        listClass: 'x-combo-list-small'  
  47.                     })  
  48.                 },{  
  49.                    header: "薪资(元)",  
  50.                    dataIndex: 'salary',  
  51.                    width: 70,  
  52.                    align: 'right', // 右对齐  
  53.                    editor: new fm.NumberField({ // 数字编辑框  
  54.                               decimalPrecision: 0, // 默认的小数点位数  
  55.                        allowBlank: false,  
  56.                        allowNegative: false, // 不允许为负数  
  57.                        maxValue: 100000 // 最大值为10万  
  58.                    })  
  59.                 },{  
  60.                    header: "出生日期",  
  61.                    dataIndex: 'birthday',  
  62.                    width: 95,  
  63.                    renderer: formatDate,  
  64.                    editor: new fm.DateField({ // 日期的编辑框  
  65.                         format: 'Y-m-d', // 格式  
  66.                         minValue: '1908-08-08'  
  67.                     })  
  68.                 },  
  69.                 checkColumn // 自定义的婚否列  
  70.             ]);  
  71.   
  72.   
  73.             // 默认列是可以排序的  
  74.             cm.defaultSortable = true;  
  75.   
  76.             // 创建数据源的记录,代表一个员工  
  77.             var Employee = Ext.data.Record.create([  
  78.                    // name对应着数据里面对应的标签，birthday例外，对应着birth  
  79.                    {name: 'name', type: 'string'},  
  80.                    {name: 'address', type: 'string'},  
  81.                    {name: 'degree'},  
  82.                    {name: 'salary', type: 'int'},  
  83.   
  84.                     // 日期自动转换  
  85.                    {name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},  
  86.                    {name: 'married', type: 'bool'}  
  87.               ]);  
  88.   
  89.   
  90.             // 创建数据集，读取员工数据  
  91.             var store = new Ext.data.Store({  
  92.                 // 使用HTTP协议获得  
  93.                 url: 'employees.xml',  
  94.   
  95.                 // the return will be XML, so lets set up a reader  
  96.                 // 返回的是一个XML数据，我们解析为我们定义的记录格式 Employee  
  97.                 reader: new Ext.data.XmlReader({  
  98.                        // 记录里面有个 "employee" 的标签  
  99.                        record: 'employee'  
  100.                    }, Employee),  
  101.   
  102.                 sortInfo:{field:'name', direction:'ASC'}  // 默认按照姓名正向排序  
  103.             });  
  104.   
  105.   
  106.             // 创建可编辑的 Grid  
  107.             var grid = new Ext.grid.EditorGridPanel({  
  108.                 store: store, // 指定数据源  
  109.                 cm: cm,  
  110.                 renderTo: 'editor-grid', // 目标的id位置  
  111.                 width:600,  
  112.                 height:300,  
  113.                 autoExpandColumn:'name',  // 默认自动扩展宽度的字段  
  114.                 title:'人员信息编辑',  // 标题  
  115.                 frame:true,  
  116.                 plugins:checkColumn,  
  117.                 clicksToEdit: 0, // 默认为双击编辑，如果为1则单击就编辑  
  118.   
  119.                 tbar: [{ // 顶部的工具栏 tools bar  
  120.                     text: '增加新员工',  
  121.                     handler : function(){  
  122.                         var p = new Employee({  
  123.                             name: '输入员工姓名',  
  124.                             degree: '学士',  
  125.                             salary: 0,  
  126.                             birthday: (new Date()).clearTime(),  
  127.                             married: false  
  128.                         });  
  129.                         grid.stopEditing();  
  130.                         store.insert(0, p);  
  131.                         grid.startEditing(0, 0);  
  132.                     }  
  133.                 }]  
  134.             });  
  135.   
  136.             // 装载数据  
  137.             store.load();  
  138.         });  
  139.   
  140.         Ext.grid.CheckColumn = function(config){  
  141.             Ext.apply(this, config);  
  142.             if(!this.id){  
  143.                 this.id = Ext.id();  
  144.             }  
  145.             thisthis.renderer = this.renderer.createDelegate(this);  
  146.         };  
  147.   
  148.         Ext.grid.CheckColumn.prototype ={  
  149.             init : function(grid){  
  150.                 this.grid = grid;  
  151.                 this.grid.on('render', function(){  
  152.                     var view = this.grid.getView();  
  153.                     view.mainBody.on('mousedown', this.onMouseDown, this);  
  154.                 }, this);  
  155.             },  
  156.   
  157.             onMouseDown : function(e, t){  
  158.                 if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){  
  159.                     e.stopEvent();  
  160.                     var index = this.grid.getView().findRowIndex(t);  
  161.                     var record = this.grid.store.getAt(index);  
  162.                     record.set(this.dataIndex, !record.data[this.dataIndex]);  
  163.                 }  
  164.             },  
  165.   
  166.             renderer : function(v, p, record){  
  167.                 p.css += ' x-grid3-check-col-td';  
  168.                 return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';  
  169.             }  
  170. };  
  171.     </script>  
  172. </head>  
  173. <body>  
  174. <h1>可编辑的 Grid</h1>  
  175. <!-- 自定义的数据下拉框 -->  
  176. <select name="degree" id="degree" style="display: none;">  
  177.         <option value="博士">博士</option>  
  178.         <option value="硕士">硕士</option>  
  179.         <option value="双学士">双学士</option>  
  180.         <option value="学士">学士</option>  
  181.         <option value="其它">其它</option>  
  182. </select>  
  183. <div id="editor-grid"></div>  
  184. </body>  
  185. </html>  


用到的 employees.xml
查看复制到剪切板打印
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <catalog>  
  3.   <employee>  
  4.     <name>张三</name>  
  5.     <address>天津市第一大街</address>  
  6.     <zone>4</zone>  
  7.     <degree>学士</degree>  
  8.     <salary>2440</salary>  
  9.   
  10.     <birth>03/15/2006</birth>  
  11.     <married>true</married>  
  12.   </employee>  
  13.   <employee>  
  14.     <name>李四</name>  
  15.     <address>北京市朝阳区</address>  
  16.     <zone>3</zone>  
  17.   
  18.     <degree>学士</degree>  
  19.     <salary>9370</salary>  
  20.     <birth>03/06/2006</birth>  
  21.     <married>true</married>  
  22.   </employee>  
  23.   <employee>  
  24.     <name>王五</name>  
  25.   
  26.     <address>上海浦东</address>  
  27.     <zone>4</zone>  
  28.     <degree>博士</degree>  
  29.     <salary>6810</salary>  
  30.     <birth>05/17/2006</birth>  
  31.     <married>false</married>  
  32.   
  33.   </employee>  
  34.   <employee>  
  35.     <name>赵六</name>  
  36.     <address>广州</address>  
  37.     <zone>4</zone>  
  38.     <degree>学士</degree>  
  39.     <salary>9900</salary>  
  40.   
  41.     <birth>03/06/2006</birth>  
  42.     <married>true</married>  
  43.   </employee>  
  44.   <employee>  
  45.     <name>孙武</name>  
  46.     <address>四川成都</address>  
  47.     <zone>3</zone>  
  48.   
  49.     <degree>学士</degree>  
  50.     <salary>6440</salary>  
  51.     <birth>01/20/2006</birth>  
  52.     <married>true</married>  
  53.   </employee>  
  54. </catalog>  


结论：
Extjs 确实不错。
淘宝家纺拍摄 淘宝家纺拍摄
原创粉丝点击
热门IT博客
php 文章置顶php 文章置顶
r2v软件r2v软件
网络优化电子书
农业税 知乎
歼-20知乎
江苏恩华三唑仑淘宝
机器人编程入门软件
河北煤改气 知乎
平面设计还有什么软件
windows snmp客户端
淘宝销售授权书
支付平台java架构师
大数据经济及其意义
搜一次CMS
淘宝可以改用户名吗
初学java看什么书
spring4 数据库配置
windows系统启动过程
tcss.ping.js
牛牛数据处理器c3.1
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 奇妙计谋五福星 奇思妙想五福星 五福星霸王花 五福社网址 李丽莎无光圣五福社 哪几肖为五福生肖 自发五禽戏动功 五离戏 五禽戏图解 江湖风云录五禽戏 五禽戏是哪五种动物 五禽戏的好处 华佗五禽戏口诀 五禽戏是谁发明的 正宗五禽戏图解 五禽戏口诀 五禽戏教学 五禽戏功效 五禽戏动作分解 传统华佗五禽戏 华佗五禽戏图解 五禽戏谱 五禽戏动功 五禽戏的作用 五禽戏图片 练五禽戏不能随便练 坚持练五禽戏三个月 坚持练五禽戏一年后 五禽戏口令mp3免费下载 五禽戏带口令mp3免费 五擒戏 禽敌拳的分解动作 种花英文 种花的好处 折纸花大全图解80种 作文种花让生活更美好 家里种杜鹃花吉利吗 种花使生活更美好作文 秋天可以种什么花 50种花式面包整形手法 翡翠花青种价格

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里