Ext.FormPanel

 

1、Ext.FormPanel参数内容

FromPanel组件，它继承自panel.其中属性可参考panel。

关于xtype的类型，在extjs的form表单中已经定义的有：

form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

 

其中关于标准容器的没有写例子，下面的便子只是简单类型的

例：

 Ext.onReady(function() {
            //FromPanel例1
            var L1 = new Ext.FormPanel({
                width: 400,
                height: 300,
                frame: true,
                renderTo: DivID1,
                buttons: [{ text: "确定", handler: function() { alert(document.getElementByIdx("C1").innerText); } }, { text: "取消"}],
                items: [

                //Text
                {
                fieldLabel: "文字",
                xtype: "textfield",
                name: "C1",
                id: "C1",
                width: 200,
                value: "可写文字内容"
            },

            //PassWord
                {
                fieldLabel: "密码",
                xtype: "textfield",
                id: "C2",
                width: 200,
                inputType: "password"

            },

            //Combox
                {
                fieldLabel: "组合框",
                id: "comboxID1",
                xtype: "combo",
                emptyText: "组合框的初始文字",
                store: ["组合框文字1", "组合框文字2", "组合框文字3"]
            },

            //组合框另一种写法
                new Ext.form.ComboBox({
                    fieldLabel: "组合框另一种写法",
                    id: "comboxID2",
                    emptyText: "组合框的初始文字"
                }),

            //日期
                new Ext.form.DateField({
                    fieldLabel: "日期",
                    id: "DateField1",
                    width: 200
                }),

 

            //大文本
                new Ext.form.TextArea({
                    fieldLabel:"大文本",
                    id:"TextAreaID1",
                    width:200,
                    height:100
                })

            ]
        });

    });