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>