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

阅读更多

 

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

 

 

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

 

 

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

 

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

 

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

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