ExtJs在时间字段中填充值

有几种方法可以做到这一点，根据所使用的Ext JS版本，可能只有一种方法。我假设你用的至少是v5版本。我假设的另一件事是，你有一个网格与你的商店，因为它不会有意义有一个表单加载两个记录…它不知道用哪条记录作为它的表单值。

此外，我认为这是一个很好的做法，避免使用id字段，特别是如果你正在创建一个表单…如果你想在同一个视图中两次使用那个表单呢?你不能，因为你有两个相同的id。相反，您可能希望使用itemId或reference。

这是我想到的一个例子:

Ext.application({
  name: 'Fiddle',
  launch: function() {
    var store = Ext.create('Ext.data.Store', {
      fields: ['id', 'app_name', 'open_datetime', 'close_datetime', 'holiday_desc'],
      data: [{
          id: 1,
          app_name: "A",
          open_datetime: "08:00",
          close_datetime: "09:00",
          holiday_desc: "ADay"
        }, {
          id: 2,
          app_name: "B",
          open_datetime: "00:00",
          close_datetime: "23:59",
          holiday_desc: " BDay"
        }
      ]
    });
    var first = store.first();
    var second = store.getAt(1);
    /* Non-Bound Form... this doesn't use model binding,
     * but it uses the Name property, which relies on loading
     * the form with a record */
    Ext.define('My.Non.Bound.Form', {
      extend: 'Ext.form.Panel',
      bodyPadding: 10,
      title: 'Non-Bound Form: getters and setters',
      items: [{
        xtype: 'datemenu',
        floating: false
      }, {
        xtype: 'timefield',
        fieldLabel: 'Open Time',
        name: 'open_datetime',
        margin: 5
      }, {
        xtype: 'timefield',
        fieldLabel: 'Close Time',
        margin: 5,
        name: 'close_datetime'
      }, {
        xtype: 'textfield',
        text: 'Message',
        margin: '5px'
      }, {
        xtype: 'textfield',
        style: {
          margin: '5px'
        }
      }]
    });
    /* Bound Form... this makes use of ViewModel binding,
     * so that means you must supply a ViewModel, and its
     * data with a currentRecord property... this has many
     * added benefits... I encourage you to read https://docs.sencha.com/extjs/6.0/application_architecture/view_models_data_binding.html */
    Ext.define('My.Bound.Form', {
      extend: 'Ext.form.Panel',
      bodyPadding: 10,
      title: 'Bound Form: getters and setters',
      items: [{
        xtype: 'datemenu',
        floating: false
      }, {
        xtype: 'timefield',
        fieldLabel: 'Open Time',
        margin: 5,
        bind: {
          value: '{currentRecord.open_datetime}'
        }
      }, {
        xtype: 'timefield',
        fieldLabel: 'Close Time',
        margin: 5,
        bind: {
          value: '{currentRecord.close_datetime}'
        }
      }, {
        xtype: 'textfield',
        text: 'Message',
        margin: '5px'
      }, {
        xtype: 'textfield',
        style: {
          margin: '5px'
        }
      }]
    });
    var myNonBoundForm = Ext.create('My.Non.Bound.Form'); // render plain form approach
    myNonBoundForm.loadRecord(first);
    var myBoundForm = Ext.create('My.Bound.Form', {
      viewModel: {
        data: {
          currentRecord: second
        }
      }
    });
    Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      layout: {
        type: 'hbox',
        align: 'stretch'
      },
      defaults: {
        flex: 1
      },
      items: [myNonBoundForm, myBoundForm]
    })
  }
});

在这个例子中，我向您展示了两种加载表单数据的方法。第一种方法是利用name属性。这基本上类似于dataIndex属性，但是您必须使用表单的loadRecord方法或其他一些手动方法来填充表单字段值。

第二种方法利用ViewModel绑定…Ext JS 5中的一个新的、强大的概念。无论何时对绑定值进行更改，它都会更新模型的值，并在UI组件中反映该值。我建议您阅读我为ViewModel绑定提供的链接，因为它将涉及更多细节。