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

<!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>

预览效果如下:


 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值