ASP.NET+ExtJs4.0+FieldContainer的用法

最新推荐文章于 2018-10-18 17:29:13 发布

LMAOhuaNL

最新推荐文章于 2018-10-18 17:29:13 发布

阅读量7.2k

点赞数

分类专栏： asp.Net Ext Js 文章标签： extjs asp.net layout stylesheet xhtml javascript

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6792011

版权

asp.Net 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

Ext Js

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="extjs/ext-all.js" type="text/javascript"></script>
    <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var left_Container = new Ext.form.FieldContainer({
            layout: { type: "vbox" },
            width: 480,
            height:300,
            items: [
                { xtype: "fieldcontainer", layout: { type: "hbox" },width:480, items: [
                    { fieldLabel: "姓名", xtype: "textfield", labelWidth: 60, margin: "5 0 0 5",labelAlign:"right" },
                    { fieldLabel: "编号", xtype: "textfield", labelWidth: 90, margin: "5 0 0 5",labelAlign:"right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "人才类型", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "性别", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "身份证", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "出身日期", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "联系电话", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "联系地址", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "电子邮箱", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "视力", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "身高", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "体重", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "现居住地", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "血型", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { xtype: "fieldcontainer", layout: { type: "hbox" }, width: 480, items: [
                    { fieldLabel: "健康状况", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" },
                    { fieldLabel: "婚姻状况", xtype: "textfield", labelWidth: 90, margin: "0 0 0 5", labelAlign: "right" }
                ]
                },
                { fieldLabel: "政治面貌", xtype: "textfield", labelWidth: 60, margin: "0 0 0 5", labelAlign: "right" }
            ]
        });
        var right_Container = new Ext.form.FieldContainer({
            height: 300,
            width: 270,
            layout: { type: "vbox", align: "center" },
            items: [
                { xtype: "fieldset", width: 170, height: 200, title: "个人照片", margin: "10 0 10 0" },
                { xtype: "filefield" ,fieldLabel:"选择照片",labelWidth:60}
            ]
        });
        var tab = new Ext.tab.Panel({
            items: [
                { title: "基本信息", frame: true, layout: { type: "vbox", align: "center" }, items: [
                    { xtype: "fieldset", width: 750, height: 300, items: [left_Container, right_Container], layout: {type:"hbox"} },
                    { xtype: "fieldset", width: 750, height: 200 }
                ]
                },
                { title: "详细信息", frame: true }
            ]
        });
        Ext.onReady(function () {
            var win = new Ext.window.Window({
                width: 800,
                height: 600,
                title: "成都海翔技术有限公司-职位申请表",
                layout: "fit",
                items: [{ xtype: "form", frame: true, layout: "fit", items: [tab]}]
            });
            win.show();
        });
    </script>
</head>
<body>

</body>
</html>

预览效果如下：

LMAOhuaNL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET+ExtJs4.0+FieldContainer的用法

var left_Container = new Ext.form.FieldContainer({ layout: { type: "vbox" }, width: 480, height:300,
复制链接

扫一扫

专栏目录