注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

╰此情可待成追忆

当没有阳光时,我自己便是阳光,当没有快乐时,我自己便是快乐

 
 
 

日志

 
 

【转载】ExtJs FormPanel布局  

2013-12-03 17:04:56|  分类: Ext.NET |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自带你去看海《ExtJs FormPanel布局》

FormPanel有两种布局:form和column,form是纵向布局,column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现。
如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:
【1】落实到任何一个表单组件后,最后总是form布局
【2】defaultType属性不一定起作用,必须显式为每一个表单组件指定xtype或new出新对象
【3】在column布局中,通过columnWidth可以指定列所占宽度的百分比,如占50%宽度为.5。

剖析出一个合理的结构,像下面这样 :

ExtJs FormPanel布局 - 带你去看海 - 秦枫的博客

我们发现,布局其实是由行和列组件成,分成由左往右和由上往下两个方向,由左往右
叫column,由上往下叫form。
整个大的表单是form布局,从上往下放置了五个小布局,在这里我以行n标记,我们
以行1为例进行分析。行1从左往右有三个表单组件,所以是column布局,行1我们用结
构这样定义:
{
layout: “column”,
items:[{},{},{}] //items表示指定布局内的表单组件集合,在此有三个
}

行1内其实还有三个form布局,因为每个布局中只有一个表单组件,所以看起来并不
那么明显,我们完全可以放置多个表单组件到布局中。每一个布局使用下面的结构定义:
{
layout: “form”,
items:[{}] //只有一个表单组件
}

上面的两个结构最终要组装到一起:
{
layout: “column”,
items:[{
   layout: “form”,
   items:[{}]
},{
   layout: “form”,
   items: [{}]
},{
   layout: “form”,
   items: [{}]
}]
}

实现上面的完整代码是:

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
       title : "灵活布局的表单",
       width : 650,
       autoHeight : true,
       frame : true,
       renderTo : "a",
       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 : "重置"
         }]
      });
   });


  评论这张
 
阅读(196)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017