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 的格式的,这个自己根据情况决定,呵呵

你可能感兴趣的:(css,ext,prototype,UP)