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