ExtJs学习笔记(19)_复杂Form示例

简介: Form布局在所有布局中是最为复杂,使用频度最广,同时也是最难掌握的,下面给出几个示例   1.登录UI界面 Login UIDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

Form布局在所有布局中是最为复杂,使用频度最广,同时也是最难掌握的,下面给出几个示例

 

1.登录UI界面

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Login UI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
<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>     
    
<title>Form 布局应用_Login登录框</title>   
</head>
<body>
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script type="text/javascript">
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    Ext.onReady(
function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
var login = new Ext.FormPanel({
            renderTo: Ext.getBody(),
            labelAlign: 
'top',//标签排在最上面
            frame: true,
            id: 
'login',
            bodyStyle: 
'padding:5px 5px 0',            
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            items: [
{
                layout: 
'column',  //把整个空间划分成两列 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                items: [{
                    html: 
'左侧登录Logo区'//左边列放一个logo 
                    columnWidth: 0.5
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                }
{
                    columnWidth: 
0.5,
                    layout: 
'form'//右边列再分成上下两行 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                    items: [{
                        xtype: 
'textfield',
                        fieldLabel: 
'用户名'//第一行是用户名输入框
                        allowBlank: false,
                        blankText: 
"请输入用户名!",
                        name: 
'name',
                        id: 
'name',                       
                        anchor: 
'80%'
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    }
{
                        xtype: 
'textfield',
                        fieldLabel: 
'密码'//第二行是密码输入框
                        allowBlank: false,
                        blankText: 
"请输入密码!",
                        name: 
'pass',
                        id: 
'pass',
                        anchor: 
'80%',
                        inputType: 
'password'
                    }
]
                }
]
             }
],
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        buttons: [
{ text: '登录', handler: function() {
                            
var name = Ext.get("name");
                            
var pass = Ext.get("pass");
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
if (name.dom.value == ""{
                                Ext.MessageBox.alert(
"提示""请输入登录名");
                                name.highlight();
                                name.focus();
                                
return false;
                            }

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
if (pass.dom.value == ""{
                                Ext.MessageBox.alert(
"提示","请输入密码");
                                pass.highlight();
                                pass.focus();
                                
return false;
                            }

                        }


img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        }
{ text: '重置', handler: function() {
                            Ext.get(
"name").dom.value = "";
                            Ext.get(
"pass").dom.value = "";
                        }
 }
]
                        }
);
                        login.hide();

                        
var wLogin;
                        
var aLogin = Ext.get("aLogin");
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        aLogin.on(
"click"function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
if (!wLogin) {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                wLogin 
= new Ext.Window({
                                    title: 
"用户登录",
                                    width: 
400,
                                    plain: 
true,
                                    modal: 
true,
                                    height: 
175,
                                    resizable:
false,
                                    items: [login],
                                    closeAction: 
"hide"
                                }
);
                            }

                            login.show();
                            wLogin.show();
                        }
)
                    }
);
                
</script>
</body>

<href="#" id="aLogin">用户登录</a>
</html>

 


2.加入其它不同类型的输入组件后

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Login UI 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
<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>     
    
<title>Form 布局应用_Login登录框</title>   
</head>
<body>
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script type="text/javascript">
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    Ext.onReady(
function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
var login = new Ext.FormPanel({
            renderTo: Ext.getBody(),
            labelAlign: 
'top'//标签排在最上面
            frame: true,
            id: 
'login',
            bodyStyle: 
'padding:3px 3px 0',            
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            items: [
{
                layout: 
'column',  //把整个空间划分成两列 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                items: [{
                    columnWidth: 
0.5,
                    layout: 
'form'//左边列分成三行(根据item个数来定的)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                    items: [{
                        xtype: 
'textfield'//第一行,呢称
                        fieldLabel: "呢称",
                        allowBlank: 
false,
                        blankText: 
'请输入呢称!',
                        name: 
"nickname",
                        id: 
"nickname",
                        anchor: 
'80%'
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    }
{
                        xtype: 
'textfield'//第二行,电子邮箱
                        fieldLabel: "电子邮箱",
                        allowBlank: 
false,
                        blankText: 
'请输入电子邮箱!',
                        vtype: 
"email",
                        name: 
"email",
                        id: 
"email",
                        anchor: 
'80%'
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    }
{
                        xtype: 
'datefield',
                        fieldLabel: 
"出生日期"//第三行,出生日期                       
                        allowBlank: false,
                        name: 
"birthday",
                        id: 
"birthday",
                        anchor: 
'80%'
                    }
]
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    }
{
                        columnWidth: 
0.5,
                        layout: 
'form'//左边列分成三行(根据item个数来定的)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                        items: [{
                            xtype: 
'textfield',
                            fieldLabel: 
'用户名'//第一行是用户名输入框
                            allowBlank: false,
                            blankText: 
"请输入用户名!",
                            name: 
'name',
                            id: 
'name',
                            anchor: 
'80%'
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        }
{
                            xtype: 
'textfield',
                            fieldLabel: 
'密码'//第二行是密码输入框
                            inputType: "password",
                            allowBlank: 
false,
                            blankText: 
"请输入密码!",
                            name: 
'pass',
                            id: 
'pass',
                            anchor: 
'80%',
                            inputType: 
'password'
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        }
{
                            xtype: 
'radiogroup',//第三行是爱好
                            fieldLabel: '爱好',
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            items: [
{
                                xtype: 
"panel",
                                layout: 
"column"//也可以是table,实现多列布局                               
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                                items: [{
                                    width:
55//宽度为100px
                                    xtype:"checkbox",
                                    boxLabel: 
"足球"//显示在复选框右边的文字
                                    name: ""
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                }
{
                                    width:
55,
                                    xtype:
"checkbox",
                                    boxLabel: 
"篮球",
                                    name: 
""
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                }
{
                                    width:
55,
                                    xtype:
"checkbox",
                                    boxLabel: 
"音乐",
                                    name: 
""
                                }
]
                            }
]
                        }
]
                    }
]
                 }
],
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                buttons: [
{ text: '登录', handler: function() {
                                    
var name = Ext.get("name");
                                    
var pass = Ext.get("pass");
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                    
if (name.dom.value == ""{
                                        Ext.MessageBox.alert(
"提示""请输入登录名");
                                        name.highlight();
                                        name.focus();
                                        
return false;
                                    }

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                    
if (pass.dom.value == ""{
                                        Ext.MessageBox.alert(
"提示""请输入密码");
                                        pass.highlight();
                                        pass.focus();
                                        
return false;
                                    }

                                }


img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                }
{ text: '重置', handler: function() {
                                    Ext.get(
"name").dom.value = "";
                                    Ext.get(
"pass").dom.value = "";
                                }
 }
]
                                }
);
                                login.hide();

                                
