Question

我在表单中有以下选择字段：

        {
            xtype: 'selectfield',
            name: 'minprice',
            label: 'Min Price',
            valueField: 'No min',
            placeHolder: 'No min',
            useClearIcon: true,
            options: [{
                text: 'No Min', value: 'Test'
            }, {
                text: 'Test2', value: 'Test2'
            }, {
                text: 'Test3', value: 'Test3'
            }]                  
        }

我希望第一个选项'No min'看起来像一个占位符（所以它是浅灰色的）。这样做的原因是表单的其余部分具有浅灰色的占位符，并且具有黑色文本的选择字段不适合表单的样式。我已经尝试过指定占位符和valueField但没有成功。

感谢。

Answer 1

您可以使用placeHolder属性，但不应指定options属性。例如：

{ id:'theSelect',
  name: 'fieldId',
  xtype: 'selectfield',
  displayField: 'text',
  valueField: 'value',    
  placeHolder :'No min'
}

然后将其加载或从商店加载以加载选项：

 Ext.getCmp('theSelect').setOptions(
[   {text: 'First Option',  value: 'first'},
    {text: 'Second Option', value: 'second'},
    {text: 'Third Option',  value: 'third'}
]);

请在此处查看整个工作代码http://jsfiddle.net/p5K4q/16/

Answer 2

您可以使用-webkit-text-fill-color执行此操作。

定位特定字段的最简单方法是：

{
    xtype: 'datepickerfield',
    placeHolder : 'Date',
    cls: 'your-class'
}

.your-class .x-form-field {
    -webkit-text-fill-color: red;
}

Answer 3

您可以使用placeholder并将AutoComplete设置为false，因为默认设置为true。

这对我来说很好。

如何使选择字段中的默认文本像文本字段的占位符一样变灰？

3 个答案: