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

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

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

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

                        var wLogin;
                        var aLogin = Ext.get("aLogin");
                        aLogin.on("click", function() {
                            if (!wLogin) {
                                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>

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

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

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

                                var wLogin;
                                var aLogin = Ext.get("aLogin");
                                aLogin.on("click", function() {
                                    if (!wLogin) {
                                        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>

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

3.更加复杂的结构:

<script type="text/javascript">
    Ext.onReady(function() {
        var form = new Ext.FormPanel({
            title: "复杂Form布局示例",
            width: 640,
            height: 400,
            renderTo: Ext.getBody(),
            labelWidth: 80,
            labelAlign: "top",
            frame: true,
            items: [{
                layout: "column",
                items: [{
                    columnWidth: 0.5,
                    layout: "form",
                    items: {
                        xtype: "textfield",
                        fieldLabel: "A1",
                        anchor: "90%"
                    }
                }, {
                    columnWidth: 0.5,
                    layout: "form",
                    items: {
                        xtype: "textfield",
                        fieldLabel: "A2",
                        anchor: "90%"
                    }
}]
                }, { items: [{
                    layout: "column",
                    items: [{
                        columnWidth: 0.33,
                        layout: "form",
                        items: {
                            xtype: "datefield",
                            fieldLabel: "B1",
                            anchor: "90%"
                        }
                    }, {
                        columnWidth: 0.33,
                        layout: "form",
                        items: [{
                            xtype: "radiogroup",
                            fieldLabel: "B2",
                            columns: ["33%", "33%", "33%"],
                            items: [{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 },
                                    { boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true },
                                    { 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%"
                            //                            }]
}]
                        }, {
                            columnWidth: 0.33,
                            layout: "form",
                            items: {
                                xtype: "textfield",
                                fieldLabel: "B3",
                                inputType: "password",
                                anchor: "90%"
                            }
}]
}]
                }, {
                    xtype: "htmleditor",
                    fieldLabel: "详细内容",
                    height: 200,
                    anchor: "100%"
}]
                , buttons: [{ text: "Save" }, {text:"cancel"}]

                });
            });
            
</script>

转载请注明来自"菩提树下的杨过"

技巧: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"
}]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

Java开发GUI之CardLayout卡片布局

    CardLayout布局允许进行多套界面的设计,通过切换界面来实现布局样式的改变。CardLayout类似与一叠卡片,默认最先添加的在前面,界面始终只展...

10110
来自专栏西安-晁州

nodejs操作excel并配合edatagrid使用

nodejs读取文件夹下子文件(夹)名称: /** * 查询tmp文件夹下子文件夹名称 */ router.post("/tmpList", functio...

37900
来自专栏游戏杂谈

chrome、ff下flash的mousewheel事件失效(wmode=transparent)

13440
来自专栏拂晓风起

asp.net页面事件执行顺序(转+原创补充) Button1_Click处理返回数据前还有其他处理!!!例如onPreLoad

17950
来自专栏哲学驱动设计

技术总结:自动扩张WPF树型表格列宽

问题描述     今天测试人员提了一个易用性的BUG,主要是说系统目前使用的树型控件不支持自动扩张列的宽度。其实客户那边已经对这个问题提了多次,不过由于对WPF...

26350
来自专栏我分享我快乐

浏览器兼容

先来说说什么是浏览器兼容? 对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome...

410120
来自专栏守望轩

如何不使用让menu控件不回发(postback)

写网站首页程序的导航,要用asp.net2.0 的下menu控件,因为绑定数据库十分方便,不过有个问题,就是我采用的iframe来跳转页面,不想整个首页都跳转,...

23950
来自专栏androidBlog

Activity横竖屏切换的那些事

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

28820
来自专栏python爬虫日记

wxpython 编程触发菜单或按钮事件

最近逐步熟悉wxpython,编写了几个小小功能的GUI程序,GUI中免不了会有在代码中触发控件事件的业务需求。在其他Gui界面的语言中有postevent、t...

52820
来自专栏菩提树下的杨过

Flash/Flex学习笔记(17):按键捕获

先来看简单的单个按键捕获: package { import flash.display.Sprite; import fl.controls.Label...

26390

扫码关注云+社区

领取腾讯云代金券