摘要:<1>TextField 文本输入控件 [javascript] ? ? ??? ? ??? Ext Buttons? ??? ? ??? ? ??? ? ??? ? ??? ? ? ? ???

? ???

? ???
? ? ?

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-EXTJs 表单控件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

<1>TextField 文本输入控件

[javascript]
?
?
??? ?
??? Ext Buttons?
??? ?
??? ?
??? ?
??? ?
??? ?
?
?
???

?
???

?
???
?
?
?



???
??? Ext Buttons
???
???
???
???
?


?


?


?


?

<2>TextArea多行文本输入控件

[javascript]
/Ext.form.TextArea??
??????????? var textArea = new Ext.form.TextArea(?
??????????????? {?
??????????????????? width:200,//宽度??
??????????????????? grow:true,//当值为 true 时表示字段可以根据内容自动伸缩??
??????????????????? preventScrollbars:true,//防止出现滚动条,如果超出会自动隐藏??
??????????????????? fieldLabel:'自我介绍',?
??????????????????? allowBlank:false,//不允许为空??
??????????????????? emptyText:'空',//输入为空时提示的默认信息??
??????????????????? maxLength:100,//限制输入的数据在10-100之间??
??????????????????? minLength:10,?
??????????????? }?
??????????? );?
??????????? //Ext.form.FormPanel??
??????????? var form = new Ext.form.FormPanel(?
??????????????? {?
??????????????????? title:'表单控件',?
??????????????????? frame:true,?
??????????????????? items:[textArea],?
??????????????????? renderTo:'form'?
??????????????? }?
??????????? );?

//Ext.form.TextArea
???var textArea = new Ext.form.TextArea(
????{
?????width:200,//宽度
?????grow:true,//当值为 true 时表示字段可以根据内容自动伸缩
?????preventScrollbars:true,//防止出现滚动条,如果超出会自动隐藏
?????fieldLabel:'自我介绍',
?????allowBlank:false,//不允许为空
?????emptyText:'空',//输入为空时提示的默认信息
?????maxLength:100,//限制输入的数据在10-100之间
?????minLength:10,
????}
???);
???//Ext.form.FormPanel
???var form = new Ext.form.FormPanel(
????{
?????title:'表单控件',
?????frame:true,
?????items:[textArea],
?????renderTo:'form'
????}
???);

?

当grow:false?? preventScrollbars:false时如果内容超出显示范围会出现滚动条

?

<3>DateField日期输入控件

[javascript]
//Ext.form.DateField??
??????????? var dateField = new Ext.form.DateField(?
??????????????? {?
??????????????????? fieldLabel:'生日',?
??????????????????? emptyText:'请选择',//输入为空时提示的默认信息??
??????????????????? format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串??
??????????????????? disableDays:[0,6]//一个以字串形式表示的禁用的日期数组??
??????????????? }?
??????????? );?
??????????? //Ext.form.FormPanel??
??????????? var form = new Ext.form.FormPanel(?
??????????????? {?
??????????????????? title:'表单控件',?
??????????????????? frame:true,?
??????????????????? items:[dateField],?
??????????????????? renderTo:'form'?
??????????????? }?
??????????? );?

//Ext.form.DateField
???var dateField = new Ext.form.DateField(
????{
?????fieldLabel:'生日',
?????emptyText:'请选择',//输入为空时提示的默认信息
?????format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串
?????disableDays:[0,6]//一个以字串形式表示的禁用的日期数组
????}
???);
???//Ext.form.FormPanel
???var form = new Ext.form.FormPanel(
????{
?????title:'表单控件',
?????frame:true,
?????items:[dateField],
?????renderTo:'form'
????}
???);

?

<4>TimeField时间输入控件

[javascript]
//Ext.form.TimeField??
??????????? var timeField = new Ext.form.TimeField(?
??????????????? {?
??????????????????? fieldLabel:'时间',?
??????????????????? emptyText:'请选择',//输入为空时提示的默认信息??
??????????????????? minValue:'10:30 AM',//起始时间??
??????????????????? maxValue:'14:00 PM',//结束时间??
??????????????????? increment:30//时间间隔为30分钟??
??????????????? }?
??????????? );?
??????????? //Ext.form.FormPanel??
??????????? var form = new Ext.form.FormPanel(?
??????????????? {?
??????????????????? title:'表单控件',?
??????????????????? frame:true,?
??????????????????? items:[timeField],?
??????????????????? renderTo:'form'?
??????????????? }?
??????????? );?

//Ext.form.TimeField
???var timeField = new Ext.form.TimeField(
????{
?????fieldLabel:'时间',
?????emptyText:'请选择',//输入为空时提示的默认信息
?????minValue:'10:30 AM',//起始时间
?????maxValue:'14:00 PM',//结束时间
?????increment:30//时间间隔为30分钟
????}
???);
???//Ext.form.FormPanel
???var form = new Ext.form.FormPanel(
????{
?????title:'表单控件',
?????frame:true,
?????items:[timeField],
?????renderTo:'form'
????}
???);

?

<5>HtmlEditor在线编辑器

[javascript]
//Ext.form.HtmlEditor??
??????????? var htmlEditor = new Ext.form.HtmlEditor(?
??????????????? {?
??????????????????? fieldLabel:'留言',?
??????????????????? enableAlignments:true,//允许居左、居中、居右按钮(默认为 true)。??
??????????????????? enableColors:true,//允许前景/高亮颜色按钮??
??????????????????? enableFontSize:true,//允许增大/缩小字号按钮(默认为 true)。??
??????????????????? enableFont:true,//允许字体选项。??
??????????????????? enableFormat:true,//允许粗体、斜体和下划线按钮(默认为 true)。??
??????????????????? enableLinks:true,//允许创建链接按钮。??
??????????????????? enableLists:true,//允许项目和列表符号按钮。??
??????????????????? enableSourceEdit:true,//允许切换到源码编辑按钮。??
??????????????? }?
??????????? );?
??????????? //Ext.form.FormPanel??
??????????? var form = new Ext.form.FormPanel(?
??????????????? {?
??????????????????? title:'表单控件',?
??????????????????? frame:true,?
??????????????????? items:[htmlEditor],?
??????????????????? renderTo:'form'?
??????????????? }?
??????????? );?

javascript代码实例教程-EXTJs 表单控件-脚本宝典

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!?js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-EXTJs 表单控件

全部内容,希望文章能够帮你解决

javascript代码实例教程-EXTJs 表单控件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过