extjs创建灵活布局的表单

在这里插入图片描述

var form = new Ext.form.FormPanel({
//            var form = Ext.create('Ext.form.Panel',{
                title : "灵活布局的表单",
                width : 650,
                autoHeight : 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 : .5,
                      layout : "form",
                      items : [{
                         xtype : "textfield",
                         fieldLabel : "座右铭1",
                         width : 220
                        }]
                     }, {
                      columnWidth : .5,
                      layout : "form",
                      items : [{
                         xtype : "textfield",
                         fieldLabel : "座右铭2",
                         width : 220
                        }]
                     }]
                  }, {// 行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
                        }]
                     }]
                  }, {// 行5
                   layout : "form",
                   items : [{
                      xtype : "htmleditor",
                      fieldLabel : "获奖文章",
                      enableLists : false,
                      enableSourceEdit : false,
                      height : 150
                     }]
                  }],
                buttonAlign : "center",
                buttons : [{
                   text : "提交"
                  }, {
                   text : "重置"
                  }]
               });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值