关于ExtJs 表单复杂布局(仅仅是布局)


var editForm = new Ext.form.FormPanel({

            title : "灵活布局的表单",
            autoHeight : true,
            autowidth : true,
            frame : true,
            layout : "form", // 整个大的表单是form布局
            labelWidth : 65,
            labelAlign : "right",
            items : [{ // 行1
                layout : "column", // 从左往右的布局
                items : [{
                            columnWidth : .3, // 该列有整行中所占百分比
                            layout : "form", // 从上往下的布局
                            items : [{
                                        xtype : "textfield",
                                        fieldLabel : "姓",
                                        width : 120
                                    }]
                        }, {
                            columnWidth : .3,
                            layout : "form",
                            items : [{
                                        xtype : "textfield",
                                        fieldLabel : "名",
                                        width : 120
                                    }]
                        }, {
                            columnWidth : .3,
                            layout : "form",
                            items : [{
                                        xtype : "textfield",
                                        fieldLabel : "英文名",
                                        width : 120
                                    }]
                        }]
            }, {    // 行2
                        layout : "column",
                        items : [{
                                    columnWidth : .46,
                                    layout : "form",
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "座右铭1",
                                                width : 200
                                            }]
                                }, {
                                    columnWidth : .46,
                                    layout : "form",
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "座右铭2",
                                                width : 200
                                            }]
                                }]
                    }, {// 行3
                        layout : "form",
                        items : [{
                                    xtype : "textfield",
                                    fieldLabel : "奖励",
                                    width : 500
                                }, {
                                    xtype : "textfield",
                                    fieldLabel : "处罚",
                                    width : 500
                                }]
                    }, {// 行4
                        layout : "column",
                        items : [{
                                    layout : "form",
                                    columnWidth : 0.2,
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "电影最爱",
                                                width : 50
                                            }]
                                }, {
                                    layout : "form",
                                    columnWidth : 0.2,
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "音乐最爱",
                                                width : 50
                                            }]
                                }, {
                                    layout : "form",
                                    columnWidth : 0.2,
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "明星最爱",
                                                width : 50
                                            }]
                                }, {
                                    layout : "form",
                                    columnWidth : 0.2,
                                    items : [{
                                                xtype : "textfield",
                                                fieldLabel : "运动最爱",
                                                width : 50
                                            }]
                                }]
                    }],
            buttonAlign : "center",
            buttons : [{
                        text : "提交"
                    }, {
                        text : "重置"
                    }]
        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值