ExtJS入门教程02,form也可以很优雅

简介:

在上一篇《Extjs window 入门》中,我们已经看到了如何将一个form组件放到window中,今天我们来看看form的一些优雅的工作方式。

使用fieldDefaults,优雅的设置字段默认值

form中的子项,通常都是field控件,而这些field控件通常都会使用一些相同的配置,例如labelWidth、labelAlign等,如果在每一个field中设置这些属性就会显得比较繁琐,这个时候我们就需要用到fieldDefaults配置项:

{
    xtype: "form",
    bodyPadding: 5,
    border: false,
    fieldDefaults: {
        labelWidth: 50,
        labelAlign: "right"
    },
    items: [
        {
            xtype: "textfield",
            fieldLabel: "姓名",
            name: "UserName"
        },
        {
            xtype: "textarea",
            fieldLabel: "留言",
            name: "Comment"
        }
    ]
}

使用load()方法,优雅的加载数据

向form中绑定数据的方法有好几种,我们先来看看如何通过异步的方式从服务器来获取数据的:

win.down("form").getForm().load({
    url: "form-data.ashx"
});

服务器端返回的数据格式如下:

{
    success:true,
    data:{
        UserName:'QeeFee',    
        Comment:'齐飞是个程序员'
    }
}

这个时候我们的form就会自动将data中的UserName和Comment绑定到界面中:

image

前面提到,通过ajax异步加载是众多加载方式中的一种,这时候小伙伴开始问了,那么其他的加载方式呢?

其他还有两种,是用来加载本地(内存)数据的,例如我们已经存在了一个data数据:

var data = {
    UserName: 'QeeFee',
    Comment: '齐飞是个程序员'
};

我们要把这个data绑定到form中,该怎么做呢?看下面的代码:

win.down("form").getForm().setValues(data);

一样的效果,不再截图了。

接下来是第三种方式,加载record数据。首先,我们的record是需要先定义model的,不了解model是什么的朋友请移步>>ExtJS 4.2 教程-04:数据模型

首先定义一个数据模型:

Ext.define("CommentModel", {
    extend: "Ext.data.Model",
    fields: [
        { name: "UserName", type: "string" },
        { name: "Comment", type: "string" }
    ]
});

有了模型以后,我们需要来创建一个模型的对象:

var comment = Ext.create("CommentModel", {
    UserName: 'QeeFee',
    Comment: '齐飞是个程序员'
});

接下来我们就该完成绑定了:

win.down("form").getForm().loadRecord(comment);

这个时候是不是有些怕麻烦的小伙伴已经开始抱怨了,这么麻烦啊……

其实不是这个样子的,麻烦自然有麻烦的道理。使用这种绑定方法,我们可以方便的更新模型对象的数据:

win.down("form").updateRecord();
var record = win.down("form").getRecord();
Ext.MessageBox.alert("提示", record.get("UserName"));

看到了吧小伙伴,我们可以使用form逆向的更新record,是不是方便了很多呢?

使用submit()方法,优雅的提交数据

submit()方法和load()方法的用法非常相似,我们可以通过submit方法非常方便的将form表单数据提交到服务器:

win.down("form").submit({
    url: "form-submit.ashx",
    success: function (form, action) {
        Ext.Msg.alert('Success', action.result.msg);
    }
});

我们来跟踪一下服务器接收到的数据:

image

界面超难看,试试用layout来组织界面

小伙伴看看我们上面的form界面,右侧空出很大一片,是不是很丑?

可能你会觉得为form和field加上width属性,问题自然就解决了,但是如果我们改变了window的宽度呢?仍然去修改form和field吗?

小伙伴们,是时候使用layout了!

关于extjs的layout,不明白的小伙伴可以参考我之前的文章>>ExtJS 4.2 教程-08:布局系统详解

接下来我们为window和form添加上布局配置:

{
    xtype: "form",
    bodyPadding: 5,
    border: false,
    layout: "form",
    fieldDefaults: {
        labelWidth: 50,
        labelAlign: "right"
    },
    items: [
        {
            xtype: "textfield",
            fieldLabel: "姓名",
            name: "UserName"
        },
        {
            xtype: "textarea",
            fieldLabel: "留言",
            name: "Comment"
        }
    ]
}

再次打开窗口,看看是不是好了很多:

image

接下来我们演示一个较为复杂的form:

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "complex form",
        width: 500,
        height: 300,
        layout: "fit",
        items: {
            xtype: "form",
            bodyPadding:5,
            border: false,
            layout: "form",
            fieldDefaults: {
                labelWidth: 60,
                labelAlign: "right"
            },
            items: [
                {
                    xtype: "fieldcontainer",
                    layout: "hbox",
                    items: [
                        { xtype: "textfield", name: "UserName", fieldLabel: "用户名", flex: 1 },
                        { xtype: "textfield", name: "Age", fieldLabel: "年龄", flex: 1 }
                    ]
                },
                {
                    xtype: "fieldcontainer",
                    layout: "hbox",
                    items: [
                        { xtype: "textfield", name: "TelPhone", fieldLabel: "电话", flex: 1 },
                        { xtype: "textfield", name: "Email", fieldLabel: "Email", flex: 1 }
                    ]
                },
                {
                    xtype: "textarea",
                    fieldLabel: "备注"
                }
            ]
        },
        buttons: [
            { text: "保存" },
            { text: "取消" }
        ]
    });
    win.show();
});

这是一个稍微复杂一点的form,它用到了fieldcontainer来组织字段,效果如下:

image

小伙伴们,我决定把form的验证放到明天的文章中进行介绍,请原谅我偷懒。谢谢各位!




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-starter-02-form.html,如需转载请自行联系原作者

相关文章
|
移动开发 开发框架 JavaScript
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
|
JavaScript 前端开发 API
|
前端开发 JavaScript .NET
|
JSON JavaScript 数据格式