form

<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: [{

                fieldLabel: '文本框控件',

                name: 'TextBox',

                xtype: 'textfield'

                //,readOnly : true            //只读

                //,emptyText    :'请输入数据'    //为空时显示的文本，注意不是value

            },{

                fieldLabel: '只允许输入数字'

                ,name:'TextBoxNumber'

                ,xtype:'numberfield'

                //,allowDecimals: false     // 允许小数点

                //,allowNegative: false,     // 允许负数

                //,maxValue:1000      //最大值

                //,minValue:0            //最小值

            },{

                fieldLabel: '下拉框控件',

                name: 'DropDownList',

                xtype: 'combo',

                //本地数据源  local/remote

                mode:'local',

                //设置为选项的text的字段

                displayField: "Name",       

                //设置为选项的value的字段 

                valueField: "Id",

                //是否可以输入，还是只能选择下拉框中的选项

                editable : false, 

                typeAhead: true,

                //必须选择一项

                //forceSelection: true,

                //输入部分选项内容匹配的时候显示所有的选项

                triggerAction: 'all',

                //selectOnFocus:true,

                //数据

                store:new Ext.data.SimpleStore({

                    fields: ['Id', 'Name'],

                    data: [  [1,'男'],[0,'女'] ]

                })

            }, {

                fieldLabel: '日历控件',

                xtype: 'datefield',

                name: 'DateControl',

                format: "Y-m-d",

                editable : false

                //, 默认当前日期

                //value:new Date().dateFormat('Y-m-d')

            },{

                fieldLabel: '单选控件'

                ,xtype:'radiogroup'

                ,name:'Radios'

 

            }],

            buttons: [{

                text: "保 存"

                ,handler:function(){

                    MsgInfo('保存');

                }

            }, {

                text: "取 消"

                ,handler:function(){

                    form1.form.reset();

                }

            }]

        });

        function MsgInfo(str_msg)

        {

            Ext.MessageBox.show({

                title: '提示',

                msg: str_msg,

                width: 400,

                icon:Ext.MessageBox.INFO,

                buttons: Ext.MessageBox.OK

            });

        }

    });

</script>