`
热带翎羽
  • 浏览: 63986 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

GRAILS集成EXTJS的Scaffolding实现

阅读更多
功能:根据Domain定义自动生成CRUD

效果图:

代码:
<% import grails.persistence.Event %><% import org.codehaus.groovy.grails.plugins.PluginManagerHolder %><%=packageName%>
<% boolean hasHibernate = PluginManagerHolder.pluginManager.hasGrailsPlugin('hibernate') %><%
    def output(p,cp)
    {
        if (p.type == String.class) {
            out << ",xtype: 'textfield'"
            if (cp.blank == false) {
                out << ", allowBlank: false, blankText: '\${cgDomainProperties.${p.name}.chinese}为必填项'" //,msgTarget: 'side'"
            }
            if (cp.maxSize != null) {
                out << ", maxLength: ${cp.maxSize}, maxLengthText: '\${cgDomainProperties.${p.name}.chinese}至多包含${cp.maxSize}个字符'"
            }
            if (cp.minSize != null) {
                out << ", minLength: ${cp.minSize}, minLengthText: '\${cgDomainProperties.${p.name}.chinese}至少包含${cp.minSize}个字符'"
            }
        } else if (p.type == Date.class) {
            out << "'datefield',format:'Y-m-d'"
        }
    }
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <g:extjs />
        <g:set var="entityName" value="\${cgDomainProperties.cgChinese}" />
        <title><g:message code="\${entityName}管理" /></title>
    </head>
    <script>
        Ext.onReady(function(){
            Ext.QuickTips.init();

            var ${domainClass.propertyName}CreateForm = new Ext.form.FormPanel({
                labelAlign: 'right',
                labelWidth: 80,
                frame: true,
                url: '/foundation/${domainClass.propertyName}/createJSON',
                defaultType: 'textfield',
                items: [
                    {fieldLabel:'id',name: 'id',xtype: 'numberfield',hidden:true,hideLabel:true},<%  excludedProps = Event.allEvents.toList() << 'version' << 'id' << 'dateCreated' << 'lastUpdated'
                    persistentPropNames = domainClass.persistentProperties*.name
                    props = domainClass.properties.findAll { persistentPropNames.contains(it.name) && !excludedProps.contains(it.name) }
                    Collections.sort(props, comparator.constructors[0].newInstance([domainClass] as Object[]))
                    display = true
                    props.eachWithIndex { p, i ->
                                if (!Collection.class.isAssignableFrom(p.type)) {
                                    if (hasHibernate) {
                                        cp = domainClass.constrainedProperties[p.name]
                                        display = (cp ? cp.display : true)
                                    }
                                    if (display) { %>
                    {fieldLabel: '\${cgDomainProperties.${p.name}.chinese}',name: '${p.name}'<%
                    output(p,cp)
                    %>}<% if(props.size()>i+1){out<<","} %><%  }   }   } %>
                ]
            });

            var ${domainClass.propertyName}CreateWin = new Ext.Window({
                el: '${domainClass.propertyName}CreateWin',
                closable:false,
                layout: 'fit',
                width: 400,
                title: '创建\${entityName}',
                height: 300,
                closeAction: 'hide',
                items: [${domainClass.propertyName}CreateForm],
                buttons: [{
                    text:'创建',
                    handler: function(){
                        ${domainClass.propertyName}CreateForm.getForm().submit({
                            success:function(${domainClass.propertyName}CreateForm, action){
                                Ext.foundation.msg('信息', action.result.msg);
                                ${domainClass.propertyName}CreateWin.hide();
                                store.reload();
                                },
                            failure:function(){
                                Ext.foundation.msg('错误', "创建\${entityName}失败!");
                            }
                        });
                    }
                },{
                    text: '取 消',
                    handler: function(){
                        ${domainClass.propertyName}CreateWin.hide();
                    }
                }]
            });

            var ${domainClass.propertyName}UpdateForm = new Ext.form.FormPanel({
                labelAlign: 'right',
                labelWidth: 80,
                frame: true,
                url: '/foundation/${domainClass.propertyName}/updateJSON',
                defaultType: 'textfield',
                items: [
                    {fieldLabel:'id',name: 'id',xtype: 'numberfield',hidden:true,hideLabel:true},<%  excludedProps = Event.allEvents.toList() << 'version' << 'id' << 'dateCreated' << 'lastUpdated'
                    persistentPropNames = domainClass.persistentProperties*.name
                    props = domainClass.properties.findAll { persistentPropNames.contains(it.name) && !excludedProps.contains(it.name) }
                    Collections.sort(props, comparator.constructors[0].newInstance([domainClass] as Object[]))
                    display = true
                    props.eachWithIndex { p, i ->
                                if (!Collection.class.isAssignableFrom(p.type)) {
                                    if (hasHibernate) {
                                        cp = domainClass.constrainedProperties[p.name]
                                        display = (cp ? cp.display : true)
                                    }
                                    if (display) { %>
                    {fieldLabel: '\${cgDomainProperties.${p.name}.chinese}',name: '${p.name}',xtype: <% if(p.type==String.class){ out << "'textfield'"} else if(p.type==Date.class){ out << "'datefield',format:'Y-m-d'"}%>}<% if(props.size()>i+1){out<<","} %><%  }   }   } %>
                ]
            });

            var ${domainClass.propertyName}UpdateWin = new Ext.Window({
                el: '${domainClass.propertyName}UpdateWin',
                closable:false,
                layout: 'fit',
                width: 400,
                title: '修改\${entityName}',
                height: 300,
                closeAction: 'hide',
                items: [${domainClass.propertyName}UpdateForm],
                buttons: [{
                    text:'更新',
                    handler: function(){
                        ${domainClass.propertyName}UpdateForm.getForm().submit({
                            success:function(${domainClass.propertyName}UpdateForm, action){
                                Ext.foundation.msg('信息', action.result.msg);
                                ${domainClass.propertyName}UpdateWin.hide();
                                store.reload();
                                },
                            failure:function(){
                                Ext.foundation.msg('错误', "更新\${entityName}失败!");
                            }
                        });
                    }
                },{
                    text: '取 消',
                    handler: function(){
                        ${domainClass.propertyName}UpdateWin.hide();
                    }
                }]
            });

            var ${domainClass.propertyName}DetailForm = new Ext.form.FormPanel({
                labelAlign: 'right',
                labelWidth: 80,
                frame: true,
                url: '/foundation/${domainClass.propertyName}/detailJSON',
                defaultType: 'textfield',
                items: [
                    {fieldLabel:'id',name: 'id',xtype: 'numberfield',hidden:true,hideLabel:true},<%  excludedProps = Event.allEvents.toList() << 'version' << 'id'
                    persistentPropNames = domainClass.persistentProperties*.name
                    props = domainClass.properties.findAll { persistentPropNames.contains(it.name) && !excludedProps.contains(it.name) }
                    Collections.sort(props, comparator.constructors[0].newInstance([domainClass] as Object[]))
                    display = true
                    props.eachWithIndex { p, i ->
                                if (!Collection.class.isAssignableFrom(p.type)) {
                                    if (hasHibernate) {
                                        cp = domainClass.constrainedProperties[p.name]
                                        display = (cp ? cp.display : true)
                                    }
                                    if (display) { %>
                    {fieldLabel: '\${cgDomainProperties.${p.name}.chinese}',name: '${p.name}',readOnly: true, xtype: <% if(p.type==String.class){ out << "'textfield'"} else if(p.type==Date.class){ out << "'datefield',format:'Y-m-d'"}%>}<% if(props.size()>i+1){out<<","} %><%  }   }   } %>
                ]
            });

            var ${domainClass.propertyName}DetailWin = new Ext.Window({
                el: '${domainClass.propertyName}DetailWin',
                closable:false,
                layout: 'fit',
                width: 400,
                title: '\${entityName}明细',
                height: 300,
                closeAction: 'hide',
                items: [${domainClass.propertyName}DetailForm],
                buttons: [{
                    text: '确定',
                    handler: function(){
                        ${domainClass.propertyName}DetailWin.hide();
                    }
                }]
            });

            var tb = new Ext.Toolbar();
            tb.render('toolbar');

            tb.add({
                text: '新建',
                icon: '/foundation/images/skin/database_add.png',
                handler:function(){
                    ${domainClass.propertyName}CreateWin.show(this);
                }
            },{
                text: '修改',
                icon: '/foundation/images/skin/database_edit.png',
                handler: function(){
                    var id = (grid.getSelectionModel().getSelected()).id;
                    ${domainClass.propertyName}UpdateForm.getForm().load({
                        url:'/foundation/${domainClass.propertyName}/detailJSON?id='+id,
                        success:function(form,action){},
                        failure:function(){
                            Ext.foundation.msg('错误', "服务器出现错误,稍后再试!");
                        }
                    });

                    customerUpdateWin.show();
                }
            },{
                text: '删除',
                icon: '/foundation/images/skin/database_delete.png',
                handler: function(){
                    var count=sm.getCount();
                    if(count==0)
                    {
                        Ext.foundation.msg('注意', "请选择要删除的记录");
                    }else {
                        var records = sm.getSelections();
                        var id=[];
                        for(var i=0;i<count;i++)
                        {
                            id.push(records[i].id);
                        }
                        Ext.MessageBox.confirm('信息', '您确定删除' + id + '记录?', function(btn) {
                            if (btn == 'yes') {
                                Ext.Ajax.request({
                                    url: '/foundation/${domainClass.propertyName}/deleteJSON',
                                    params: {id:id},
                                    success: function(result) {
                                        var json_str = Ext.util.JSON.decode(result.responseText);
                                        //Ext.foundation.msg('信息', json_str.msg);
                                        MessageShow('信息',json_str.msg);
                                        store.reload();
                                    },
                                    failure:function() {
                                        Ext.foundation.msg('错误', '服务器出现错误,稍后再试!');
                                    }
                                });
                            }
                        });

                    }
                }
            },{
                text: '详细',
                icon: '/foundation/images/skin/database_save.png',
                handler: function(){
                    var id = (grid.getSelectionModel().getSelected()).id;
                    ${domainClass.propertyName}DetailForm.getForm().load({
                        url:'/foundation/${domainClass.propertyName}/detailJSON?id='+id,
                        success:function(form,action){},
                        failure:function(){
                            Ext.foundation.msg('错误', '服务器出现错误,稍后再试!');
                        }
                    });
                    customerDetailWin.show();
                }
            },'->',
            {
                xtype: 'textfield',
                name: 'searchBar',
                emptyText: '请输入搜索条件'
            },{
                text: '搜索',
                icon: '/foundation/images/skin/database_search.png',
                handler: function(){
                }
            }
            );

            tb.doLayout();

            var sm= new Ext.grid.CheckboxSelectionModel()
            var cm = new Ext.grid.ColumnModel([
            sm,<%  excludedProps = Event.allEvents.toList() << 'version'
            allowedNames = domainClass.persistentProperties*.name << 'id' << 'dateCreated' << 'lastUpdated'
            props = domainClass.properties.findAll { allowedNames.contains(it.name) && !excludedProps.contains(it.name) && !Collection.isAssignableFrom(it.type) }
            Collections.sort(props, comparator.constructors[0].newInstance([domainClass] as Object[]))
            props.eachWithIndex { p, i ->
                if (i < 10) {
                    if (p.isAssociation()) { %><%      } else { %>
                {header:'\${cgDomainProperties.${p.name}.chinese}',dataIndex:'${p.name}'} <% if(props.size()>i+1){out<<","} %><%  }   }   } %>
            ]);

            var store= new Ext.data.Store({
                autoLoad:true,
                proxy: new Ext.data.HttpProxy({url:'/foundation/${domainClass.propertyName}/listJSON'}),
                reader: new Ext.data.JsonReader({
                    totalProperty:'total',
                    root:'root'
                },[<%  props.eachWithIndex { p, i ->
                                if (i < 10) {
                                    if (p.isAssociation()) { %><%      } else { %>
                    {name:'${p.name}'}<% if(props.size()>i+1){out<<","} %><%  }   }   } %>
                ])
            });

            var grid= new Ext.grid.GridPanel({
                renderTo: 'grid',
                store: store,
                enableColumnMove:false,
                enableColumnResize:true,
                stripeRows:true,
                enableHdMenu: false,
                trackMouseOver: true,
                loadMask:true,
                cm: cm,
                sm: sm,
                height: 270,
                viewConfig: {
                    forceFit:true
                },

                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: store,
                    displayInfo: true,
                    displayMsg: '显示第{0}条到第{1}条记录, 共{2}条',
                    emptyMsg: '没有记录'
                })
            });

            store.load({params:{start:0,limit:10}});

            var window = new Ext.Window({
                // contentEl : Ext.getBody(),
                id: 'msgWindow',
                width : 200,
                height : 150,
                shadow : false,
                html : "试试试试...",
                title : "温馨提示:"
            });

            function show() {
                this.el.alignTo(Ext.getBody(), 't');
                this.el.slideIn('t', {
                    easing : 'easeOut',
                    callback : function() {
                        this.close.defer(1000, this); //定时关闭窗口
                    },
                    scope : this,
                    duration : 1
                });

            }

            function hide() {
                if (this.isClose === true) { //防止点击关闭和定时关闭处理
                    return false;
                }
                this.isClose = true;
                this.el.slideOut('t', {
                    easing : 'easeOut',
                    callback : function() {
                        this.un('beforeclose', hide, this);
                        this.close();
                    },
                    scope : this,
                    duration : 1
                });
                return false;
            }

            window.on('show', show, window);
            window.on('beforeclose', hide, window)
            //window.show();

            function MessageShow(title, content)
            {
                var win = Ext.getCmp('msgWindow');
                win.setTitle(title);
                //win.html=content;

                win.show();
            }
        });
    </script>
    <body>
        <div id="toolbar"></div>
        <div id="grid"></div>
        <div id="${domainClass.propertyName}CreateWin"></div>
        <div id="${domainClass.propertyName}UpdateWin"></div>
        <div id="${domainClass.propertyName}DetailWin"></div>
    </body>
</html>
  • 大小: 48 KB
2
0
分享到:
评论

相关推荐

    Grails自定义scaffolding模板

    **Grails自定义scaffolding模板** 在Grails框架中,scaffolding是一种快速开发工具,它能够自动为数据模型生成基本的CRUD(创建、读取、更新、删除)操作界面,极大地提高了开发效率。然而,Grails的默认...

    Grails Jquery 集成代码

    在开发Web应用时,将Grails(一个基于Groovy语言的开源全栈式Web应用框架)与JQuery(一个轻量级、高性能的JavaScript库)集成可以极大地提升用户体验和开发效率。下面我们将深入探讨如何在Grails项目中整合JQuery,...

    Grails 下拉框联动最优实现

    "Grails下拉框联动最优实现"这个主题聚焦于如何在Grails应用中优雅地实现下拉框(Dropdown)的联动效果,这种效果常见于表单中,例如一个下拉框的选择会动态更新另一个下拉框的选项。 下拉框联动的核心是前端的交互...

    grails 文档

    Grails 提供了内置的测试框架,支持单元测试、服务测试和浏览器模拟的集成测试,便于进行TDD(测试驱动开发)。 9. **Grails 动态方法** Grails 的动态方法如`save()`, `delete()`, `update()`等,使得数据操作...

    Grails中集成GWT中文资料

    【Grails中集成GWT】知识点详解 在Web应用开发中,Grails是一个基于Groovy语言的开源框架,而Google Web Toolkit (GWT)则是一个用于构建和优化复杂JavaScript前端应用的开发工具。将这两者结合,可以让开发者利用...

    grails ckeditor 0.4修改支持flv插入

    - `CkeditorGrailsPlugin.groovy` - 这是Grails插件的核心文件,很可能包含了CKEditor与Grails集成的逻辑,包括初始化、配置以及扩展功能的定义。 - `application.properties` - 应用的配置文件,可能包含有关...

    grails实现分页技术

    在Grails这个基于Groovy的敏捷开发框架中,实现分页功能对于任何Web应用程序都是至关重要的,特别是当处理大量数据时。Grails提供了一些内置的支持,但如果你需要在自定义的控制器和视图中实现分页,那么就需要遵循...

    grails jobs 定时任务 项目demo

    grails jobs 定时任务 项目demo

    grails开发

    例如,`spring-security-core`插件用于安全控制,`grails-spring-websocket`插件实现WebSocket支持等。 6. **命令行工具** Grails的命令行工具提供了丰富的命令,如创建新项目、生成领域类、运行测试等,极大提高...

    使用 Grails 快速开发 Web 应用程序

    同时,由于Groovy运行在Java虚拟机(JVM)上,Grails应用可无缝集成Java平台,利用Java的成熟库和应用服务器,确保了系统的稳定性和扩展性。 Grails遵循经典的MVC设计模式,其组件包括: 1. **Domain Class**:...

    Grails权威指南 Grails权威指南

    10. **持续集成与部署**:Grails与常见的CI/CD工具如Jenkins、GitLab CI/CD等良好集成,方便自动化部署和持续集成。 通过《Grails权威指南》,你可以学习到如何利用Grails的强大功能来开发高效、可扩展的Web应用,...

    GWTGrailsTutorial 实面gwt和grails groovy集成

    在本文中,我们将深入探讨如何将Google Web Toolkit (GWT) 集成到Grails框架中,构建一个使用Groovy语言的Web应用程序。GWTGrails教程将引导你完成这个过程,首先确保你的系统已经准备好运行Grails和GWT。 ### 准备...

    grails-1.3.0.RC2

    10. **Scaffolding**:Grails 的快速原型功能(scaffolding)能自动生成基本的CRUD界面,帮助开发者快速搭建应用的基础结构。 在研究 `grails-1.3.0.RC2` 源代码时,开发者可以深入了解Grails框架的架构,学习如何...

    Grails Grails Grails

    2. **视图(View)**: 视图负责展示数据,通常使用GSP(Grails Server Pages)技术,这是一种结合了HTML和Groovy的模板语言,可以嵌入Groovy表达式和控制结构,实现动态内容的生成。 3. **控制器(Controller)**: ...

    mongodb-grails:集成了MongoDB的Grails插件

    MongoDB Grails插件 MongoDB Grails插件主要作为称为“ mongo”的Spring bean公开给Grails应用程序。 然后,只需添加“ mongo”,Grails类就可以轻松地在整个代码中使用它。 支持依赖注入(域/控制器/服务)的类的...

    grails-用户手册

    GORM是Grails的持久化框架,它实现了Hibernate和ActiveRecord的功能,使得与数据库的交互变得简单。通过定义领域类,你可以轻松地完成CRUD(创建、读取、更新、删除)操作。 五、Grails插件系统 Grails的插件系统...

    Grails权威指南.pdf

    - **Scaffolding**:Grails提供快速生成基础CRUD操作的模板代码,加速应用开发。 - **Plugins**:Grails插件系统允许开发者复用和扩展功能,如安全、缓存、邮件服务等。 - **配置管理**:通过`grails-app/conf/`...

    the definitive guide to grails 2

    Grails框架提供了强大的集成和依赖管理功能,支持与各种外部系统和服务的集成,如邮件发送、社交媒体和支付网关等。同时,它也提供了依赖管理工具,使得开发者可以轻松地引入和管理第三方库和框架。 #### Plug-ins...

    grails中文入门简介

    Grails是一个基于Groovy语言的全栈框架,它遵循约定优于配置的原则,并且紧密集成Spring和Hibernate等流行的Java库,简化了开发流程。Grails在IT行业中尤其受到重视,因为它能够帮助开发者快速搭建并部署基于MVC模式...

    grails-2.4.4.zip

    这个压缩包“grails-2.4.4.zip”包含了完整的Grails 2.4.4版本,使得开发者可以直接将其集成到IDE中,快速地开始项目开发工作。 1. **Grails框架概述** Grails 是一个遵循MVC(模型-视图-控制器)架构模式的全栈...

Global site tag (gtag.js) - Google Analytics