解释ExtJs loadRecord方法

时间:2016-04-27 10:23:29

标签: extjs

我有两种形式(网格和带字段的表单)。

我的问题一步一步:

  • 当我从行加载选择网格行所有日期到编辑表单时,我在控制器中通过loadRecord方法获得currentDateField。
  • 在编辑表单中,我的字段ID为'currentDateField',默认值为(new Date())
  • 当调用loadRecord方法时,此字段会更改其值,但我想使此字段始终保持默认值(new Date())

所以我的问题是:

  1. loadRecord如何工作以及如何更改“编辑”表单中的字段值?
  2. 即使调用loadRecord方法,如何使'currentDateField'始终保持默认值?
  3. 第一:

    Ext.define('MVC.view.NotesGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'notes',
    
    title: 'Note-list',
    
    store: 'Notes',
    
    columns: [
        {
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        },
        {
            text: 'Creation Date',
            xtype: 'datecolumn',
            format: 'd-m-Y',
            dataIndex: 'createDate',
            flex: 1
        },{
            text: 'Last Modified',
            xtype: 'datecolumn',
            format: 'd-m-Y',
            dataIndex: 'modifiedDate',
            flex:1
        }, {
            text: 'Text',
            dataIndex: 'noteText',
            flex: 3
        }
    ]
    });
    

    第二

    Ext.define('MVC.view.Edit', {
    extend: 'Ext.form.Panel',
    xtype: 'edit',
    
    title: 'Note',
    frame: true,
    padding: 10,
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            emptyText: 'New note'
        },
        {
            xtype: 'datefield',
            name: 'createDate',
            fieldLabel: 'Creation date',
            emptyText: 'Will be current date',
            format: 'd-m-Y',
            readOnly: true
        },
        {
            xtype: 'datefield',
            name: 'modifiedDate',
            fieldLabel: 'Current date',
            readOnly: true,
            itemID: 'currentDateField',
            format: 'd-m-Y',
            value: new Date()
        }, {
            xtype: 'textarea',
            name: 'noteText',
            height: 150,
            fieldLabel: 'Note text',
            width: '100%'
        },
        {
            xtype: 'button',
            text: 'Delete',
            itemId: 'DeleteButton',
            margin: '0 10 0 0'
        },
        {
            xtype: 'button',
            text: 'Clear',
            margin: '0 10 0 0',
            itemId: 'ClearButton',
            handler: function () {
                this.up('edit').getForm().reset();
            }
        },
        {
            xtype: 'button',
            text: 'Save',
            itemId: 'SaveRecord'
        }
    ]
    
    });
    

    GridController:

    Ext.define('MVC.controller.Notes', {
    extend : 'Ext.app.Controller',
    
    init: function() {
         this.control({
             'notes': {
                 select : this.onGridSelect
             }
         });
     },
    
    onGridSelect : function(grid, record, index, eOpts) {
        // grab a reference to the Detail view... 
        // we could have used a controller "ref", but those can also be problematic
        var detailView = Ext.ComponentQuery.query('edit')[0];
    
        //set the form record manually
        detailView.loadRecord(record);
    }
    });
    

    型号:

    Ext.define('MVC.model.Note', {
    extend : 'Ext.data.Model',
    
    fields : [
        {
            name : 'name',
            type : 'string'
        },
        {
            name : 'createDate',
            type : 'date'
        },
        {
            name : 'modifiedDate',
            type : 'date'
        },
        {
            name : 'noteText',
            type : 'string'
        }
    ]
    });
    

    商店:

    Ext.define('MVC.store.Notes', {
    extend  : 'Ext.data.Store',
    
    requires : [
        'MVC.model.Note'
    ],
    
    storeId : 'Notes',
    model   : 'MVC.model.Note',
    
    data : [
        { 
            'name'  : 'Lisa',  
            'createDate' : '10-23-1234',
            'modifiedDate' : '04-21-2016',
            'noteText' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere odio leo, at mollis libero porta ut. Etiam mauris ipsum, iaculis a imperdiet sit amet, bibendum id urna. Proin tempus lectus nisl, a tristique est tempor quis. Etiam interdum urna dolor, non gravida nulla laoreet a. Donec id velit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu purus sed nisl commodo malesuada et ut velit. Quisque ut lorem magna. Nulla eget odio est. Sed ultrices turpis quam. Aliquam quis sollicitudin dolor.'
        },
        { 
            'name'  : 'Bart',  
            'createDate' : '10-24-1234',
            'modifiedDate' : '04-3-2016',
            'noteText' : 't, bibendum id urna. Proin tempus lectus nisl, non gicitudin dolor.'
        },
        { 
            'name'  : 'Homer', 
            'createDate' : '10-25-1234',
            'modifiedDate' : '12-13-2416',
            'noteText' : 'qwerty'
        },
        { 
            'name'  : 'Marge', 
            'createDate' : '10-26-1234',
            'modifiedDate' : '04-21-2016',
            'noteText' : 'qwerty123123'
        }
    ]
    });
    

1 个答案:

答案 0 :(得分:1)

- loadRecord如何工作以及如何更改Edit中的字段值    形成吗

loadRecord方法将记录数据放在表单中,其中记录属性与itemId或表单组件中的名称匹配,您可以在docs

中阅读

在您的情况下,您的记录属性与name属性匹配。

- 我如何制作' currentDateField'即使是,也总是处于默认值    是否已调用loadRecord方法?

对我来说有两个解决方案:

  1. 更改具有name:modifiedDate的日期字段的名称。不是一个好的,因为我认为当你提交表格时,你想发送那个特定的名字。
  2. 收听日期字段上的更改事件,以便始终将值设置为新的Date()。