ExtJs4_DynamicForms示例浅析;

/**
 * DynamicForms示例浅析
 * 花絮：Dynamic Forms built with JavaScript;
 * 示例目标：如何创建以及布局表单；
 */
 
Ext.require([
    "Ext.form.*",
    "Ext.layout.container.Column",
    "Ext.tab.Panel"
]);
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    // the first Form: simple form;
    var firstfh = document.createElement("h4"),
        ftextNode = document.createTextNode("表单示例");
    firstfh.appendChild(ftextNode);
    document.body.appendChild(firstfh);
    
    var bd = Ext.getBody();
    bd.createChild({tag: 'hr'});
    bd.createChild({tag: 'h5', html: "Form1-VerySimpleDemo"});
    
    // 1、simpleFormt
    var simpleForm = Ext.create('Ext.form.Panel', {
        url: "resources/js/submit.jsp",
        title: "SimpleForm",
        frame: true,
        width: 350,
        bodyStyle: "padding: 5px 5px 0 5px",
        
        fieldDefaults: {
            msgTarget: "side", // 无效信息在旁边显示；
            labelAlign: "right",
            labelWidth: 75
        },
        defaultType: "textfield",
        defaults: {
            anchor: "100%"
        },
        
        items: [{
            fieldLabel: "FirstName",
            name: "first",
            allowBlank: false    // 不允许为空；
        }, {
            fieldLabel: "LastName",
            name: "last"
        }, {
            fieldLabel: "所在公司",
            name: "company"
        }, {
            fieldLabel: "邮箱地址",
            name: "email",
            vtype: "email"
        }, {
            fieldLabel: "注册时间",
            xtype: "timefield",
            name: "time",
            minValue: '6:00am',
            maxValue: '21:00pm',
            increment: 30,    // 间隔30分钟；
            format: "H:i A"    // 24小时制
        }],
        
        buttons: [{
            text: "保存",
            handler: function(btn) {
                var bform = btn.up("form").getForm(),
                    values = bform.getValues(true);
                console.log(values);
                bform.submit();
            }
        }, {
            text: "取消",
            handler: function(btn) {
                var bform = btn.up("form").getForm();
                bform.reset();
            }
        }]
    });
    simpleForm.render(document.body);
    
    // 2、form_AddingFieldsets
    bd.createChild({tag: 'hr'});
    bd.createChild({tag: "h5", html: "Form2-AddingFieldsets"});
    var fsform = Ext.create("Ext.form.Panel", {
        url: 'resources/js/submit.jsp',
        
        title: "SimpleFormWithFieldsets",
        frame: true,
        width: 350,
        bodyStyle: "5 5 0",    // 等价" 5 5 0 5";
        
        fieldDefaults: {
            msgTarget: "side",
            labelAlign: "right",
            labelWidth: 75
        },
        defaults: {
            anchor: "100%"
        },
        
        items: [{
            xtype: "fieldset",
            checkboxToggle: true,     // 是否需要checkbox切换；
            title: "用户信息",
            defaultType: "textfield",
            collapsed: true,     // 收起状态；
            layout: "anchor",    // anchor(行)布局；
            defaults: {
                anchor: "100%"
            },
            items: [{
                fieldLabel: "FirstName",
                name: "first",
                allowBlank: false
            }, {
                fieldLabel: "LastName",
                name: "last"
            }, {
                fieldLabel: "公司名称",
                name: "company"
            }, {
                fieldLabel: "邮箱地址",
                name: "email",
                vtype: "email"
            }]
        }, {
            xtype: "fieldset",
            title: "联系信息",
            collapsible: true, // 能伸缩；
            defaultType: "textfield",
            layout: "anchor",
            defaults: {
                anchor: "100%"
            },
            items: [{
                fieldLabel: "家庭电话",
                name: "home",
                value: '(888)1234567'
            }, {
                fieldLabel: "业务情况",
                name: "business"
            }, {
                fieldLabel: "手机号码",
                name: "mobile"
            }, {
                fieldLabel: "传真号码",
                name: "fax"
            }]
        }],
        
        buttons: [{
            text: "保存"
        }, {
            text: "取消"
        }]
    });
    fsform.render(document.body);
    
    // 3、complexForm
    bd.createChild({tag: 'hr'});
    bd.createChild({tag: 'h5', html: "Form3-complexForm"});
    var complexForm = Ext.create("Ext.form.Panel", {
        title: "ComplexForm",
        renderTo: document.body,
        
        frame: true,
        width: 600,
        bodyStyle: "padding: 5px 5px 0",
        fieldDefaults: {
            labelAlign: "top",
            msgTarget: "side"
        },
        
        items: [{
            xtype: "container",
            anchor: "100%",
            layout: "column", // column(列)布局；
            items: [{    // 1
                xtype: "container",
                columnWidth: .5,
                layout: "anchor",
                items: [{
                    fieldLabel: "FirstName",
                    name: "first",
                    xtype: "textfield",
                    anchor: "96%"
                }, {
                    fieldLabel: "公司名称",
                    name: "company",
                    xtype: "textfield",
                    anchor: "96%"
                }]
            }, {    // 2
                xtype: "container",
                columnWidth: .5,
                layout: "anchor",
                items: [{
                    fieldLabel: "LastName",
                    name: "last",
                    xtype: "textfield",
                    anchor: "100%"
                }, {
                    fieldLabel: "邮箱地址",
                    name: "email",
                    xtype: "textfield",
                    vtype: "email",
                    anchor: "100%"
                }]
            }]
        }, {
            xtype: "htmleditor",
            name: "bio",
            fieldLabel: "传记",
            height: 200,
            anchor: "100%"
        }],
        
        buttons: [{
            text: "保存"
        }, {
            text: "取消"
        }]
    });
    
    // 4、Form-FormWithTabpanel
    bd.createChild({tag: "hr"});
    bd.createChild({tag: "h5", html: "Form4-FormWithTabpanel"});
    var tabform = Ext.create("Ext.form.Panel", {
        width: 350,
        renderTo: document.body,
        
        frame: true,
        border: false,
        bodyBorder: false,
        fieldDefaults: {
            labelWidth: 75,
            labelAlign: "right",
            msgTarget: "side"
        },
        defaults: {
            anchor: "100%"
        },
        
        items: [{
            xtype: "tabpanel",
            frame: true,
            active: 0,
            defaults: {
                baseCls: "x-plain",
                bodyStyle: "padding: 10px;"
            },
            
            items: [{
                title: "个人信息",
                defaultType: "textfield",
                items: [{
                    fieldLabel: "FirstName",
                    name: "first",
                    allowBlank: false,
                    value: "TL"
                }, {
                    fieldLabel: "LastName",
                    name: "last",
                    value: "William"
                }, {
                    fieldLabel: "公司名称",
                    name: "company",
                    value: "23-IT"
                }, {
                    fieldLabel: "邮箱地址",
                    name: "email",
                    vtype: "email",
                    value: "tl@lf.com"
                }]
            }, {
                title: "联系信息",
                defaultType: "textfield",
                items: [{
                    fieldLabel: "家庭电话",
                    name: "home",
                    value: '(888)1234567'
                }, {
                    fieldLabel: "业务情况",
                    name: "business"
                }, {
                    fieldLabel: "手机号码",
                    name: "mobile"
                }, {
                    fieldLabel: "传真号码",
                    name: "fax"
                }]
            }]
        }],
        
        buttons: [{
            text: "保存",
            handler: function(btn) {
                var bf = btn.up("form").getForm(),
                    values = bf.getValues(true);
                console.log(values);
            }
        }, {
            text: "取消"
        }]
    });
    
    // 5、AnotherFormWithTabpanel
    bd.createChild({tag: "hr"});
    bd.createChild({tag: "h5", html: "Form5-AnotherFormWithTabpanel"});
    var secTabForm = Ext.create("Ext.form.Panel", {
        renderTo: document.body,
        
        title: "AnotherFormWithTabpanel",
        frame: true,
        width: 600,
        bodyStyle: "padding: 5px;",
        
        fieldDefaults: {
            labelAlign: "top",
            msgTarget: "side"
        },
        defaults: {
            anchor: "100%"
        },
        
        items: [{
            layout: "column",
            baseCls: "x-plain",
            items: [{
                columnWidth: .5,
                layout: "anchor",
                baseCls: "x-plain",
                border: false,
                defaultType: "textfield",
                items: [{
                    fieldLabel: "FirstName",
                    name: "first",
                    xtype: "textfield",
                    anchor: "96%"
                }, {
                    fieldLabel: "公司名称",
                    name: "company",
                    xtype: "textfield",
                    anchor: "96%"
                }]
            }, {
                columnWidth: .5,
                layout: "anchor",
                baseCls: "x-plain",
                border: false,
                defaultType: "textfield",
                items: [{
                    fieldLabel: "LastName",
                    name: "last",
                    xtype: "textfield",
                    anchor: "100%"
                }, {
                    fieldLabel: "邮箱地址",
                    name: "email",
                    xtype: "textfield",
                    vtype: "email",
                    anchor: "100%"
                }]
            }]
        }, {
            xtype: "tabpanel",
            plain: true,
            frame: true,
            activeTab: 0,
            height: 245,
            items: [{
                title: "联系信息",
                baseCls: "x-plain",
                defaults: {width: 230},
                defaultType: "textfield",
                items: [{
                    fieldLabel: '家庭电话',
                    name: 'home',
                    value: '(888)1234567'
                },{
                    fieldLabel: '业务情况',
                    name: 'business'
                },{
                    fieldLabel: '手机号码',
                    name: 'mobile'
                },{
                    fieldLabel: '传真号码',
                    name: 'fax'
                }]
            }, {
                title: "传记信息",
                baseCls: "x-plain",
                layout: "fit",
                items: [{
                    xtype: "htmleditor",
                    name: "bio"
                }]
            }]
        }],
        
        buttons: [{
            text: "保存"
        }, {
            text: "取消"
        }]
    });
    
    // 6、form_table-table
    bd.createChild({tag: "hr"});
    bd.createChild({tag: "h5", html: "Form6-table-table"});
    var formpanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: "form_table-table",
        height: 250,
        width: 650,
        frame: true,
        layout: {
            type: "table",
            columns: 3
        },
        defaults: {
            baseCls: "x-plain"        
        },
        items: [{    // 1-1
            layout: {
                type: 'table',
                columns: 1
            },
            defaults: {
                xtype: "textfield",
                width: 210,
                labelWidth: 60,
                labelAlign: "right"
            },
            cellCls: "table-td-top",
            items: [{
                fieldLabel: "姓名",
                name: "name"
            }, {
                fieldLabel: "出生日期",
                name: "birthday",
                xtype: "datefield",
                format: "Y-m-d"
            }]
        }, {    // 1-2
            layout: {
                type: 'table',
                columns: 1
            },
            defaults: {
                xtype: "textfield",
                width: 210,
                labelWidth: 60,
                labelAlign: "right"
            },
            cellCls: "table-td-top",
            items: [{
                fieldLabel: "性别",
                name: "sex",
                xtype: "radiogroup",
                columns: 2,
                vertical: true,
                items: [{
                    boxLabel: "男",
                    name: "sex",
                    inputValue: "男(01)",
                    checked: true
                }, {
                    boxLabel: "女",
                    name: "sex",
                    inputValue: "女(02)"
                }]
            }, {
                fieldLabel: "身份证号",
                name: "idNumber"
            }]
        }, {    // 1-3
            layout: {
                type: 'table',
                columns: 1
            },
            cellCls: "table-td-top",
            defaults: {
                xtype: "textfield",
                width: 210,
                labelWidth: 60,
                labelAlign: "right"
            },
            items: [{
                fieldLabel: "年龄",
                name: "age",
                xtype: "numberfield",
                minValue: 0,
                maxValue: 150,
                allowDecimals: false
            }, {
                fieldLabel: "婚姻状况",
                name: "marriage",
                xtype: "combo",
                store: Ext.create('Ext.data.Store', {
                    fields: ['code', 'name'],
                    data: [{
                        "code": "20", name: "保密"
                    }, {
                        "code": "21", name: "未婚"
                    }, {
                        "code": "22", name: "已婚"
                    }]
                }),
                queryMode: "local",
                displayField: 'name',
                valueField: 'code'
            }]
        }, {    // 2all
            colspan: 3,
            layout: {
                type: "table",
                columns: 1,
                tableAttrs: {
                    style: {
                        width: '100%'
                    }
                }
            },
            defaults: {
                labelWidth: 60,
                width: 630,
                labelAlign: "right"
            },
            cellCls: "table-td-top",
            items: [{
                fieldLabel: "人生信条",
                name: "life",
                xtype: "textarea",
                height: 80,
                maxLength: 255,
                maxLengthText: "字数不能多于255，要不无法保存；"
            }]
        }],
        buttons: [{
            text: "提交",
            handler: function(btn) {
                A.log("=>btn_[{0}]", btn.text);
                var values = formpanel.getValues();
                A.log(values);
                A.log("=>表单值_姓名_[{0}]", values["name"]);
                A.log("=>表单值_婚姻状况_[{0}]", values["marriage"]);
            }
        }, {
            text: "取消",
            handler: function(btn) {
                A.log("=>btn_[{0}]", btn.text);
                formpanel.getForm().reset();
            }
        }]
    });
    
});