ExtJs在时域中填充值(ExtJs populating values in timefields)

ExtJs在时域中填充值(ExtJs populating values in timefields)

我正在学习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"} ] });

现在我的表单中closeTime域，我想用我存储的数据open_datetime和close_datetime填充openTime ， closeTime字段。

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显示数据？ 使用列时，我应该使用data_Index显示数据吗？

I am learning ExtJs, and I have a form gridpanel with timefields that I want to populate with JSON data pulled from database.

This is the data I'm storing:

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"} ] });

Now I have timefields in my form, and I want to populate openTime, closeTime fields with the data open_datetime and close_datetime that I stored.

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' } }] }); } });

Now, how do I show the data in the timefields? Should I show the data with data_Index when using columns?

最满意答案

有几种方法可以解决这个问题，根据您使用的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绑定提供的链接，因为这将进一步详细说明。

There are a couple of ways that you can go about this, and depending on the version of Ext JS that you're using, there might only be one. I'm assuming you're using at least v5. The other thing I'm assuming is that you have a grid with your store, as it wouldn't make sense to have a form loading two records... it wouldn't know which record to use for its form values.

Also, I think it's a good practice to avoid using the id field, especially if you're creating a form... what if you wanted to use that form twice in the same view? You wouldn't be able to because you would have two identical ids. Instead, you might want to use itemId or reference.

Here is an example I came up with:

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] }) } });

In this example, I show you two ways of loading your form data. The first approach is making use of the name property. This is basically like the dataIndex property, but you must use the form's loadRecord method, or some other manual approach, to populate your form field values.

The second approach makes use of the ViewModel binding... a new, and powerful, concept in Ext JS 5. Whenever a change is made to the bound value, then it will update the model's value as well as reflect that value in the UI component. I encourage you to read the link I provided for the ViewModel binding, as that'll go into a lot more detail.