Question

我正在学习ExtJs，我有一个带有timefield的表格网格面板，我希望用数据库中提取的JSON数据填充。

这是我存储的数据：

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    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"}

    ]
});

现在我的表单中有timefield个，我想在openTime，closeTime字段中填入我存储的数据open_datetime和close_datetime

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.create('Ext.form.Panel', {
      renderTo: Ext.getBody(),
      width: 300,
      bodyPadding: 10,
      title: 'getters and setters',
      items: [{
        xtype: 'datemenu',
        floating: false,
        height: 210,
        id: 'datePickerMenu',
        width: 240
      }, {
        xtype: 'text',
        text: 'openTime',
        margin: '5px',
        id: 'open',
        dataIndex: 'open_datetime'
      }, {
        xtype: 'timefield',
        style: {
          margin: '5px'
        }
      }, {
        xtype: 'text',
        text: 'closeTime',
        margin: '5px'
      }, {
        xtype: 'timefield',
        style: {
          margin: '5px'
        }
      }, {
        xtype: 'text',
        text: 'Message',
        margin: '5px'

      }, {
        xtype: 'textfield',
        style: {
          margin: '5px'
        }
      }]
    });
  }
});

现在，如何在timefield s中显示数据？使用列时，我应该使用data_Index显示数据吗？

Answer 1

有几种方法可以解决这个问题，根据您使用的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方法或其他一些手动方法来填充表单字段值。

第二种方法在Ext JS 5中使用了ViewModel binding ...一个新的，功能强大的概念。每当对绑定值进行更改时，它都会更新模型＆＃39; s值以及在UI组件中反映该值。我鼓励您阅读我为ViewModel绑定提供的链接，因为它将详细介绍。

ExtJs在时域中填充值

1 个答案: