ExtJS自定义css样式

ExtJS自定义css样式

• 博客分类： 
• ExtJS

web css JavaScript Ajax UI 

 

ExtJS是一种主要用于创建富客户端web界面的技术，是一个基本与后技术无关的前端框架。

但强大的功能往往控制起来没有那么容易，现在虽然使用ExtJS快一年了，仍然不能运用自如，

例如多其控件的css的控制。

对于控件(例如Panel) 对象往往受布局管理器的控制，其 top/left/width/height 都会被动态

地填写在 inline-style 中，所以在 css class 中试图定义位置和大小往往是无效的，只能通过 Panel

对象的相应属性来控制。例如下面的例子：

Formpanel代码  

1. var formpanel = new Ext.FormPanel({  
2.         columnWidth:.5,  
3.         autoHeight:false,  
4.         bodyStyle:'background-color:#D4E1F2;',  
5.         style:'margin:80px 5px 15px 20px;background:#D4E1F2',  
6.         height:'100%',  
7.         border:false,  
8.         items:[  
9.         {  
10.             xtype:'label',  
11.             text:'系统后台登陆',  
12.             style:'margin-left:15%;font-size:25px;font-family:bold;'  
13.             /*styleHtmlCls:'margin-top:50px;margin-left-20px;',*/  
14.         },{  
15.             xtype:'textfield',  
16.             fieldLabel:'管理员',  
17.             name:'username',  
18.             width:'180',  
19.             allowBlank:'用户名不能为空',  
20.             minLength:6,  
21.             minLengthText:'用户名长度为[6-20]',  
22.             maxLength:20,  
23.             maxLength:'用户名长度为[6-20]',  
24.         },{  
25.             xtype:'textfield',  
26.             intputType:'password',  
27.             fieldLabel:'密码',  
28.             name:'username',  
29.             width:'180',  
30.             allowBlank:'用户名不能为空',  
31.             minLength:6,  
32.             minLengthText:'用户名长度为[6-20]',  
33.             maxLength:20,  
34.             maxLength:'用户名长度为[6-20]',  
35.         },{  
36.             xtype:'textfield',  
37.             fieldLabel:'验证码',  
38.             name:'val',  
39.             allowBlank:false,  
40.             blankText:'验证码不能为空'  
41.         }  
42.         ],  
43.         buttons:[  
44.         {  
45.             xtype:'button',  
46.             text:'登陆',  
47.             handler:function()  
48.             {  
49.                 if(!formpanel.getForm().isValid()) return;  
50.                 formpanel.getForm().submit();  
51.             }  
52.         },  
53.         {  
54.             xtype:'button',  
55.             text:'重设',  
56.             handler:function()  
57.             {  
58.                 if(!formpanel.getForm().isValid()) return;  
59.                 formpanel.getForm().submit();  
60.             }  
61.         },{  
62.             xtype:'button',  
63.             text:'注册',  
64.             handler:function()  
65.             {  
66.                 if(!formpanel.getForm().isValid()) return;  
67.                 formpanel.getForm().submit();  
68.             }  
69.         }  
70.         ]  
71.     });  

 上述代码中对布局起作用的是：style:'margin-left:15%;font-size:25px;font-family:bold;'

 

而对背景起作用的是：bodyStyle:'background-color:#D4E1F2;',