ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]

前言
　　本以为可以稳稳当当的工作、安安心心的写文章，结果我做了一件非常疯狂的事情，换新工作一周后辞了——然后去了另外一家公司 - - #，理由就不详说了，总之现在是每天加班到8-9点，虽然如此但是这个团队非常棒，喜欢这里的气氛，大家都努力的工作着，经理也是常睡在公司，希望产品顺顺利利的月底上线，我也加油！不过这样一来文章可能会慢点，挤挤时间吧: )
　　本篇主要是将对Ext常用控件和属性进行封装，以减少动辄几百行的JS代码，也方便使用。

系列
　　1.　　 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="esayadd.aspx.cs" Inherits="esayadd" %>

<!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 runat="server">
    <title>表单控件</title>
</head>
<body>
    <form id="form1" runat="server">
<script type="text/javascript">
    Ext.onReady(function() {

        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';

        var form1 = new Ext.FormPanel({
            layout: 'form',
            collapsible: true,
            autoHeight: true,
            frame: true,
            renderTo: Ext.getBody(),
            title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
            style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
            //设置标签对齐方式
            labelAlign: 'right',
            //设置标签宽
            labelWidth: 170,
            //设置按钮的对齐方式
            buttonAlign:'center',
            //默认元素属性设置
            defaults:{
                    width:180
                },
            items: [
                new TextField('TextBox','文本框控件'),
                new NumberField('TextBoxNumber','只允许输入数字'),
                new ComboBox('DropDownList','下拉框控件',[[1,'男'],[0,'女']]),
                new DateField('DateControl','日历控件'),
                new RadioGroup('RadioItems','单选控件',[['选我','A',true],['选我吧','B']]),
                new CheckboxGroup('CheckboxItems','复选控件',[['香蕉','A'],['苹果','B'],['橘子','C'],['桃子','D']],3),
                new TextArea('textarea','文本域控件',null,50,'可以输好多字！'),
                new TimeField(null,'时间控件',60,'H:i'),
                new FieldSet('标签页','标签页',[new Panel('标签页中的面板',null,50,true)]),
                new HtmlEditor('htmleditor','在线编辑器',260,100)
            ],
            buttons: [{
                text: "保存"
                ,handler:function(){
                    MsgError('错误');
                    MsgWarning('警告');
                    MsgInfo('提示');
                    MsgConfirm('确认');
                }
            }, {
                text: "取消"
                ,handler:function(){
                    form1.form.reset();
                }
            }]
        });
    });
    </script>
    </form>
</body>
</html>