Sencha touch - 将表单字段渲染为非输入

Question

我有这个发送消息的观点：

但是，我不希望'to'字段成为输入字段，我只想将jamie显示为文本。

我的表单项目：

      {
        name : 'to',
        label: 'To',
        xtype: 'field',
        value: 'jamie',
        required: false
      },
      {
        xtype: 'textfield',
        name : 'subject',
        label: 'Subject',
        placeHolder: 'Subject...'
      },
      {
        xtype: 'textareafield',
        name : 'message',
        label: 'Message', 
        placeHolder: 'Message...'
      }

我查看了API文档，但我找不到办法。我想这很简单。

编辑：我知道我可以将其设置为禁用。但我真的不希望它成为输入领域。

Answer 1

您可以按如下方式访问CSS样式：

.thouShaltNotEdit div input{color:#567803; text-decoration:underline;}

然后在你的javascript中：

TextFieldName = new Ext.Text ({
...
disabledCls : 'thouShaltNotEdit',
disabled: true
...
})

问题是Sencha在事实之后应用了一些额外的透明效果，我从来没有能够追踪它。对我来说，下一个最好的事情是将'thouShaltNotEdit'类的颜色设置为与透明效果相似的颜色，如上所述。

我也是一个无证件的“readOnly”财产的负责人，如果上述情况不符合您的需求，可能值得调查。

附加选项

您也可以稍微以一种更为hackish的方式设置ext对象的html，如下所示： CSS：

.x-input-text-not-a-field{height:40px; padding:5px; background-color:white; display:block;}

JavaScript的：

var txtEmail = new Ext.form.Text({
        html:'<div class="x-form-label"><span>E-mail</span></div>'
            + '<div class="x-form-field-container"><span class="x-input-text-not-a-field">Jamie</span></div>' 
    });

可能需要一些额外的CSS调整，但这是使其不是输入字段的一般想法。 PS：设置'html'属性基本上消除了所有对象设置。

Answer 2

Ext.form.LabelField = function(config) {
    Ext.form.LabelField.superclass.constructor.call(this, config);
};


Ext.extend (Ext.form.LabelField, Ext.form.Field,{
    isField: true,
    value: '',
    renderSelectors: {fieldEl: '.x-form-labelfield'},
    renderTpl: [
       '<tpl if="label">',
       '<div class="x-form-label x-form-title"><span>{label}</span></div>',
       '</tpl>',
       '<div class="x-form-label x-form-labelfield"><span>{value}</span></div>',
    ],
    setValue:function(val) {
        this.value = val;
        if (this.rendered) {
           this.fieldEl.update('<span>' + val + '</span>');
        }
        return this;
    },
});

Ext.reg('labelfield', Ext.form.LabelField);

Formpanel：

labelTo = {
    xtype: 'labelfield',
    name: 'LabelName',
    cls: 'label-field',
    itemId: 'LabelName',
    label: 'To:',
    value: 'Jame'
};