不太累的ext:FormPanel -优快云博客

本文分享了一种使用ExtJS库构建用户界面的简化方法，通过单独实例化组件而非全部包含在items数组中来提高代码的可读性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

慢慢开始接触Ext,防公司让我搞这个,先做点准备,准备多少是多少.在网上搜了很多例子,无一例外的都是在items[]数组里去定义一些新的对象,就象下面代码的上部分一样,难以阅读,看着那叫一个累,尤其是初学者,都不知道items里到底是什么对象,照着敲这些代码还容易出错,查了查ext文档,发现组件类都有add方法,于是改了一个别人的例子,觉着好理解多了,并且便于调试多了.就在下面代码的后一部分,相信这种写法应该是搞面象对象编程人员比较喜欢的一种方式

<html>   
<head>   
 <link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
  <script type="text/javascript" src="ext-base.js"></script>
  <!-- ENDLIBS -->

    <script type="text/javascript" src="ext-all-debug.js"></script>  
  <script>      

 Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
 //定义一个FormPanel
    var fsf = new Ext.form.FormPanel({     
      title:"FormPanel2 ",
      url:'',
      frame:true,
      width:350,      
      bodyStyle:'padding:5px 5px 0',
      //height:120,
      //defaultType:'textfield',
      items:[
      //定义两个FieldSet
        {
       xtype:'fieldset',
       checkboxToggle:true,
       title:'User Information',
       autoHeight:true,
       defaultType:'textfield',
       //defaults: {width: 210},
       collapsed:true,
       items :[
         {fieldLabel: 'First Name',name: 'first', allowBlank:false},
      {fieldLabel: 'Last Name',name: 'last'},
      {fieldLabel: 'Company',name: 'company'},
      {fieldLabel: 'Email',name: 'email', vtype:'email'}
                     ] 
     },
     {
                   xtype:'fieldset',
                   title: 'Phone Number',
                   collapsible: true,
                   autoHeight:true,
                   //defaults: {width: 210},
                   defaultType: 'textfield',
                   items :[
         {fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},
      {fieldLabel: 'Business',name: 'business'},
      {fieldLabel: 'Mobile',name: 'mobile'},
      {fieldLabel: 'Fax',name: 'fax'}
                     ]
                  }

      ]

   });
  //new一个FieldSet
  var fieldset = new Ext.form.FieldSet({
     title: 'Phone Number',
                   collapsible: true,
                   autoHeight:true,
                   //defaults: {width: 210},
                   defaultType: 'textfield'

  });
  //new一个TextFiled,
  var textFiled1 = new Ext.form.TextField();
  textFiled1.fieldLabel="Home2";
  textFiled1.name="home";
        textFiled1.value="(888) 555-1212";
  //textFiled添加到FieldSet
        fieldset.add(textFiled1);
        //Fieldset添加到FormPanel  
        fsf.add(fieldset);
        fsf.render(document.body);
});
  </script>   
  </head>
  <body>

</body>   
</html>