Extjs学习 Ext.form.FormPanel

最新推荐文章于 2024-07-25 15:08:11 发布

jazwoo

最新推荐文章于 2024-07-25 15:08:11 发布

阅读量2.6k

点赞数 1

分类专栏： Extjs 文章标签： extjs function 正则表达式 login stylesheet html

Extjs 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

ExtJS的表单是在html表单的基础上封装来的，样式变成漂亮的样式，但是如果你使用FireBug查看，你就会发现，这些表单控件依然是原来的<input>控件，只是加上了css，让他变得漂亮。

但是如果只是加上css样式，在我看来，ExtJS无法给我一个理由，让我选择它的表单控件，而不是选择<input>控件，因为我已经使用原有的控件相当熟练。

Extjs考虑了类似我这样的想法，它当然有更强大的功能。想想我们原有的<input>控件还有什么令我们不爽的地方，又有哪些功能得让我们反复的自己编写。魔兽世界里地精总说的一句话“需求是发明之母”，看看ExtJS为我们添加了什么功能。

1、输入框的数据校验

2、原来没有的Combox控件

html里面表单放到<form>之中，Ext里面表单则放到FormPanel中，FormPanel继承自Ext.Panel。所以FormPanel也可以被放在容器之中。

FormPanel有两种布局form(横向)和column(纵向)，这一章还将讲到FormPanel特有的form布局。

我们先添加一个FormPanel，并放置一个输入框、一个提交按钮创建一个最简单的表单

<html>
<head>
<title>跟浩然哥哥学习表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var myFormPanel = new Ext.form.FormPanel({
xtype: 'form',
title: '浩然哥哥的FormPanel',
width: 400,height: 400,
standardSubmit: true,
url: 'message_box.html',
items:
[

//在这里添加组件

{ xtype: 'textfield', fieldLabel: '输入框' }
],
buttons: [{ text: '提交', handler: login}]
});
var viewport = new Ext.Viewport({
items: [myFormPanel]
});
function login() {
myFormPanel.getForm().submit({
clientValidation: true,
waitMsg: 'Please wait...',
waitTitle: 'Hint',
method: 'GET',
success: function () {
Ext.Msg.alert('成功', '恭喜！表单提交成功');
},
failure: function () {
Ext.Msg.alert('失败', '对不起，表单提交失败！');
}
});
}
});
</script>
</head>
<body>

</body>
</html>

当前我们就创建了一个简单的FormPanel，接下来，我们一一添加表单组件。

一、文本输入框Ext.form.TextField

刚才我们已经添加一个文本输入框

................

                        items:
                        [
                            { xtype: 'textfield', fieldLabel: '输入框' }
                        ]

................

介绍TextField的配置属性

名称	说明	类型
allowBlank	是否允许为空	Boolean
blankText	为空验证失败后提示信息	String
emptyText	空字段时默认文字	String
grow	设置字段是否根据内容伸缩，设置为true后width属性无效。	Boolean
growMax	字段伸展的最大宽度（默认800）	Number
growMin	字段伸展的最小宽度（默认30）	Number
inputType	字段类型（默认text）	String
labelWidth	标签宽度	Number
maxLengthText	允许最大输入长度	Number
minLengthText	允许输入最小长度	Number
regex	javascript正则表达式	String
regexText	正则表达式失败提示信息	String
selectOnFocus	得到焦点是否自动选择已存在文本	Boolean
vtype	验证类型名称	String
vtypeText	自定义提示信息，代替vtype本身的错误提示信息	String
validator	在所有基本验证通过后调用函数	function

我们试着加上一个不允许为空，试着理解几个属性配置，回头您慢慢试其他的配置项。

................

                items:
                [
                  {

xtype: 'textfield',

fieldLabel: '输入框',

allowBlank:false,

blankText:'此处不能输入为空',

emptyText:'请输入用户名'

}
]

................

网页打开后

这里有我们配置好的默认的文字

里面是我们配置的文字，这并不是TextField里面的表单值，而是当没有输入值的时候，显示这几个字，当鼠标点击让它获得焦点后，几个字消失，当失去焦点后，如果内部还是没有值，那么这几个字又显示了。

我们试着提交一下。

仔细看，先是出现了一个很短暂的Ext.MessageBox.wait时间很短，然后弹出了提交失败时的效果

是我们代码中设置好的，表单提交失败时的设置效果。

关闭提示框后TextField出现效果

