今天在做一个登录页面的时候,想给两个cls: "text_field" 的输入框设一个padding值来着的,结果发现并没有卵用。后来通过查看页面元素,发现这两只输入框的class属性并不是我设置的text_field,而是class=" x-form-text x-form-field text_field x-form-empty-field",而这厮居然不接受我设置的padding,导致效果出不来。由此可见,在将元素添加cls属性是多么不靠谱,在此还是建议大家多用id属性吧。
接下来,上一下该案例的具体情况吧,部分代码如下:
.js中:
items: [
{
<span style="color:#ff0000;">id: "username",
cls: "text_field",</span>
inoutType: 'text',
blankText: '账号不能为空',
emptyText: '请输入账号',
},
{
<span style="color:#ff0000;"> id: "password",
cls: "text_field",</span>
inputType: 'password',
emptyText: '请输入密码',
blankText: '密码不能为空',
}]
.css中:
#username {
background: url("images/user.png") no-repeat 5px center;
<span style="color:#ff0000;"> padding: 10px;</span>
}
#password {
background: url("images/password.png") no-repeat 5px center;
}
.text_field {
text-indent: 50px;
width: 330px;
height: 28px;
border: 0;
border-bottom: 2px solid #eaeaea;
<span style="color:#ff0000;">padding: 10px;</span>
}
我们可以看到username的padding效果已经出来了,但是password的padding效果并没有。说明cls里面的padding属性无效,而id有效。当然cls里面的其他属性还是有效的,比如text-indent、width、height、border等。
然后,我们再查看一下页面元素:
以上是username背后的真正代码,由蓝色背景的那些个区域可以看出我们之前的理解是正确的,不信的话再来看看password背后的代码:
没有padding!没有padding!真的没有padding!
综上所述,extjs之所以把class写成cls是因为它是经过封装改造过的class,不是原生意义上的class,切勿乱用!