posts - 35,  comments - 4,  trackbacks - 1
公告
  2008年9月4日
Ext2.2-用XML做数据源,可编辑Grid的例子
原文地址：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 确实不错。
posted @ 2008-09-04 14:16 啊凡 阅读(425) 评论(0) 编辑
如何让PowerDesigner支持自动生成含SQL Server 2000的表和列注释的角本

转摘于:http://www.blogjava.net/liaojiyong/archive/2006/10/10/74245.html

如何让PowerDesigner支持自动生成含SQL Server 2000的表和列注释的角本

PowerDesigner是Sybase公司著名的产品，我从16-bit的Windows开始，就接触并使用这个工具，应该说是有很深的感情。PowerDesigner是DBA和软件架构师设计的利器，随着版本的不断升级，PowerDesigner提供了更多更强大的功能。仅以本篇为开始，向大家介绍一些PowerDesinger中的使用技巧，帮助大家更好地更有效率地使用这个CASE工具。

问题的提出

我曾经在很多网上看到有朋友问起，在 PowerDesigner 的 Physical Model design 中，除了 Oracle 外，选择其他数据库模型，最后生成建数据库脚本的时候，不会自动生成记录表和列注释信息的数据库脚本代码。

请允许我先解释一下这个问题的概念，我们通过 PowerDesigner 设计 oracle 数据库，最后得到的脚本可以像下面这样，其中的 comment 语句就是我上面指出的在 oracle 中保存注释信息的脚本语句，在 oracle 中执行后，可以通过查询 oracle 的数据字典得到这些信息。这样做的好处是，以后查看表结构比较方便，不需要从数据库文档资料中去寻找了，对于团队开发来说，有应用的意义。

 

/*===============================================*/

/* Table: EMP                                                   */

/*==============================================*/

create table EMP (

   "EmpID"              NUMBER,

   "EmpName"            VARCHAR2(50),

   SEX                  CHAR(1)

)

/

comment on table EMP is ' 职员信息 '

/

comment on column EMP."EmpID" is ' 职员编号 '

/

comment on column EMP."EmpName" is ' 职员姓名 '

/

comment on column EMP.SEX is ' 性别  F: 女  M: 男 '

/

SQL Server 也有这样的语句，但是，大家往往发现选择了数据库模型是 SQL Server ，在自动生成建库脚本的时候，即使你选上了生成 comment 语句的选项， powerdesigner 也不会帮你自动生成，是 PowerDesigner 不支持 SQL Server 么，答案显然是否定的。

问题的解决

PowerDesigner 这个工具可以支持任何一种关系型数据库的模型设计，因为，在 PowerDesigner 中每一种数据库模型的特性定义都存储在一个 xdb 文件中，我们可以在 [PowerDesigner_Install_Home]/Resource Files/DBMS 下可以找到。当然，我们也可以自己创建一个新的 xdb ，定义好我们想支持的数据库模型的特性。明白了这一点，这个问题的答案就显而易见。

下面我就简单地说明一下，我使用的是 PowerDesinger9.5 企业版。 Sybase 有些简化版本 ( 如 SQL Moduler) 就不能自定义 xdb ，请大家注意。

1 从菜单 TOOLS->RESOUCES->DBMS ，进入自定义数据模型，参见图 1 。

 

PBlock>ASPectratio="t" v:ext="edit">

图1

2 PowerDesigner弹出一个对话框，列表框中列出了当前PowerDesigner支持的

数据库模型（图2）。我们选择创建一个新的。输入名字SQL SERVER 2000(EXTENDED)，选择从现有的SQL SERVER 2000复制，这样SQL SERVER 2000(EXTENDED)就包含了原来SQL SERVER2000模型拥有的所有特征（图3）。

                        图2

 

 

                       图3

3 接下来，我们就需要为SQL Server 2000(Extended)添加支持自动生成表和列注释代码的特性。PowerDesinger把定义的特性用树状结构组织了起来(图4)，本篇要做的工作就是定义Script代码特征。我们需要修改Script"Objects"Table"TableComment和Script"Objects"Column"ColumnComment中的脚本特征代码。

4 SQL Server 2000在数据库中保存表和列注释是通过调用系统存储过程sp_addextendedproperty来做的。那么我们只需要，分别写上

 

表级的注释代码是：
EXECUTE sp_addextendedproperty N'MS_Description', N'%COMMENT%', N'user', N'%OWNER%', N'table', N'%TABLE%', NULL, NULL

列级的注释代码是
EXECUTE sp_addextendedproperty N'MS_Description', N'%COMMENT%', N'user', N'%OWNER%', N'table', N'%TABLE%', N'column', N'%COLUMN%'

大家看看这些代码，立刻就明白是怎么回事了(图5)。%COMMENT%之类的就是相当于替换变量，PowerDesigner在生成脚本的时候自动替换设计模型中替换变量的值。

 

图4

 

图5

5 保存SQL Server 2000(Extended)成一个xdb文件。

6 现在，我们可以创建一个新的Physical Data Model了，数据库模型选SQL Server 2000(Extended)。建立一个表，需要提醒的是，一定要指定一个数据库使用者，一般用dbo（图6）。我们可以为表和列都添加上注释。

 

图6

7 生成建库脚本，菜单Databases->Generate Database。在图7所示的对话框中，注意要选中comment选项。点击确定，就得到最终的建库脚本。打开看看，我们看到了PowerDesinger根据我们告诉它的规则生成了对应的代码

 

…

EXECUTE sp_addextendedproperty N'MS_Description', N'雇员信息', N'user', N'dbo', N'table', N'Employee', NULL, NULL

go

EXECUTE sp_addextendedproperty N'MS_Description', N'主键ID,自动增加', N'user', N'dbo', N'table', N'Employee', N'column', N'EmployeeID'

go

….

8 我们在SQL Server 2000中执行这个角本，然后通过EntERPrise Manager可以看到这些注释。

 

 

图7

 

 

图8

小结

通过这个实践，我们可以了解PowerDesigner是如何处理不同数据库的SQL语法差异的，这和我们开发应用中的参数文件的思路基本一致。同时，我们也应该认识到，PowerDesinger的功能还是比较多和复杂的，只有熟悉这个工具的功能使用，才能真真提高生产效率

posted @ 2008-09-04 14:11 啊凡 阅读(28) 评论(0) 编辑
Powered by:
博客园
Copyright ©2012 啊凡