extjs表单面板设置默认值textfield

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs表单面板设置默认值textfield相关的知识,希望对你有一定的参考价值。

这似乎是一个微不足道的问题,但是...我在面板中有一个地址列表,我希望在表单面板中添加地理位置坐标(以及在地图上显示它们),这样当我点击时在面板中感兴趣的地址上,触发onTap以执行下面给出的onSelectGeolocation以打开在ViewPort中呈现的表单面板并将任何现有记录添加到关联的表单元素:

onSelectGeolocation: function(view, index, target, record, event) {
    console.log('Selected a Geolocation from the list');
    var geolocationForm = Ext.Viewport.down('geolocationEdit');


    if(!geolocationForm){
        geolocationForm = Ext.widget('geolocationEdit');
    }     
    geolocationForm.setRecord(record);
    geolocationForm.showBy(target);
}

但是,使用setRecord方法将我的商店中的任何现有记录写入表单元素的行阻止了下面的表单面板中的默认值被写入所需的表单元素。当我发表评论时,一切都很好。问题是我需要抓住我商店中存在的那些记录,例如地址,以便在我的表单中显示。我该怎么做并将默认值写入我的表单中的textfield元素?

我通过onTap呈现为ViewPort的表单面板是:

Ext.define('EvaluateIt.view.GeolocationEdit', {
    extend: 'Ext.form.Panel',
    alias : 'widget.geolocationEdit',
    requires: [
        'Ext.form.Panel',
        'Ext.form.FieldSet',
        'Ext.field.Number',
        'Ext.field.DatePicker',
        'Ext.field.Select',
        'Ext.field.Hidden'

    ],
    config: {

    // We give it a left and top property to make it floating by default
    left: 0,
    top: 0,

    // Make it modal so you can click the mask to hide the overlay
    modal: true,
    hideOnMaskTap: true,

    // Set the width and height of the panel
    width: 400,
    height: 330,
    scrollable: true,
    layout: {
        type: 'vbox'
    },
    defaults: {
        margin: '0 0 5 0',
        labelWidth: '40%',
        labelWrap: true
    },
    items: [
        {
            xtype: 'datepickerfield',
            destroyPickerOnHide: true,
            name : 'datOfEvaluatione',
            label: 'Date of evaluation',
            value: new Date(),
            picker: {
                yearFrom: 1990
            }
        },
        {   
            xtype: 'textfield',
            name: 'address',
            label: 'Address',
            itemId: 'address' 
        },
        {   
            xtype: 'textfield',
            name: 'latitude',
            label: 'Latitude',
            itemId: 'latitude',
            value: sessionStorage.latitude,             
        },
    /*  {   
            xtype: 'textfield',
            name: 'longitude',
            label: 'Longitude',
            itemId: 'longitude',
            value: sessionStorage.longitude
        },
        {   
            xtype: 'textfield',
            name: 'accuracy',
            label: 'Accuracy',
            itemId: 'accuracy',
            value: sessionStorage.accuracy
        },*/
        {
            xtype: 'button',
            itemId: 'save',
            text: 'Save'
        }

    ]
    }

});
答案

行为与预期一致。我会在每个项目的id上使用Ext.getCmp。

以上是关于extjs表单面板设置默认值textfield的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs,提交表单时未调用自定义TextField的getValue()函数

Extjs4.1 - 在隐藏字段中提交有效表单允许空白为假

ExtJs 5慢慢形成结合

ExtJs 4 - 调整窗口大小时未保持 TextField 高度

使用Ext 4.0 表单提交方式,其中textfield 设置默认值value为0,当我前台做出修改后,提交到后台输入还是0

extjs 如何禁用日期时间控件