关于extjs中的cls ≠ class

今天在做一个登录页面的时候，想给两个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，切勿乱用！