用户操作
[即时聊天] [发私信] [加为好友]
汪立ID：lee576
共216151次访问，排名341，好友187人，关注者181人。
积累是一个漫长的过程,它足以可以让你写出N本书的内容
lee576的文章
原创 669 篇
翻译 4 篇
转载 447 篇
评论 49 篇
汪立的公告
Matrix的世界,一切皆有可能
最近评论
sophiazhou：比较实用
wdy_20081104：您好 ，我现在也遇到你的这个问题 。也是按照你记在的这种方式去处理的，但是没有起作用。能否帮助解释一下，或者帮忙看看还有其他什么方式可以解决。
谢谢
l2h1998：作一个广告：急招兼职Telerik R.A.D.Control有经验的.Net高手，或没有经验，但有其它控件集成经验，.Net水平不错者。13818992669-668 联系。上海外地皆可，空闲时间有保障者。应聘者需要有天赋，我们的应用相对比较复杂。
l2h1998：作一个广告：急招兼职Telerik R.A.D.Control有经验的.Net高手，或没有经验，但有其它控件集成经验，.Net水平不错者。13818992669-668 联系。上海外地皆可，空闲时间有保障者。应聘者需要有天赋，我们的应用相对比较复杂。
ggmmshishi：有没有新的不同的方法啊！
全都是这篇文章！
都是转载！唉！
文章分类
收藏
    相册
    跳伞
    存档
    软件项目交易
    订阅我的博客
    XML聚合  FeedSky
    订阅到鲜果
    订阅到Google
    订阅到抓虾
    订阅到BlogLines
    订阅到Yahoo
    订阅到GouGou
    订阅到飞鸽
    订阅到Rojo
    订阅到newsgator
    订阅到netvibes

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

    新一篇: 图片中央覆盖文字 | 旧一篇: JavaScript接收QueryString参数

     原文地址: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 确实不错。

    发表于 @ 2008年09月03日 21:17:00|评论(loading...)|编辑|收藏

    新一篇: 图片中央覆盖文字 | 旧一篇: JavaScript接收QueryString参数

    评论：没有评论。
    发表评论  


    当前用户设置只有注册用户才能发表评论。如果你没有登录，请点击登录
    Csdn Blog version 3.1a
    Copyright © 汪立