extjs 添加css样式_ExtJS自定义css样式

[  1、使用工具：      《1》Firebug： 能方便得出页面中各个元素的css标记名；             (1) Firebug 的下载、安装：                   打开火狐(Firefox)浏览器；

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

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

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

对于控件(例如Panel) 对象往往受布局管理器的控制，其 top/left/width/height 都会被动态[最近遇到这个问题，一直搞不清如何自定义EXTJS组件的样式。现在有了切入的方法。extjs的组件都有个ID，这个id在编译成html代码的时候，就是元素的ID。其中它的样式，就在

地填写在 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;',

[ionic 自定义指令标签样式]