ExtJS自定义css样式

 

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;',