ExtJs4_FormFieldTypes示例浅谈;

/**
 * ExtJs4
 * =》FormFieldTypes示例
 * 亮点：form表单所支持的各种元素；
 */
Ext.require([
    'Ext.form.*'
]);
Ext.onReady(function() {
    var formpanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        
        title: "FormFields_表单元素汇总",
        width: 350,
        frame: true,
        bodyPadding: 5,
        
        fieldDefaults: {
            labelAlign: "right",
            labelWidth: 90,
            anchor: "100%"    // 自动延伸；
        },
        
        items: [{
            xtype: "textfield",     // 文本输入框；
            fieldLabel: "Textfield",
            name: "textname",
            value: "Text field value"    // 初始值；
        }, {
            xtype: "textfield",        // 文本输入框_密码类型；
            fieldLabel: "PasswordField",
            inputType: "password",
            name: "pswname"
        }, {
            xtype: "filefield",     // 上传控件；
            fieldLabel: "Fileupload",
            name: "filename"
        }, {
            xtype: "textareafield",        // 文本区域输入框；
            fieldLabel: "TextArea",
            name: "textareaname",
            value: "Textarea value"
        }, {
            xtype: "displayfield",     // 显示组件；
            fieldLabel: "Displayfield",
            name: "playname",
            value: "<span style='color: green;'>displayvalue</span>"
        }, {
            xtype: "numberfield",    // 数字选择控件；
            fieldLabel: "Numberfield",
            name: "numbername",
            value: 23,
            minValue: 0,
            maxValue: 230
        }, {
            xtype: "checkboxfield",        // 确认框；
            fieldLabel: "Checkbox",
            name: "checkboxname",
            boxLabel: "<span style='color: green;'>boxLabel</span>",
            checked: true
        }, {
            xtype: 'radiofield',    // 两个单选按钮组成组；
            fieldLabel: 'RadioButtons',
            name: 'radiof',
            inputValue: 'radiovfirst',    // 注意：如果多个合成组，那就得用inputValue设置值，否则不行；
            boxLabel: 'radiofname'
        }, {
            xtype: 'radiofield',
            fieldLabel: '',
            labelSeparator: '',
            name: 'radiof',
            inputValue: 'radiosecond',
            hideEmptyLabel: false,
            boxLabel: 'radiosname'
        }, {
            xtype: "radiogroup",     // 单选按钮组；
            fieldLabel: "Radiogroup",
            name: "radiogroupname",
            columns: 3,    // 三列；
            vertical: false,
            items: [{
                boxLabel: "Item1", name: "radiogroupname", inputValue: "r1"
            }, {
                boxLabel: "Item2", name: "radiogroupname", inputValue: "r2"
            }, {
                boxLabel: "Item3", name: "radiogroupname", inputValue: "r3", checked: true
            }, {
                boxLabel: "Item4", name: "radiogroupname", inputValue: "r4"
            }, {
                boxLabel: "Item5", name: "radiogroupname", inputValue: "r5"
            }]
        }, {
            xtype: "datefield",    // 日期选择控件；
            fieldLabel: "DateFieldd",
            name: "datename",
            format: "Y-m-d",
            value: new Date()
        }, {
            xtype: "timefield",        // 时间选择控件；
            fieldLabel: "TimeField",
            name: "timename",
            format: "H:i A",     // 24小时制；
            value: new Date(),
            //value: "21:00 PM",
            minValue: "07:00 AM",
            maxValue: "23:00 PM"
        }],
        
        buttons: [{
            text: "获取",
            handler: function(btn) {
                var bf = btn.up("form").getForm(),
                    values = bf.getValues(true);
                // 打印查看相关数据：
                console.log(values.split("&"));
            }
        }, {
            text: "重置",
            handler: function(btn) {
                btn.up("form").getForm().reset();
            }
        }]
    });
});