Ext2.0教程三：Ext2.0從新建窗口開始

Ethan的博客 2011-07-04

展開全文

Ext2.0教程三：Ext2.0從新建窗口開始

2009-05-20 10:37 310人閱讀評論(0) 收藏舉報(bào)

--wayfoon

開發(fā)中，通常需要新建窗口，比如登陸窗口，新增窗口。

新建窗口使用到Ext.Window提供的類,

你可以先預(yù)覽效果：效果圖

建立一個簡單的窗口:

var win=new Ext.Window({ 
            id:''w'', 
            title:''wayfoon:新窗口'',//窗口顯示名稱 
            width:300, 
            height:140, 
            collapsible: true,//是否可折疊 
            layout : ''column'',//布局方式 
            items:[]//窗口需要增加的內(nèi)容 
        }).show();//讓窗口顯示出來

上面只定義了窗口的名稱、長、寬、布局方式，其他屬性之后詳細(xì)描述。你可以在items里面增加你需要的內(nèi)容。

比如你可以直接在items里面添加html代碼:

items:[{ 
    xtype : ''panel'',//html代碼容器 
    html : "姓名：<input type=''text'' name=''wayfoon'' onclick=''javascript:alert(wayfoon)''/>" 
}]

在這里，我將演示添加一個form表單。

先新建一個form。

form由Ext.form.FormPanel定義

一個標(biāo)準(zhǔn)的form定義

var from =new Ext.form.FormPanel({ 
    bodyStyle : ''padding-top:5px'',//距離窗口上端的距離 
    id:''f'', 
    labelWidth:50,//文本部分的寬度 
    labelAlign:''right'',//文本的排列方式 
    labelPad : 0,//文本和輸入框之間的距離 
    layout:''form'',//布局方式 
    frame : true, 
    defaults:{//字元素默認(rèn)的屬性 
        width:200 
    }, 
    defaultType:''textfield'',//默認(rèn)的input 類型 
    items:[{ 
        id:''workid'', 
        cls : ''user'', 
        fieldLabel:''編號'', 
        //disabled:true, 
        allowBlank:false//是否允許為空 
    },{ 
        id:''workname'', 
        fieldLabel:''名稱'', 
        allowBlank:false 
    }], 
    buttonAlign:''center'',//按鈕的排列方式 
        buttons:[{//按鈕寫在窗口，要比寫在form里面好看多了 
             text:''確定'', 
             type:''submit'', 
             handler:function(){//點(diǎn)擊觸發(fā)事件處理 
             } 
        }] 
    //這里不需要逗號，每個控件定義都是這樣的 
}) 

現(xiàn)在可以將form加入到窗口中，items:[form] 就可以！

這樣顯示的窗口不是很美觀，我們可以做些調(diào)整。將按鈕放到表單之外，也就是放在窗口下面。

這樣，修改之后的窗口，

var win=new Ext.Window({ 
    id:''w'', 
    renderTo: bd, 
    title:''wayfoon:新窗口'', 
    width:300, 
    height:140, 
    collapsible: true,//是否可折疊 
    defaults :{ 
        // 容器內(nèi)元素是否顯示邊框 
        border : true 
    }, 
    //layout:''fit'', 
    layout : ''column'',//布局方式 
    items:[form],//包含表單，多個用逗號隔開 
    buttonAlign:''center'',//按鈕的排列方式 
    buttons:[{//按鈕寫在窗口，要比寫在form里面好看多了 
        text:''確定'', 
        type:''submit'', 
        handler:function(){ 
        } 
    }] 
}).show(); 

一個新窗口，基本完成！

可以將下面代碼保存成*.htm執(zhí)行。

所有代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> wayfoon:新窗口 </title> 

    <link rel="stylesheet" type="text/css" href="http://www./ext22/resources/css/ext-all.css" />  
    <script type="text/javascript" src="http://www./ext22/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="http://www./ext22/ext-all.js"></script> 

     
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head> 

<body> 
    <script> 
    Ext.onReady(function(){  
        Ext.QuickTips.init();//初始化鼠標(biāo)停留時的顯示框 
        Ext.form.Field.prototype.msgTarget = ''side''; 
        var bd = Ext.getBody(); 

    var form =new Ext.form.FormPanel({ 
        bodyStyle : ''padding-top:5px'',//距離窗口上端的距離 
        id:''ll'', 
        labelWidth:50,//文本部分的寬度 
        labelAlign:''right'',//文本的排列方式 
        labelPad : 0,//文本和輸入框之間的距離 
        layout:''form'',//布局方式 
        frame : true, 
        defaults:{//字元素默認(rèn)的屬性 
            width:200 
        }, 
        defaultType:''textfield'',//默認(rèn)的input 類型 
        items:[{ 
            id:''workid'', 
            cls : ''user'', 
            fieldLabel:''編號'', 
            //disabled:true, 
            allowBlank:false//是否允許為空 
        },{ 
            id:''workname'', 
            fieldLabel:''名稱'', 
            allowBlank:false 
        }] 
         
    }) 

    var win=new Ext.Window({ 
        id:''w'', 
        renderTo: bd, 
        title:''wayfoon:新窗口'', 
        width:300, 
        height:140, 
        collapsible: true,//是否可折疊 
        defaults :{ 
            // 容器內(nèi)元素是否顯示邊框 
            border : true 
        }, 
        //layout:''fit'', 
        layout : ''column'', 
        items:[form], 
        buttonAlign:''center'',//按鈕的排列方式 
        buttons:[{//按鈕寫在窗口，要比寫在form里面好看多了 
            text:''確定'', 
            type:''submit'', 
            handler:function(){ 
            } 
        }] 
    }).show(); 
         

    }); 
    </script> 
