[b]微调组件[/b]是一个具有上下控制按钮的输入组件,该组件一般不直接使用而是作为父类被子类所继承,它的子类需要实现onSpinUp(向上按钮触发的时间)和onSpinDown(向下按钮触发的时间)方法。微调控件很适合于对输入的精细控制,非常便于数字数据的输入,我们可以使用该组件控制非数据的输入。
Ext.form.field.Picker拾取器字段:是一个抽象类,具有唯一个触发按钮用于在字段下方动态弹出拾取面板。通常不能被实例化,而是使用它的子类,在子类中,需要实现createPicker方法来创建用于字段选择的一个拾取器组件。如:Ext.form.field.Date、Ext.form.field.Time、Ext.form.field.ComboBox
Ext.form.field.ComboBox 组合框:支持自动完成、远程加载数据、分页等特性
[b]本地数据源[/b]:
//本地数据源的组合框 创建数据模型
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'//默认选择大兴
}
[b]远程查询数据源[/b]:
//创建数据类型
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);
}
[b]Ext.form.field.Time 时间框[/b]:扩展自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:'时间格式无效'
}
[b]Ext.form.field.Date日期选择框[/b]:是带下拉日期拾取器输入组件,并提供了自动的日期验证功能。
//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配置项中存在的日期格式,否则无效。
Ext.form.field.Picker拾取器字段:是一个抽象类,具有唯一个触发按钮用于在字段下方动态弹出拾取面板。通常不能被实例化,而是使用它的子类,在子类中,需要实现createPicker方法来创建用于字段选择的一个拾取器组件。如:Ext.form.field.Date、Ext.form.field.Time、Ext.form.field.ComboBox
Ext.form.field.ComboBox 组合框:支持自动完成、远程加载数据、分页等特性
[b]本地数据源[/b]:
//本地数据源的组合框 创建数据模型
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'//默认选择大兴
}
[b]远程查询数据源[/b]:
//创建数据类型
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);
}
[b]Ext.form.field.Time 时间框[/b]:扩展自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:'时间格式无效'
}
[b]Ext.form.field.Date日期选择框[/b]:是带下拉日期拾取器输入组件,并提供了自动的日期验证功能。
//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配置项中存在的日期格式,否则无效。