Ext.form.FormPanel 独孤九剑-第三式

Ext.form.FormPanel 独孤九剑-第三式

<% @ page contentType = " text/html;charset=UTF-8 " %>
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
         < title > onReady </ title >
         < link  rel ="stylesheet"  type ="text/css"
            href ="/ext/resources/css/ext-all.css"   />
         < script  type ="text/javascript"  src ="/ext/adapter/ext/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="/ext/ext-all.js" ></ script >
         < script  type ="text/javascript" >
             function  myPanel()
            {
                itemsA  =  [
                         {
                            fieldLabel: " UserName " , // 文本框标题
                            name: " user " ,
                            id: " user " ,
                         },
                          {
                            fieldLabel: " PassWord " ,
                            inputType: " password " ,
                            name: " pass " ,
                            id: " pass " ,
                          }
                        ];
                itemsB  =  [
                          {
                            xtype:'fieldset',
                            title: '个人信息',
                            collapsible:  true ,
                            autoHeight: true ,
                            width: 330 ,
                            defaults: {width:  150 },
                            defaultType: 'textfield',
                            items :[{
                                    fieldLabel: '爱好',
                                    name: 'hobby',
                                    value: 'www.cnblogs.com'
                                },{
                                    xtype: " combo " ,
                                    name: 'sex',
                                    store:[ " 男 " , " 女 " , " 保密 " ], // 数据源为一数组
                                    fieldLabel: " 性别 " ,
                                    emptyText:'请选择性别.'
                                }]
                            }
                           ];
                 var  form1  =   new  Ext.form.FormPanel(
                            {
                                   width: 350 ,
                                   frame: true , // 圆角和浅蓝色背景
                                   renderTo: " form1 " , // 呈现
                                   title: " FormPanel " ,
                                   bodyStyle: " padding:5px 5px 0 " ,
                                   defaults:{width: 200 ,xtype: " textfield " },
                                   items:itemsB,
                                   buttons:[{text: " 确定 " },{text: " 取消 " ,handler: function (){alert( " 事件！ " );}}]
                                });
             }
             Ext.onReady(myPanel); 
         </ script >
     </ head >
     < body >
         < div  id ="form1" ></ div >
     </ body >
</ html >