ExtJS自定义css样式

ExtJS自定义css样式

博客分类：  ExtJS

web css JavaScript Ajax UI 

 

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

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

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

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

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

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

 var formpanel = new Ext.FormPanel({
         columnWidth:.5,
         autoHeight:false,
         bodyStyle:'background-color:#D4E1F2;',
         style:'margin:80px 5px 15px 20px;background:#D4E1F2',
         height:'100%',
         border:false,
         items:[
         {
             xtype:'label',
             text:'系统后台登陆',
             style:'margin-left:15%;font-size:25px;font-family:bold;'
             /*styleHtmlCls:'margin-top:50px;margin-left-20px;',*/
         },{
             xtype:'textfield',
             fieldLabel:'管理员',
             name:'username',
             width:'180',
             allowBlank:'用户名不能为空',
             minLength:6,
             minLengthText:'用户名长度为[6-20]',
             maxLength:20,
             maxLength:'用户名长度为[6-20]',
         },{
             xtype:'textfield',
             intputType:'password',
             fieldLabel:'密码',
             name:'username',
             width:'180',
             allowBlank:'用户名不能为空',
             minLength:6,
             minLengthText:'用户名长度为[6-20]',
             maxLength:20,
             maxLength:'用户名长度为[6-20]',
         },{
             xtype:'textfield',
             fieldLabel:'验证码',
             name:'val',
             allowBlank:false,
             blankText:'验证码不能为空'
         }
         ],
         buttons:[
         {
             xtype:'button',
             text:'登陆',
             handler:function()
             {
                 if(!formpanel.getForm().isValid()) return;
                 formpanel.getForm().submit();
             }
         },
         {
             xtype:'button',
             text:'重设',
             handler:function()
             {
                 if(!formpanel.getForm().isValid()) return;
                 formpanel.getForm().submit();
             }
         },{
             xtype:'button',
             text:'注册',
             handler:function()
             {
                 if(!formpanel.getForm().isValid()) return;
                 formpanel.getForm().submit();
             }
         }
         ]
     });

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

 

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