我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Ext 复杂Form布局

<HTML>
 
<HEAD>
  
<TITLE> New Document </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 LANGUAGE="JavaScript">
  
<!--
       
/*
        *   msgTarget的几种配置    
        *    qtip         当光标停留在域上时显示一个快速提示
            title        显示一个默认的浏览标题属性弹出
            under        增加一个空div在域下面并显示错误信息
            side         增加一个错误图标在域右边,鼠标悬停时显示错误信息
       
*/

        Ext.onReady(
function()
        
{
            
//初始化快速提示
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget 
= 'qtip';
                
            
var bd = Ext.getBody();
            
            bd.createChild(
{
                tag : 'h3',
                html: 'Form中的复杂编辑器'
            }
);

            
var form = new Ext.FormPanel({
                
                labelAlign : 'top',
                title : 'Inner Tabs',
                bodyStyle : 'padding : 5px',
                width : 
600,
                frame : 
true,
                onSubmit: Ext.emptyFn,
                submit: 
function() {
                    
this.getForm().getEl().dom.submit();
                }
,
                
                items : [
                    
{
                        layout : 'column',
                        border : 
false,
                        items : 
                        [
                            
{
                                columnWidth : .
5,
                                layout : 'form',
                                border : 
false,
                                items:[
{
                                    xtype : 'textfield',
                                    allowBlank : 
false,
                                    blankText : '名字不能为空',
                                    fieldLabel : '名',
                                    name : 'first',
                                    anchor : '
95%//上级容器宽度的百分比,即此控件的宽度
                                }
,
                                
{
                                    xtype : 'textfield',
                                    minLength : 
3,
                                    maxLength : 
5,
                                    minLengthText : '公司长度不能小于3',
                                    maxLengthText : '公司长度不能大于5',
                                    fieldLabel : '公司',
                                    name : 'company',
                                    anchor : '
95%'
                                }
]
                            }

                        ]
                    }
,
                    
{
                        columnWidth : .
5,
                        layout : 'form',
                        border : 
false,
                        items : [
                        
{
                            xtype : 'textfield',
                            fieldLabel : '地址',
                            maxLength : 
50,
                            maxLengthText : '地址长度不能超过50个字符',
                            name : 'address',
                            anchor : '
95%'
                        }
,
                        
{
                            xtype : 'textfield',
                            fieldLabel : '邮箱',
                            name : 'email',
                            vtype : 'email',
                            vtypeText : '邮箱格式不正确',
                            anchor : '
95%'
                        }

                        ]
                    }
,
                    
{
                        xtype : 'tabpanel',
                        plain : 
true//不用背景图片
                        activeTab : 0,
                        height : 
235,
                        defaults : 
{bodyStyle : 'padding : 10 px'},
                        items:[
                        
{
                            title : '个人信息',
                            layout : 'form',
                            defaults : 
{width : 230},
                            defaultType : 'textfield',

                            items : [
                            
{
                                fieldLabel : '名字',
                                name : 'first',
                                allowBlank : 
false,
                                value : '天使'
                            }
,
                            
{
                                fieldLabel : '编辑器',
                                name : 'editor',
                                xtype : 'htmleditor'
                            }

                            ]
                        }
,
                        
{
                            title : '电话号码',
                            layout : 'form',
                            defaults:
{width : 230},
                            defaultType : 'textfield',

                            items :[
                            
{
                                fieldLabel : '宅电',
                                name : 'home',
                                value : '(
888555-1212'
                            }
,
                            
{
                                fieldLabel : '公司电话',
                                name : 'mobile'
                            }
,
                            
{
                                fieldLabel : '传真',
                                name : 'fax'
                            }

                            ]
                        }
,
                        
{
                            cls : 'x
-plain',
                            title : 'Html编辑器',
                            layout : 'fit',
                            items : 
{
                                xtype : 'htmleditor',  
//html复杂编辑器
                                id : 'bio2',
                                fieldLabel : 'Biogarphy'
                            }

                        }
,
                        
{
                            title : '弹出式编辑器',
                            layout : 'form',
                            items: [
                            
{
                                xtype : 'button',
                                text : '弹出式html编辑器',
                                handler : 
function()
                                
{
                                    
new Ext.form.HtmlEditor(
                                    
{
                                        renderTo: 'editor', 
//Ext.getBody(),
                                        width: 300,
                                        draggable : 
true,
                                        height: 
300,
                                        x : 
200,
                                        y :
200,
                                        frame: 
true,
                                        layout: 'fit'
                                    }
);
                                }

                            }

                            ]
                        }

                        
                        ]
                    }

                ],

                buttons : [
                
{
                    text : '保存',
                    handler : 
function()
                    
{    
                        
if(form.getForm().isValid())
                        
{
                            form.getForm().getEl().dom.action 
= 'http://www.blogjava.net/supercrsky';
                            form.getForm().getEl().dom.submit();
                        }

                    }

                }
,
                
{
                    text : '重置',
                    handler : 
function()
                    
{
                        form.getForm().getEl().dom.reset();
                    }

                }

                ]
                
            }
);
            form.render(document.body);
        }
);
  
//-->
  
</SCRIPT>
 
</HEAD>

 
<BODY>
    
<div id='editor'></div>
 
</BODY>
</HTML>


posted on 2008-08-27 14:50 々上善若水々 阅读(3025) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: