好了,我们继续写 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 的格式的,这个自己根据情况决定,呵呵