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