Ext之Form

最新推荐文章于 2019-01-17 10:14:30 发布

qinjingkai

最新推荐文章于 2019-01-17 10:14:30 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

文章标签： EXT JavaScript CSS HTML 浏览器 ViewUI

本文链接：https://blog.youkuaiyun.com/qinjingkai/article/details/83358513

form是开发中页面最经常用到的元素了,它的功能就是和用户交互,把用户输入的参数发送到后台,以及根据后台的处理结果执行进一步的操作;现在把Ext中的form总结如下(代码形式):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>测试001.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
    <script type="text/javascript" src="../scripts/ext/examples.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>


    <script type="text/javascript">

     var testForm;
     var testWindow;

    function doSubmit(){
     alert("提交信息");

   //表单提交代码
     testWindow.getComponent('testform').form.submit({
           url:'../addStudent.do?date'+new Date(),
           method:'post'

      });

    }






     function createForm(){
       testForm=new Ext.FormPanel({
           id:'testform',
           name:'testform',
           frame:true,    //显示边界,保留蓝色背景,否则为元素为白色
           width:400,
           height:400,
           items:[{
               xtype:'fieldset',
               title:'学生基本信息',
               id:'stuinfo',
               name:'stuinfo',
               width:400,
               height:200,

              /*为了保证不同浏览器之间的兼容性,最好把form的autoWidth和autoHeight两个属性都设为true*/
               collapsible:true,
               items:[

//一个普通的输入域

                      {
                      xtype:'textfield',
                      fieldLabel:'名字008',
                      name:'name',
                      id:'name',
                      value:'http://',
                      anchor:'95%'
                      },
                      {
                           xtype:'textfield',
                            fieldLabel:'性别',
                            id:'sex',
                            name:'sex',
                            anchor:'95%'
                      },
                      {      xtype:'datefield',
                            fieldLabel:'出生年月',
                            id:'birthday',
                            name:'birthday',
                            format:'Y-m-d',
                            anchor:'95%'
                      },
                      {
                               xtype:'textfield',
                               fieldLabel:'号码',
                               id:'passport',
                               name:'passport',
                               anchor:'95%'

                        }

               ]


           }],
           buttons:[
           {
             text:'提交',
             handler:doSubmit           //单击按纽后的事件函数
           },{
               text:'清空'
           }

           ],
           keys:[

//快捷键设置

            {
           key:Ext.EventObject.ENTER,
           fn:doSubmit,
           scope:this


           }]

       });



       testWindow=new Ext.Window({

           id:'testwindow',
           name:'testwindow',
           width:testForm.width,
           //height:testForm.width,

          modal:true, //当本窗口是子窗口时候,则当本窗口弹出时候,父窗口不可以编辑
           items:[testForm],
           onEsc:function(){
             alert("关闭了");
           }


       });

       testWindow.show();

     }


      Ext.onReady(function(){
        createForm();
      });



    </script>

</head>

<body>

</body>
</html>

最后总结一下Form中各个元素的常用属性:

1 一般的输入域

{

xtype:'textfield',

fieldLabel:'用户名',

id:'edit_SPID',

name:'operatorId',

allowBlank:false, //是否允许为空

vtype:'prolate_alphanum', //输入的格式限制,Ext自带的有url等格式

vtypeText:'请您输入A-Z,a-z,0-9的字母数字组合!', //当输入不合法时候的提示

minLength:4, 最少限制

minLengthText:'请您输入最少4个字符！', 少于最少限制时候的提示

maxLength:20,

maxLengthText:'请您输入最多20个字符！',

anchor:'90%' //占据form的比例 }

2 密码域

{

xtype:'textfield',

fieldLabel:'密码',

id:'edit_SPIP',

name:'operatorPassword',

inputType:'password',

minLength:6, minLengthText:'请您输入最少6个字符！',

maxLength:20, maxLengthText:'请您输入最多20个字符！',

allowBlank:false,

vtype:'prolate_alphanum',

vtypeText:'请您输入A-Z,a-z,0-9的字母数字组合!',

anchor:'90%' }]

3 日期域

{
                                 xtype:'datefield',
                                fieldLabel: mustFill+'完成时间',
                                id:'finishedBeforeId',
                                name: 'finishedBefore',
                                format: 'Y-m-d',
                                allowBlank:false,
                                anchor:'90%'
         }

4 下拉框

{
                                xtype:'combo',
                                id:'urgentLevel',
                                hiddenName: 'urgentLevelId',
                                store: pub_UrgentLevelStore,
                                   fieldLabel: mustFill+'紧急程度',
                                loadingText:'正在加载...',
                                 displayField:'urgentDesc',
                                valueField:'urgentCode',
                                mode:'local',
                                emptyText: '请选择紧急程度...',
                                triggerAction:'all',
                                editable:true,
                                selectOnFocus:true,
                                forceSelection:true,
                                allowBlank:false,
                                anchor:'90%'
                            }

5 文本编辑域

{
                                xtype:'htmleditor',
                                fieldLabel:'工单内容',
                                id: 'contentId',
                                name: 'content',
                                height:200,
                                anchor:'90%'
                            }

6 文本域

... {

xtype: " textarea " ,

name: " intro " ,

fieldLabel: " 简介 " }

7 数字域:

{
                               xtype:'numberfield',
                               fieldLabel:'号码',
                               id:'passport',
                               name:'passport',
                               anchor:'95%'

                        }

8 隐藏域

{                         xtype:'hidden',
                            fieldLabel:'公司名称',
                            id:'companyId',
                            name:'companyId',
                               value:isNULL(record,'companyId'),
                            anchor:'95%'}

其他:

01 提示窗口

Ext.MessageBox.confirm ('提示信息','确定要删除吗',function(btn){
                     if(btn=='yes'){
                        alert("准备删除了");
                     }

                  });

02 刚打开窗口时候不检测(如必填字段初始是不显示特别颜色等)

editCompanyForm.getForm().reset();

03 如果form中的控件显示出现了问题(如combox等),则可以在<script ...>后面(也就是给内容相当与一个函数),加多一句:

Ext.BLANK_IMAGE_URL = '../scripts/ext/resources/images/s.gif';

04 等待过程友好显示

Ext.MessageBox.show({title:"提示",msg:"正在处理您的请求，请稍候...",progress:true,width:300,wait:true,waitConfig:{interval:500},closable:true});

如果要隐藏则调用Ext.MessageBox.hide();