java随记

坚持就是胜利!

 

不太累的ext:FormPanel

慢慢开始接触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>  

虽然这样看起来js代码不太简洁,但比较好维护,不太容易出错 




 

posted on 2009-08-19 13:57 傻 瓜 阅读(2937) 评论(2)  编辑  收藏 所属分类: javascript

评论

# re: 不太累的ext:FormPanel[未登录] 2009-08-20 08:36 michael

其实直接在items里面列出对象使得对象的层次更清晰。
像你下面那样如果fieldset里面还有对象,对象里面还有对象....那么如果用你说的那种结构层次结构就整个乱了  回复  更多评论   

# re: 不太累的ext:FormPanel 2009-08-25 08:48 找个美女做老婆

Java乐园学习网站: http://www.javaly.cn

有大量的学习文章和视频教程,以及一些项目源码

Java乐园学习群: 81107233  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(7)

我参与的团队

随笔分类

随笔档案

文章分类

友情链接

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