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

上一篇: javascript代码实例教程-Extjs4―... 下一篇:javascript代码实例教程-javascr...

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

发布时间：2019-05-30 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-EXTJs 表单控件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<1>TextField 文本输入控件

[javascript]
<htML> 
<head>
    <;meta http-equiv="Content-tyPE" content="text/html; charset=gb2312">
    <tITle>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            //Ext.form.TextField
            VAR textField = new Ext.form.TextField(
                {
                    fieldLabel:'用户名',
                    allowBlank:false,//不允许为空
                    emptyText:'请填写用户名',//输入为空时提示的默认信息
                    maxLength:10,//限制输入的数据在5-10之间
                    minLength:5,
                }
            );
            //Ext.form.FormPanel
            var form = new Ext.form.FormPanel(
                {
                    title:'表单控件',
                    frame:true,
                    items:[textField],
                    renderTo:'form'
                }
            );
        }
    );
    </script>
</head>
<body>
    <p id = "form" style = "width:700px;">
    </p>
    <br>
</body>
</html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
  Ext.onReady(function(){
   //Ext.form.TextField
   var textField = new Ext.form.TextField(
    {
     fieldLabel:'用户名',
     allowBlank:false,//不允许为空
     emptyText:'请填写用户名',//输入为空时提示的默认信息
     maxLength:10,//限制输入的数据在5-10之间
     minLength:5,
    }
   );
   //Ext.form.FormPanel
   var form = new Ext.form.FormPanel(
    {
     title:'表单控件',
     frame:true,
     items:[textField],
     renderTo:'form'
    }
   );
  }
);
</script>
</head>
<body>
<p id = "form" style = "width:700px;">
</p>
<br>
</body>
</html>

<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'
                }
            );