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

公告

原文地址：http://www.java2000.net/p8972

先看看运行效果

html源代码

<html>
<head>
<meta http-equiv="Content-Type" c>
<title>Editor Grid Example</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(){
            Ext.QuickTips.init();
                // 日期格式化
            function formatDate(value){
                return value ? value.dateFormat('Y年m月d日') : '';
            };
            // shorthand alias
            var fm = Ext.form;
            // 自定义的字段
            var checkColumn = new Ext.grid.CheckColumn({
               header: "婚否?",
               dataIndex: 'married',
               width: 55
            });
            // 列数据的模型
            // dataIndex 对应着数据里面的字段
            var cm = new Ext.grid.ColumnModel([{
                   id:'name', // 数据模型的唯一编号
                   header: "姓名", // 标题
                   dataIndex: 'name', // 对应于数据源里面的字段
                   width: 220, // 宽度
                   editor: new fm.TextField({ // 编辑的类型
                       allowBlank: false // 不允许为空，如果为空，则会显示红色波浪线警告且恢复原始数值
                   })
                },{
                   header: "学位", // 学位的标题
                   dataIndex: 'degree', // 对应于学位
                   width: 130,
                   editor: new Ext.form.ComboBox({ // 使用自定义的下拉框
                       typeAhead: true,
                       triggerAction: 'all',
                       transform:'degree', // 对应的下拉列表ID
                       lazyRender:true,
                       listClass: 'x-combo-list-small'
                    })
                },{
                   header: "薪资(元)",
                   dataIndex: 'salary',
                   width: 70,
                   align: 'right', // 右对齐
                   editor: new fm.NumberField({ // 数字编辑框
                              decimalPrecision: 0, // 默认的小数点位数
                       allowBlank: false,
                       allowNegative: false, // 不允许为负数
                       maxValue: 100000 // 最大值为10万
                   })
                },{
                   header: "出生日期",
                   dataIndex: 'birthday',
                   width: 95,
                   renderer: formatDate,
                   editor: new fm.DateField({ // 日期的编辑框
                        format: 'Y-m-d', // 格式
                        minValue: '1908-08-08'
                    })
                },
                checkColumn // 自定义的婚否列
            ]);
            // 默认列是可以排序的
            cm.defaultSortable = true;
            // 创建数据源的记录,代表一个员工
            var Employee = Ext.data.Record.create([
                   // name对应着数据里面对应的标签，birthday例外，对应着birth
                   {name: 'name', type: 'string'},
                   {name: 'address', type: 'string'},
                   {name: 'degree'},
                   {name: 'salary', type: 'int'},
                    // 日期自动转换
                   {name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},
                   {name: 'married', type: 'bool'}
              ]);
            // 创建数据集，读取员工数据
            var store = new Ext.data.Store({
                // 使用HTTP协议获得
                url: 'employees.xml',
                // the return will be XML, so lets set up a reader
                // 返回的是一个XML数据，我们解析为我们定义的记录格式 Employee
                reader: new Ext.data.XmlReader({
                       // 记录里面有个 "employee" 的标签
                       record: 'employee'
                   }, Employee),
                sortInfo:{field:'name', direction:'ASC'}  // 默认按照姓名正向排序
            });
            // 创建可编辑的 Grid
            var grid = new Ext.grid.EditorGridPanel({
                store: store, // 指定数据源
                cm: cm,
                renderTo: 'editor-grid', // 目标的id位置
                width:600,
                height:300,
                autoExpandColumn:'name',  // 默认自动扩展宽度的字段
                title:'人员信息编辑',  // 标题
                frame:true,
                plugins:checkColumn,
                clicksToEdit: 0, // 默认为双击编辑，如果为1则单击就编辑
                tbar: [{ // 顶部的工具栏 tools bar
                    text: '增加新员工',
                    handler : function(){
                        var p = new Employee({
                            name: '输入员工姓名',
                            degree: '学士',
                            salary: 0,
                            birthday: (new Date()).clearTime(),
                            married: false
                        });
                        grid.stopEditing();
                        store.insert(0, p);
                        grid.startEditing(0, 0);
                    }
                }]
            });
            // 装载数据
            store.load();
        });
        Ext.grid.CheckColumn = function(config){
            Ext.apply(this, config);
            if(!this.id){
                this.id = Ext.id();
            }
            thisthis.renderer = this.renderer.createDelegate(this);
        };
        Ext.grid.CheckColumn.prototype ={
            init : function(grid){
                this.grid = grid;
                this.grid.on('render', function(){
                    var view = this.grid.getView();
                    view.mainBody.on('mousedown', this.onMouseDown, this);
                }, this);
            },
            onMouseDown : function(e, t){
                if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                    e.stopEvent();
                    var index = this.grid.getView().findRowIndex(t);
                    var record = this.grid.store.getAt(index);
                    record.set(this.dataIndex, !record.data[this.dataIndex]);
                }
            },
            renderer : function(v, p, record){
                p.css += ' x-grid3-check-col-td';
                return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
            }
};
    </script>
</head>
<body>
<h1>可编辑的 Grid</h1>
<!-- 自定义的数据下拉框 -->
<select name="degree" id="degree" style="display: none;">
        <option value="博士">博士</option>
        <option value="硕士">硕士</option>
        <option value="双学士">双学士</option>
        <option value="学士">学士</option>
        <option value="其它">其它</option>
</select>
<div id="editor-grid"></div>
</body>
</html>

用到的 employees.xml

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <employee>
    <name>张三</name>
    <address>天津市第一大街</address>
    <zone>4</zone>
    <degree>学士</degree>
    <salary>2440</salary>
    <birth>03/15/2006</birth>
    <married>true</married>
  </employee>
  <employee>
    <name>李四</name>
    <address>北京市朝阳区</address>
    <zone>3</zone>
    <degree>学士</degree>
    <salary>9370</salary>
    <birth>03/06/2006</birth>
    <married>true</married>
  </employee>
  <employee>
    <name>王五</name>
    <address>上海浦东</address>
    <zone>4</zone>
    <degree>博士</degree>
    <salary>6810</salary>
    <birth>05/17/2006</birth>
    <married>false</married>
  </employee>
  <employee>
    <name>赵六</name>
    <address>广州</address>
    <zone>4</zone>
    <degree>学士</degree>
    <salary>9900</salary>
    <birth>03/06/2006</birth>
    <married>true</married>
  </employee>
  <employee>
    <name>孙武</name>
    <address>四川成都</address>
    <zone>3</zone>
    <degree>学士</degree>
    <salary>6440</salary>
    <birth>01/20/2006</birth>
    <married>true</married>
  </employee>
</catalog>

结论：
Extjs 确实不错。

posted on 2008-09-04 14:16 啊凡阅读(657) 评论(0) 收藏举报

刷新页面返回顶部