ExtJS 微调控件ComnoBox和Time、Date的使用

微调组件是一个具有上下控制按钮的输入组件，该组件一般不直接使用而是作为父类被子类所继承，它的子类需要实现onSpinUp（向上按钮触发的时间）和onSpinDown（向下按钮触发的时间）方法。微调控件很适合于对输入的精细控制，非常便于数字数据的输入，我们可以使用该组件控制非数据的输入。
Ext.form.field.Picker拾取器字段：是一个抽象类，具有唯一个触发按钮用于在字段下方动态弹出拾取面板。通常不能被实例化，而是使用它的子类，在子类中，需要实现createPicker方法来创建用于字段选择的一个拾取器组件。如：Ext.form.field.Date、Ext.form.field.Time、Ext.form.field.ComboBox
Ext.form.field.ComboBox 组合框：支持自动完成、远程加载数据、分页等特性
本地数据源：
//本地数据源的组合框 创建数据模型
Ext.regModel('PostInfo',{
fields:[{name:'province'},{name:'post'}]
});
//定义组合框中显示的数据源
var postStore=Ext.create('Ext.data.Store',{
model:'PostInfo',
data:[
  {province:'北京',post:'100000'},
  {province:'通县',post:'101100'},
  {province:'昌平',post:'102200'},
  {province:'大兴',post:'102600'},
  {province:'密云',post:'101500'},
  {province:'延庆',post:'102100'},
  {province:'顺义',post:'101300'},
  {province:'怀柔',post:'101400'}
]
});
//Ext.form.field.ComboBox组合框
//本地数据源的组合框
{
xtype:'combo',
listConfig:{
  emptyText:'为找到匹配项',//当值不存在列表时的提示信息
  maxHeight:100//设置下拉列表的最大高度
},
name:'post',
fieldLabel:'邮政编码',
triggerActio:'all',//单击触发按钮会显示全部数据
store:postStore,//数据源
displayField:'province',//定义要显示的字段
valueField:'post',//定义值字段
queryMode:'local',//本地模式
forceSelection:true,//要求输入值必须在列表中
typeAhead:true,//允许自动选择匹配的剩余部分文本
value:'102600'//默认选择大兴
}

远程查询数据源：
//创建数据类型
Ext.regModel('BookInfo',{
fields:[{name:'bookName'}]
});
//定义组合框中显示的数据源
var bookStore=Ext.create('Ext.data.Store',{
model:'BookInfo',
proxy:{
  type:'ajax',//Ext.data.Store
  url:'<%=basePath%>user/searchBook',
  reader:new Ext.data.ArrayReader({model:'BookInfo'}) //服务器端程序用于生成客户端组合框需求的数据格式：[['a'],['b'],['c']]
}
});
//远程数据源的组合框
{
xtype:'combo',
fieldLabel:'书籍列表',
listConfig:{
  loadingText:'正在加载书籍信息',
  emptyText:'未找到匹配值',
   maxHeight:60,
   width:300
},
allQuery:'allbook',//查询全部信息的查询字符串
minChars:3,
queryDelay:300,
queryParam:'searchbook',//查询的名字
triggerAction:'all',//单击触发按钮显示全部数据
store:bookStore,
displayField:'bookName',
valueField:'bookName',
queryMode:'remote'
}

后台代码：
//服务器端程序用于生成客户端组合框需求的数据格式：[['a'],['b'],['c']]
String  bookName=request.getParameter("searchbook");
String jav="['java编程思想'],['java入门'],['javascript程序设计']";
String cpp="['c++编程思想'],['java入门'],['c++程序设计']";
String php="['php编程思想'],['php入门'],['php程序设计']";
String  books="";
if(bookName.equals("allbook")){
books="["+jav+","+cpp+","+php+"]";
response.getWriter().write(books);
}else{
bookName=bookName.substring(0,3);
if(bookName.equals("jav")){
books="["+jav+"]";
}else  if(bookName.equals("cpp")){
books="["+cpp+"]";
}else  if(bookName.equals("php")){
books="["+php+"]";
}else{
books="[['没有数据']]";
}
response.getWriter().write(books);
}
Ext.form.field.Time 时间框：扩展自Ext.from.field.Picker组件，是一个带下拉选择框的时间输入字段，并具有自动的实践验证功能。
Eg：//Ext.form.field.Time 时间选择框
{
fieldLabel:'时间选择框',
xtype:'timefield',
width:220,
labelSeparator:':',//分隔符
msgTarget:'side',//字段右边显示提示信息
autoFitErrors:false,//显示错误信息时是否自动调整字段组件宽度
maxValue:'18:00',//最大时间
maxText:'时间应小于{0}',//
minValue:'10:00',
minText:'时间应大于{0}',
pickerMaxHeight:70,//下拉列表的最大高度
increment:60,//时间间隔为60分钟
format:'G时i分s秒',//G：24 时计时法
invalidText:'时间格式无效'
}
Ext.form.field.Date日期选择框：是带下拉日期拾取器输入组件，并提供了自动的日期验证功能。
//Ext.from.field.Date
{
fieldLabel:'日期选择框',
xtype:'datefield',
labelSeparator:':',
msgTarget:'side',
autoFitErrors:false,
format:'Y年m月d日',
maxValue:'12/31/2088',//显示的最大日期
minValue:'01/01/2008',//显示的最小日期
disabledDates:["2013年06月05日","2013年06月04日"],//禁止选择的日期
disabledDatesText:'禁止选择该日期',
disabledDays:[0,6],//禁止选择星期日和星期六
disabledDaysText:'禁止以选择星期日和星期六',
width:220,
value:'06/07/2013'//显示的当前日期
}
注：1、disabledDates的日期格式必须与format中设置的日期格式相同，否则不起作用。
2、maxValue和minValue的格式必须是altFormats配置项中存在的日期格式，否则无效。