专栏首页菩提树下的杨过ExtJs学习笔记(19)_复杂Form示例

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 条评论
登录 后参与评论

相关文章

  • ExtJs学习笔记(16)_Form布局

    这是最重要的一个布局,几乎所有的表单界面都可以采用form布局,详细的用法本文不作讨论(可以查阅官方API文档),这里只给出一个简单的示例 <script ty...

    菩提树下的杨过
  • 用jQuery模拟select下拉框

    很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来...

    菩提树下的杨过
  • struts2使用Convention Plugin在weblogic上以war包部署时,找不到Action的解决办法

    环境: struts 2.3.16.3 + Convention Plugin 2.3.16.3 实现零配置 现象:以文件夹方式部署在weblogic(10.3...

    菩提树下的杨过
  • Android实现微信的图片选择器

    现在大部分的App都上传图片的功能,比如设置用户头像、聊天发送图片、发表动态、论坛帖子等。上传图片需要先从选择手机中选择要上传的图片,所以图片选择器在App中是...

    砸漏
  • 谷歌大脑深度学习从入门到精通视频课程[2.8]:训练神经网络——正则化

    AI100 已经引入 Hugo Larochelle 教授的深度学习课程,会每天在公众号中推送一到两节课,并且对视频中的 PPT 进行讲解。课后,我们会设计一...

    AI科技大本营
  • Java面试系列19-Struts2

    Struts2 (技术版本可能过低大家答题时换成最新的即可) 1 该案例包括首页,用户登陆、网站向导页面。就这么简单,没有深奥的struts概念,主要靠动手,然...

    Java帮帮
  • Java面向对象编程练习

    编写Java程序用于显示人的姓名和年龄。 定义一个人类Person该类中应该有两个私有属性姓名name和年龄age。定义构造方法用来初始化数据成员。再定义显示d...

    用户7886150
  • 哈佛MIT联手出品 | 造价低于1美元的机械臂,可承自身重量千倍

    原作 Darrell Etherington Root 编译自 TechCrunch 量子位 出品 | 公众号 QbitAI 麻省理工大学计算机科学和人工智能实...

    量子位
  • echarts - 特殊需求实现代码汇总之【饼图】篇

    其实很简单,就是设置全局的color属性即可。color属性可以是一套数组,里边的样式以字符串格式设置。

    xing.org1^
  • ASP.NET MVC 异步实现

    在 MVC 中实现异步操作有两种方法,一种是使用jQuery的异步函数,另一种就是使用MVC的 AjaxHelper

    李郑

扫码关注云+社区

领取腾讯云代金券