var wLogin;
                                
var aLogin = Ext.get("aLogin");
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                aLogin.on(
"click"function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                    
if (!wLogin) {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                        wLogin 
= new Ext.Window({
                                            title: 
"用户登录",
                                            width: 
400,
                                            height: 
235,
                                            plain: 
true,
                                            modal: 
true,                                            
                                            resizable: 
false,
                                            items: [login],
                                            closeAction: 
"hide"
                                        }
);
                                    }

                                    login.show();
                                    wLogin.show();
                                }
)



                            }
);
                
</script>
</body>

<href="#" id="aLogin">用户登录</a>
</html>

 

3.更加复杂的结构:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif<script type="text/javascript">
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    Ext.onReady(
function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
var form = new Ext.FormPanel({
            title: 
"复杂Form布局示例",
            width: 
640,
            height: 
400,
            renderTo: Ext.getBody(),
            labelWidth: 
80,
            labelAlign: 
"top",
            frame: 
true,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            items: [
{
                layout: 
"column",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                items: [
{
                    columnWidth: 
0.5,
                    layout: 
"form",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    items: 
{
                        xtype: 
"textfield",
                        fieldLabel: 
"A1",
                        anchor: 
"90%"
                    }

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                }
{
                    columnWidth: 
0.5,
                    layout: 
"form",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    items: 
{
                        xtype: 
"textfield",
                        fieldLabel: 
"A2",
                        anchor: 
"90%"
                    }

}
]
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                }
{ items: [{
                    layout: 
"column",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    items: [
{
                        columnWidth: 
0.33,
                        layout: 
"form",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        items: 
{
                            xtype: 
"datefield",
                            fieldLabel: 
"B1",
                            anchor: 
"90%"
                        }

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    }
{
                        columnWidth: 
0.33,
                        layout: 
"form",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        items: [
{
                            xtype: 
"radiogroup",
                            fieldLabel: 
"B2",
                            columns: [
"33%""33%""33%"],
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            items: [
{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                    
{ boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                    
{ boxLabel: '好人', name: 'rb-auto', inputValue: 3}]
                            
//下面也是一种解决办法,不管radiogroup或是下面的写法,都很难保证在所有浏览器下效果一致
                            //                            xtype: "panel",
                            //                            layout: "column",
                            //                            fieldLabel: "球类",
                            //                            isFormField: true,
                            //                            items: [{
                            //                                columnWidth: 0.33,
                            //                                xtype: "checkbox",
                            //                                boxLabel: "足球",
                            //                                name: "",
                            //                                anchor:"100%"
                            //                            }, {
                            //                                columnWidth:0.33,
                            //                                xtype:"checkbox",
                            //                                boxLabel:"蓝球",
                            //                                name:"",
                            //                                anchor: "100%"
                            //                            }, {
                            //                                columnWidth: 0.33,
                            //                                xtype: "checkbox",
                            //                                boxLabel: "乒乓球",
                            //                                name: "",
                            //                                anchor: "100%"
                            //                            }]
}
]
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        }
{
                            columnWidth: 
0.33,
                            layout: 
"form",
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            items: 
{
                                xtype: 
"textfield",
                                fieldLabel: 
"B3",
                                inputType: 
"password",
                                anchor: 
"90%"
                            }

}
]
}
]
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                }
{
                    xtype: 
"htmleditor",
                    fieldLabel: 
"详细内容",
                    height: 
200,
                    anchor: 
"100%"
}
]
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                , buttons: [
{ text: "Save" }{text:"cancel"}]

                }
);
            }
);
            
</script>

 

 

 转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/09/03/1283042.html

 

技巧:
1.先用new Ext.FormPanel({
items:[
{...},{...},{...}...
]
})
类似的代码,确定整个form的行数,即items里{}的个数
2.每行如果要分列,再利用
{
layout:"column",
items:[{},{},{}...]
}
以column布局,横向分切为N列,即items:[{},{},{}...]中{}的个数
3.每列中,如果要放输入项,再把每行相关列(其实就是单元格),采用form布局方式处理,并标明输入项,类似以下代码:
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype:"textfield",
fieldLabel:"A1",
anchor:"90%"
}
}, {
columnWidth: 0.5,
html: "aaaaaaaaaaa"
}]
目录
相关文章
|
JavaScript
Extjs Form 表单修改
Extjs修改分两种方法:1.前台直接加载;2.通过后台远程加载 1.直接加载:方法 form.getForm().loadRecord(); 应用时要求页面上已经存在页面中的所有数据,比如选中gridPanel一行,然后直接传递此行记录,到formPanel页面,可直接加载 2.后台加载:方法 form.getForm().load(); 应用时 传递一个参数到后台,然后远程取值,绑定。
987 0
|
JavaScript 前端开发 Windows