</body> 
</html>

效果圖：

如果你想在按鈕觸發(fā)時，添加事件

handler:function(){ 
    alert(123); 
    var workid=Ext.get(''workid'').dom.value; 
    alert(workid);             
}

下面演示一個submit登陸事件，

你也可以單獨(dú)定義一個方法（調(diào)用方法，handler:login）：

 // 單擊按鈕時執(zhí)行登陸操作 
var login = function(){ 
    var workid=Ext.get(''workid'').dom.value;
    alert("wayfoon:"+workid); 
    /** 
        這里可以判斷輸入的值是否合法，（通過 類似：var workid=Ext.get(''workid'').dom.value;得到值日）否則不執(zhí)行下面的submit 
    **/ 
    // 執(zhí)行當(dāng)前表單面板的submit 
    f.form.submit({ 
        // 動作發(fā)生期間顯示的文本信息 
            //waitMsg : ''正在登錄......'', 
            // submit發(fā)生時指向的地址 
            url : ''/xxx/login.jsp'', 
            // 表單提交方式 
            method : ''POST'', 
            // 數(shù)據(jù)驗(yàn)證通過時發(fā)生的動作 
            success : function(form, action){ 
                //成功的走向 
                    window.location.href = ''main.htm?t=''+new Date(); 
              
            }, 
            // 反之...... 
            failure : function(form, action){ 
                if (action.failureType == Ext.form.Action.SERVER_INVALID) 
                    Ext.MessageBox.alert(''警告'', action.result.errors.msg); 
            } 
        }); 
}; 

完整的代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> wayfoon:新窗口 </title> 

    <link rel="stylesheet" type="text/css" href="http://www./ext22/resources/css/ext-all.css" />  
    <script type="text/javascript" src="http://www./ext22/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="http://www./ext22/ext-all.js"></script> 

     
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head> 

<body> 
    <script> 
    Ext.onReady(function(){  
        Ext.QuickTips.init();//初始化鼠標(biāo)停留時的顯示框 
        Ext.form.Field.prototype.msgTarget = ''side''; 
        var bd = Ext.getBody(); 

    var form =new Ext.form.FormPanel({ 
        bodyStyle : ''padding-top:5px'',//距離窗口上端的距離 
        id:''ll'', 
        labelWidth:50,//文本部分的寬度 
        labelAlign:''right'',//文本的排列方式 
        labelPad : 0,//文本和輸入框之間的距離 
        layout:''form'',//布局方式 
        frame : true, 
        defaults:{//字元素默認(rèn)的屬性 
            width:200 
        }, 
        defaultType:''textfield'',//默認(rèn)的input 類型 
        items:[{ 
            id:''workid'', 
            cls : ''user'', 
            fieldLabel:''編號'', 
            //disabled:true, 
            allowBlank:false//是否允許為空 
        },{ 
            id:''workname'', 
            fieldLabel:''名稱'', 
            allowBlank:false 
        }] 
         
    }) 
 // 單擊按鈕時執(zhí)行登陸操作 
    var login = function(){ 
    var workid=Ext.get(''workid'').dom.value; 
    alert("wayfoon:"+workid); 
        /** 
            這里可以判斷輸入的值是否合法。否則不執(zhí)行下面的submit 
        **/ 
        // 執(zhí)行當(dāng)前表單面板的submit 
        form.form.submit({ 
            // 動作發(fā)生期間顯示的文本信息 
                waitMsg : ''正在登錄......'', 
                // submit發(fā)生時指向的地址 
                url : ''/mktweb/login.jsp'', 
                // 表單提交方式 
                method : ''POST'', 
                // 數(shù)據(jù)驗(yàn)證通過時發(fā)生的動作 
                success : function(form, action){ 
                   //成功走向 
                        window.location.href = ''main.htm?t=''+new Date(); 
                    
                }, 
                // 反之...... 
                failure : function(form, action){ 
                //   reset(); 
                    if (action.failureType == Ext.form.Action.SERVER_INVALID) 
                        Ext.MessageBox.alert(''警告'', action.result.errors.msg); 
                } 
            }); 
    }; 
    var win=new Ext.Window({ 
        id:''w'', 
        renderTo: bd, 
        title:''wayfoon:新窗口'', 
        width:300, 
        height:140, 
        collapsible: true,//是否可折疊 
        defaults :{ 
            // 容器內(nèi)元素是否顯示邊框 
            border : true 
        }, 
        //layout:''fit'', 
        layout : ''column'', 
        items:[form], 
        buttonAlign:''center'',//按鈕的排列方式 
        buttons:[{//按鈕寫在窗口，要比寫在form里面好看多了 
            text:''確定'', 
            type:''submit'', 
            handler:login 
        }] 
    }).show(); 
         
     
    }); 
    </script> 
</body> 
</html>

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： Ethan的博客 > 《javaWeb》

舉報(bào)/認(rèn)領(lǐng)