当我们点击它，让它获得焦点后，出现我们配置好的提示文字。

二、多行文本输入框Ext.form.TextArea
除了可以输入多行外，和Ext.form.TextField用法基本相同。

................

                {
                    xtype: 'textarea',
                    fieldLabel: '多行文本框',
                    width:300,             //设置宽
                    height:100             //设置高
                }

................

记住两点问题：1、width不是文本框的宽度，而是算上前面的标签总宽度

2、如果设置上grow:true，已经配置的height属性无效，width有效

三、单选框Ext.form.Radio

ExtJS里单选框继承自复选框

例：

                        {
                            xtype: 'radio',
                            boxLabel: '男',
                            name: 'sex',
                            inputValue: '1',
                            checked:true            //默认选中项
                        },
                        {
                            xtype: 'radio',
                            boxLabel: '女',
                            name: 'sex',
                            inputValue: '0'
                        }

对照一下html的单选框，有点基础的同学，很容易理解。

四、复选框Ext.form.Checkbox

唯一的区别就是把xtype的值从radio改为checkbox

看来我再仔细讲解，就是废话了，接下来你试着做成这个效果。

五、下拉列表框Ext.form.ComboBox

先来看看html原始的下拉框怎么编写

    <option value="2">JS</option>
    <option value="3">jquery</option>
    <option value="4">php</option>
</select>

value的值是此控件选中后实际值，和显示出来的值不同，有网页开发经验的人想必都知道。

我们再来看看Ext的下拉框，好看了很多。

Ext的下拉列表框就没有上面的组件那么简单了，使用起来复杂。需要定义数据源。看看代码。

]
});
var myFormPanel = new Ext.form.FormPanel({
xtype: 'form',
title: '浩然哥哥的FormPanel',
width: 400, height: 400,
standardSubmit: true,
url: 'message_box.html',
items:
[
{ xtype: 'textfield', fieldLabel: '输入框' },
{ xtype: 'textarea', fieldLabel: '多行文本框' },
{ xtype: 'checkbox',boxLabel: '男',name:'sex',inputValue:'1',checked: true},
{ xtype: 'checkbox', boxLabel: '女', name: 'sex', inputValue: '0' },
{
xtype: 'combo',

id: 'combo1',              //设一个id，后面的获取值的例子会用
store: store,              //下拉框数据来源
editable: false,           //是否允许直接输入值
emptyText: '请进行选择'
}

],
buttons: [{ text: '提交', handler: login}]
});

var viewport = new Ext.Viewport({
items: [myFormPanel]
});
function login() {

................

................
}
});
</script>

我们为下拉列表框定义了数据源store使用的是Ext.data.SimpleStore。没见过，和你一样我也是第一次碰到Ext.data.SimpleStore，先简单看一下，这里会用就行，下面的章节会详细的讲解。

定义了value text两个值，代表下拉框的取值和显示值。

信息是一个二维数组，存储了下拉框的值

extjs学习笔记---08--表单

还有一个属性<select>做不到，那就是可以直接输入值，而且输入的值可以是下拉框选项里面没有的。editable属性控制能否直接输入值，试着把editable: false改为 true或者去掉这句，因为true为默认。就会出现下面的效果。

我们在源代码其他的部分不变的基础上添加一个按钮，个这个按钮弹出获取值的功能。

buttons: [
{ text: '提交', handler: login },
{

text: '获取值',

handler: function ()

{

Ext.Msg.alert("获取提示", Ext.getCmp('combo1').getValue());

}

}
]

六、日期输入框Ext.form.DateField

这就是Ext的日期输入框，它使用很简单，看例子，看看它如何使用它。

