如何在sencha touch 2中左对齐一个checkboxfield?

时间:2012-05-08 13:33:55

标签: checkbox sencha-touch extjs sencha-touch-2 fieldset

我只是想知道是否有人能够在字段集中成功地左对齐复选框字段;我的尝试失败了。

{
xtype : 'checkboxfield',
name : 'remember',
label : 'Store information',
style: 'float: left'
}

图像更好:

enter image description here

3 个答案:

答案 0 :(得分:3)

我能够将checkboxfieldleft对齐。看看下面的代码......

 {
    xtype: 'checkboxfield',
    name : 'tomato',
    value: 'tomato',
    checked: true,
    label: 'Tomato',
    labelWidth: '70%',
    labelAlign: 'right'
 }

输出: -

enter image description here

答案 1 :(得分:2)

这是复选框默认值css(触摸2.2.1): `

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after
{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
content: '3';
font-family: 'Pictos';
font-size: 1.6em;
text-align: right;
line-height: 1.6em;
}

`

你可以将“正确:10px”更改为“left:10px”。

在我的应用中,我把这个css代码放在index.html

.x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after
{
right:auto !important;
left:10px !important;
} 

答案 2 :(得分:1)

在你的css中插入以下内容

.x-field .x-input-checkbox::after,  .x-field .x-input-checkbox:checked::after
 {
     right:auto;
 }