Ext中FormPanel面板及Form控件横排测试(CSS)

阅读更多

 

  在实际的网页开发中,大部分时间都要涉及到Form表单的处理。在Ext框架中也提供了很多这方面的控件,而且还有一个专门的FormPanel布局,该布局默认为放在面板上面的所有控件都是换行放置,而在实际应用中为了美观,有些需要横排,特别是Radio控件,这个时候就需要我们重新定制这些控件的布局了,该例子中使用CSS来实现这些功能,先贴出一张效果图。

 

 

  实现上面效果的具体代码如下:

 





Ext中FormPanel面板及Form控件横排测试(CSS)










 

  上面代码比较简单,而且也添加了注释,这里只简单说明一下。

 

  对于实现Radio控件的横排,首先是通过itemCls属性,修改他的浮动,使之float:left,同时还要修改clearCls,修改成clear:none,允许控件两边都可以浮动,这是因为在实际生成的HTML结构中,会有一个DIV专门负责清除浮动,如果使用默认的设置,接下来的那个控件并不会紧挨着他,也就是还会继续换行,对于第二个Raido控件,必须添加hideLabel:false属性,这样才能省去前面的标签设置,其他设置跟第一个一样。

 

  如果要还原成换行布置,必须在想还原成换行布置的控件上设置itemCls属性,修改为clear:both,而这个设置在IE中好像不用设置也可以,而在FF中必须添加,所以干脆添加在上面,保证两个浏览器都正常浏览。

  • Radio.rar (12.3 KB)
  • 下载次数: 504

你可能感兴趣的:(EXT,CSS,FP,JavaScript,Firebug)