items:
[
{ xtype: 'textfield', fieldLabel: '输入框' },
{ xtype: 'textarea', fieldLabel: '多行文本框' },
{ xtype: 'checkbox', boxLabel:'男',name:'sex',inputValue: '1',checked: true},
{ xtype: 'checkbox', boxLabel:'女',name:'sex',inputValue: '0' },
{
id: 'dd',
xtype: 'combo',
store: store,
editable: false, //是否允许直接输入值
emptyText: '请进行选择'
},
{
xtype: 'datefield',
fieldLabel: '生日', //前面的标题
format: 'Y-m-d', //显示出来的效果

//Y代表年，m代表月，d代表日
disabledDays: [0,6] //屏蔽掉的一周内特定日期0为周日
}

效果

可以获取到的值是Y-m-d格式即"年-月-日"格式，默认的格式是"d/m/Y"，格式你可以自己定，比如:

Y:m:d

Y年m月d日

可以加入的信息有：

Y：年的全称如2012
y：年的后两位简称如2012年去后两位12

m：月的数字3月为3

M：月的英文如3月为Feb

d：日的数字

D：选择日期的星期数英文如星期三Wed

七、在线编辑器Ext.form.HtmlEditor

在线编辑器的type是htmleditor，这是本章最后介绍的一个组件，我告诉你几个参数，看看你能不能做出来。

1、宽度500

2、高度400

3、标签不要

条件到此为止，试着做出来，下一章给答案，并且下一章我们试着实践一个表单应用。

FormPanel有两种布局：form和column，form是纵向布局，column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单，最重要的是正确分割，分割结果直接决定布局能否顺利实现。
如果不再使用默认布局，那么我们必须为每一个元素指定一种布局方式，另外，还必须遵循以下几点：
【1】落实到任何一个表单组件后，最后总是form布局
【2】defaultType属性不一定起作用，必须显式为每一个表单组件指定xtype或new出新对象
【3】在column布局中，通过columnWidth可以指定列所占宽度的百分比，如占50%宽度为.5。

剖析出一个合理的结构，像下面这样：

我们发现，布局其实是由行和列组件成，分成由左往右和由上往下两个方向，由左往右
叫column，由上往下叫form。

整个大的表单是form布局，从上往下放置了五个小布局，在这里我以行n标记，我们
以行1为例进行分析。行1从左往右有三个表单组件，所以是column布局，行1我们用结
构这样定义：
{
layout: “column”,
items:[{},{},{}] //items表示指定布局内的表单组件集合，在此有三个
}

行1内其实还有三个form布局，因为每个布局中只有一个表单组件，所以看起来并不
那么明显，我们完全可以放置多个表单组件到布局中。每一个布局使用下面的结构定义：
{
layout: “form”,
items:[{}] //只有一个表单组件
}

上面的两个结构最终要组装到一起：
{
layout: “column”,
items:[{
   layout: “form”,
   items:[{}]
},{
   layout: “form”,
   items: [{}]
},{
   layout: “form”,
   items: [{}]
}]
}

实现上面的完整代码是：

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
       title : "灵活布局的表单",
       width : 650,
       autoHeight : true,
       frame : true,
       renderTo : "a",
       layout : "form", // 整个大的表单是form布局
       labelWidth : 65,
       labelAlign : "right",

       items : [{ // 行1
        layout : "column", // 从左往右的布局
        items : [{
           columnWidth : .3, // 该列有整行中所占百分比
           layout : "form", // 从上往下的布局
           items : [{
              xtype : "textfield",
              fieldLabel : "姓",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : "名",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : "英文名",
              width : 120
             }]
          }]
       }, { // 行2
          layout : "column",
          items : [{
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : "座右铭1",
                width : 220
               }]
            }, {
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : "座右铭2",
                width : 220
               }]
            }]
         }, {// 行3
          layout : "form",
          items : [{
             xtype : "textfield",
             fieldLabel : "奖励",
             width : 500
            }, {
             xtype : "textfield",
             fieldLabel : "处罚",
             width : 500
            }]
         }, {// 行4
          layout : "column",
          items : [{
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "电影最爱",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "音乐最爱",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "明星最爱",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "运动最爱",
                width : 50
               }]
            }]
         }, {// 行5
          layout : "form",
          items : [{
             xtype : "htmleditor",
             fieldLabel : "获奖文章",
             enableLists : false,
             enableSourceEdit : false,
             height : 150
            }]
         }],
       buttonAlign : "center",
       buttons : [{
          text : "提交"
         }, {
          text : "重置"
         }]
      });
   });

jazwoo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Extjs学习 Ext.form.FormPanel

ExtJS的表单是在html表单的基础上封装来的，样式变成漂亮的样式，但是如果你使用FireBug查看，你就会发现，这些表单控件依然是原来的控件，只是加上了css，让他变得漂亮。但是如果只是加上css样式，在我看来，ExtJS无法给我一个理由，让我选择它的表单控件，而不是选择控件，因为我已经使用原有的控件相当熟练。 Extjs考虑了类似我这样的想法，它当然有更强大的功
复制链接

扫一扫

专栏目录