Question

我想应用我的图像来选择sencha中的字段。

那我怎么能这样做呢。

我已经在课堂上创建了

这是选择字段的代码

 xtype: 'selectfield',
                baseCls: 'x-field-select',
                cls: 'selectclass',
                id: 'fieldGeslacht',
                name: 'pickergeslacht',
                options: [
                    {
                        text: 'Man',
                        value: 'Man'
                    },
                    {
                        text: 'Vrouw',
                        value: 'Vrouw'
                    }
                ],
                usePicker: 'test',
                component: {
                    useMask: true
                }

和我改变的sencha主题类在这里：

.selectclass
{    
     overflow: hidden !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;   
    color: white !important;
    background: url("../img/registreren/2.JPG") no-repeat scroll 100% 0px #FFFFFF; 

}

.x-selectmark-base, .x-field-select, .x-component-outer::after
{
    overflow: hidden !important;
    width: 90% !important;
    margin-left:auto;
    margin-right: auto !important;   
    color: white !important;
    background: url("../img/registreren/2.JPG") no-repeat scroll 100% 0px #FFFFFF !important; 
    -webkit-mask-image:url("../img/registreren/2.JPG") !important;
    -webkit-mask-size: 100% !important;
}

但是这不起作用所以请任何一个帮助将我的风格应用于sencha选择字段。

谢谢。

Answer 1

最近我在选择字段中使用了以下css。希望这可以帮助你

.selectfield {
display: block;

.x-label-align-left {
    &:first-child {
      .x-form-label {
        @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); }
      }
    }

    &:last-child {
      .x-form-label {
        @if $include-border-radius { @include border-bottom-left-radius(0); }
      }
    }        
}
.x-form-label {
    span {
      font-size: 14px;
    }
}    
.x-component-outer {
    &:after {
        margin-top: .5em;
    }
    &:before {
        background: none;
    }
    .x-field-input{
        font-size: 14px;
    }
}
}

selectfield sencha

           { 
            xtype : 'selectfield',
            cls   : 'selectfield',
            margin  : '5px',
            usePicker : true,
          },

Answer 2

只尝试baseCls而不是两者，所以代码将是这样的

xtype: 'selectfield',
                baseCls: 'selectclass',
                id: 'fieldGeslacht',
                name: 'pickergeslacht',
                options: [
                    {
                        text: 'Man',
                        value: 'Man'
                    },
                    {
                        text: 'Vrouw',
                        value: 'Vrouw'
                    }
                ],
                usePicker: 'test',
                component: {
                    useMask: true
                }

如何更改在sencha中选择字段样式

2 个答案: