我的漫漫程序之旅

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

Ext Form 简单练习之一(login Form)

<HTML>
 
<HEAD>
  
<TITLE> Ext Form 简单练习之一(login Form) </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>
    Ext.onReady(
function()
    
{
        
new Ext.Button({
            id  : 'b1',
            text : '登录',
            renderTo : 'd1',
            handler : 
function()
            
{
                createWindow();
            }

        }
);
        
        
        
function createWindow()
        
{
        
        
var form = new Ext.form.FormPanel({
            baseCls : 'x
-plain', // Panel的默认css,
            layout : 'absolute', //布局
            url : 'bbs.crsky.com',  //form action
            defaultType : 'textfield',  //默认类型(不指定类型的情况为默认)
                //非Ajax方式提交一定要加上这两句
            onSubmit : Ext.emptyFn,
            submit : 
function()
            
{
                
this.getForm().getEl().dom.submit();    
            }
,
            
//form 组件
            items : [
            
{
                x : 
0//在window中的绝对定位
                y : 5,
                xtype : 'label',
                text : '用户名:'
            }
,
            
{
                x : 
60,
                y : 
0,
                name : 'to',
                id : 'username',
                anchor : '
100%//锚记,当你改变window大小时,textfield会自动随之改变
            }
,
            
{
                x : 
0,
                y : 
35,
                xtype : 'label',
                text : '密码:'
            }
,
            
{
                x : 
60,
                y : 
30,
                name : 'msg',
                id : 'password',
                anchor : '
100%'
            }

            ]
        }
);


        
var window = new Ext.Window({
            title: '可调大小',
            width : 
300,
            height : 
150,
            minWidth : 
300,
            minHeight : 
150,
            layout : 'fit',
             plain : 
true,
             bodyStyle : 'padding : 5px;',
             buttonAlign : 'center',
             items : form,

             buttons : [
                
{
                    text : '登录',
                    type : 'submit',
                    handler : 
function()
                    
{
                        
var username = Ext.get('username');
                        
var password = Ext.get('password');
                        
if(username.getValue() == '')
                        
{
                            Ext.Msg.alert('提示','用户名不能为空');
                        }

                        
else
                        
{
                            
if(password.getValue() == '')
                            
{+
                                Ext.Msg.alert('提示','密码不能为空');
                            }

                            
else
                            
{
                                form.getForm().getEl().dom.action 
= 'http://www.blogjava.net/supercrsky',
                                form.getForm().getEl().dom.submit();    
                            }

                        }

                    }

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

                }

             ]
        }
);
        window.show();
        }

        
//window.show();
    }
);
</script>
 
</HEAD>

 
<BODY>
    
<div id='d1'></div>
 
</BODY>
</HTML>
效果图:


posted on 2008-08-19 10:32 々上善若水々 阅读(1316) 评论(0)  编辑  收藏 所属分类: JavaScript


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


网站导航: