现在的位置: 首页 > 综合 > 正文

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

2013年09月04日 ⁄ 综合 ⁄ 共 7342字 ⁄ 字号 小 中 大 ⁄ 评论关闭
原文地址：http://www.java2000.net/p8972

先看看运行效果


html源代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" c>
  4. <title>Editor Grid Example</title>
  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();
  13.                 // 日期格式化
  14.             function formatDate(value){
  15.                 return value ? value.dateFormat('Y年m月d日') : '';
  16.             };
  17.             // shorthand alias
  18.             var fm = Ext.form;
  20.             // 自定义的字段
  21.             var checkColumn = new Ext.grid.CheckColumn({
  22.                header: "婚否?",
  23.                dataIndex: 'married',
  24.                width: 55
  25.             });
  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.             ]);
  73.             // 默认列是可以排序的
  74.             cm.defaultSortable = true;
  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'},
  84.                     // 日期自动转换
  85.                    {name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},
  86.                    {name: 'married', type: 'bool'}
  87.               ]);
  90.             // 创建数据集，读取员工数据
  91.             var store = new Ext.data.Store({
  92.                 // 使用HTTP协议获得
  93.                 url: 'employees.xml',
  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),
  102.                 sortInfo:{field:'name', direction:'ASC'}  // 默认按照姓名正向排序
  103.             });
  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则单击就编辑
  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.             });
  136.             // 装载数据
  137.             store.load();
  138.         });
  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.         };
  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.             },
  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.             },
  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>
  10.     <birth>03/15/2006</birth>
  11.     <married>true</married>
  12.   </employee>
  13.   <employee>
  14.     <name>李四</name>
  15.     <address>北京市朝阳区</address>
  16.     <zone>3</zone>
  18.     <degree>学士</degree>
  19.     <salary>9370</salary>
  20.     <birth>03/06/2006</birth>
  21.     <married>true</married>
  22.   </employee>
  23.   <employee>
  24.     <name>王五</name>
  26.     <address>上海浦东</address>
  27.     <zone>4</zone>
  28.     <degree>博士</degree>
  29.     <salary>6810</salary>
  30.     <birth>05/17/2006</birth>
  31.     <married>false</married>
  33.   </employee>
  34.   <employee>
  35.     <name>赵六</name>
  36.     <address>广州</address>
  37.     <zone>4</zone>
  38.     <degree>学士</degree>
  39.     <salary>9900</salary>
  41.     <birth>03/06/2006</birth>
  42.     <married>true</married>
  43.   </employee>
  44.   <employee>
  45.     <name>孙武</name>
  46.     <address>四川成都</address>
  47.     <zone>3</zone>
  49.     <degree>学士</degree>
  50.     <salary>6440</salary>
  51.     <birth>01/20/2006</birth>
  52.     <married>true</married>
  53.   </employee>
  54. </catalog>

结论：
Extjs 确实不错。

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