Ext.FormPanel 2

阅读更多

好了，我们继续写 form ，因为要用到 column ，所以我们先在 formpanel 的 itmes 加入一个 column 的定义：

{

layout:'column',

        border:false,

        labelSeparator:' ： ',

        items:[]

}

代码 里定义了在这里使用的是 columnlayout （ layout:'column' ）；

没有边（ border:false ）；

标题的分隔符号我们用中文冒号代替英文的冒（ labelSeparator:' ： ' ）

coulmnLayout 里的控件将定义在 items 里。

我们首先在 items 里加入一个常用输入控件，是用来输入姓名的：

{

            columnWidth:.5,

            layout: 'form',

            border:false,

            items: [{

                xtype:'textfield',

                fieldLabel: ' 姓名 ',

                name: 'name',

                 anchor:'90%'

            }]

        }

我们设置了该列的宽度占总宽度的 50% （ columnWidth:.5 ）；

在布局里放了一个 formlayout 用来放置控件（ layout: 'form' ）；

formlayout 也是没有边的（ border:false ）。

在 formlayout 里有一个类型为 textfield' （ xtype:'textfield' ）的输入控件。

控件标题为姓名（ fieldLabel: ' 姓名 ' ），输入框（ input ）的 name 属性设置“ name ”（ name: 'name' ），输入框的长度为列宽减去标题的宽度后的 90% （ anchor:'90%' ），余下的 10% 的是给显示错误信息图标用的。

在加入性别的 radio 控件时就要注意了，这里需要加入两个 radio ，第一 radio 是有标题的，第二是没有的，而且两个 radio 加起来的宽度应该正好是余下的列宽（ 50% ）：

{

            columnWidth:.25,

            layout: 'form',

            border:false,

            items: [{

                      style:'margin-top:5px',

                xtype:'radio',

                fieldLabel: ' 性别 ',

                boxLabel:' 男 ',

                name: 'sex',

                checked:true,

                inputValue:' 男 ',

                anchor:'95%'

            }]

        },{

            columnWidth:.25,

            layout: 'form',

            labelWidth:0,

            labelSeparator:'',

            hideLabels:true,

            border:false,

            items: [{

                      style:'margin-top:5px',

                xtype:'radio',

                fieldLabel: '',

                boxLabel:' 女 ',

                name: 'sex',

                inputValue:' 女 ',

                anchor:'95%'

            }]

        }

 

从代码中可以看到，除了列宽设置为 25% 外，其它的列设置和第一控件是一样。 Formlayout 里加入了一个类型为 radio 的控件。控件的标题是性别，控件的选择显示文本是男（ boxLabel:' 男）， input 的 name 属性值是 sex （ name: 'sex' ），该控件默认是已选的（ checked:true ），控件的值（ value ）是男（ inputValue:' 男 ' ）， input 的宽度是 95% 。在这里我还设置一个 css 属性，顶部的外补丁为 5px （ style:'margin-top:5px' ），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。

第二个 raido 控件的列设置就有所不同，因为它不需要标题，所以要设置隐藏标题（ hideLabels:true ），标题的宽度设置为 0 （ labelWidth:0 ） , 还要设置其标题分隔符号为空（ labelSeparator:'' ）。其余的设置和第一个 radio 的设置没有不同，只是 input 的值不同了。

我们已经设置了 3 列， 3 列的列宽分别为 50% 、 25% 、 25% ，根据 float 的原则，下一列将从第二行开始。

在第二行第一列我们要增加的是一个日期选择控件：

{

            columnWidth:.5,

            layout: 'form',

            border:false,

            items: [{

                 xtype:'datefield',

                fieldLabel: ' 出生日期 ',

                name: 'birthday',

                anchor:'90%'

            }]

      }

日期控件的列宽也是 50% ，列的其它设置没有变化。控件的类型为 datefield ，标题是出生日期， input 的 name 属性是 birthday ， intput 宽度也是设置了 90% ，出来留出空位给错误信息外，还可以让控件与上一行的姓名的宽度相同，整列看起来比较整齐。

日期控件的设置和普通文本输入的设置一样简单，这里就不多说了。不过要说到的是汉化的问题。在 2.0 版自带的本地化文件 ext-lang-zh.js 中存在一些小 bug ，我们需要自己修改一下。

首先要修改的是周的显示，原来的定义是：

Date.dayNames = [

   " 周日 ",

   " 周一 ",

   " 周二 ",

   " 周三 ",

   " 周四 ",

   " 周五 ",

   " 周六 "

];

因为在日期选择中显示的区域不够宽，只能显示一个汉字，所以需要将上面定义的把“周”去掉，修改为：

Date.dayNames = [

   " 日 ",

   " 一 ",

   " 二 ",

   " 三 ",

   " 四 ",

   " 五 ",

   " 六 "

];

在年份和月份选择中的按钮文字还是英文“ ok ”和“ cancel ”的，这里我们也需要修改一下：

if(Ext .DatePicker){

   Ext.apply(Ext.DatePicker.prototype, {

      todayText         : " 今天 ",

      minText            : " 日期在最小日期之前 ",

      maxText           : " 日期在最大日期之后 ",

      disabledDaysText  : "",

      disabledDatesText : "",

      monthNames      : Date.monthNames,

      dayNames          : Date.dayNames,     

      nextText          : ' 下月 (Control+Right)',

      prevText          : ' 上月 (Control+Left)',

      monthYearText     : ' 选择一个月 (Control+Up/Down 来改变年 )',

      todayTip          : "{0} (Spacebar)",

      okText            : "确定 ",

      cancelText        : "取消 ",

      format            : "y 年 m 月 d 日 "

   });

}

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“ y 年 m 月 d 日”，需要修改：

if(Ext.form.DateField){

   Ext.apply(Ext.form.DateField.prototype, {

      disabledDaysText  : " 禁用 ",

      disabledDatesText : " 禁用 ",

      minText           : " 该输入项的日期必须在 {0} 之后 ",

      maxText           : " 该输入项的日期必须在 {0} 之前 ",

      invalidText       : "{0} 是无效的日期 - 必须符合格式： {1}",

      format            : "Y-m-d"

   });

}

修改 DatePicker 不会改变 DateField 的格式的，这个自己根据情况决定，呵呵