微调组件是一个具有上下控制按钮的输入组件,该组件一般不直接使用而是作为父类被子类所继承,它的子类需要实现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配置项中存在的日期格式,否则无效。
分享到:
相关推荐
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
修改extjs控件,支持只选择年月,或者只选择年。 只要设置format:“Y-m”,"Y"即可。 xtype:'monthfield' 因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m...
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
extjs时间空间精确秒
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
自己新写的extjs年份控件,直接new Ext.ux.MyYear 即可使用
extjs控件,是本科的毕业设计,最后获得优秀,老师评价非常好。主要有图表控件、一级、二级、三级联动下拉列表框控件
extjs 时间控件
用户信息添加的表单 内有效果图 extjs 常用控件的使用 table layout 作业9
extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件
ExtJs图片按钮控件:设置文字、文字颜色、背景图片、是否可用
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
ExtJS6 modern版 日历控件的demo,可以 搜索文章 “ExtJS 日历Calendar 控件 使用”来参考使用
EXTJS时间年月日时分秒控件。内附详细的使用说明。供大家参考学习。
extjs4.1部分控件示例 MVC2 VS2010
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
extjs扩展年度控件,EXTJS里的时间控件的年度重写
Extjs日期控件汉化版