使用extjs4在网格中的时域组合框问题

时间:2014-08-01 20:11:27

标签: javascript jquery html5 extjs4

1)创建一个网格并添加类型' timefield'在网格中使用格式的渲染器(' h:i A')。 2)在' timefield'中添加一行并选择一个选项。专栏,比如凌晨4点。 3)添加另一个adjecent行并选择相同的数据,即下拉列表中的4:00 AM。您将无法执行此操作,您需要选择另一个时间,然后返回初始选择。它看起来像是一个ExtJS错误。如何解决这个问题。

我在网格

中编写了以下代码
this.mcmGridPanel = new Ext.grid.GridPanel({            height: 360,            width: 680,             title: 'Shifts',            store: App.mcmAgentShiftStore,          multiSelect: true,          x: 0,           y: 100,             columns: [
                { xtype: 'gridcolumn', header: 'Name', width: 120, dataIndex: 'Name',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                { xtype: 'gridcolumn', header: 'Initials',  width: 45, dataIndex: 'Initials',
                    editor: { xtype: 'textfield' }
                }, 
                { xtype: 'gridcolumn', header: 'Employee Id',  width: 75, dataIndex: 'EmployeeId',
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false
                    }
                },
                { xtype: 'gridcolumn', header: 'Phone#',  width: 100, dataIndex: 'MobilePhoneId',
                    editor: {
                        //TCS: 12/3/2013 cell phone table modified
                        xtype: 'combobox',
                        typeAhead: true,
                        editable: true,
                        triggerAction: 'all',
                        selectionOnTab: true,
                       // lazyRender: true,
                       // forceSelection: true,
                        store: App.mcmAllMobilePhoneStore,
                        displayField: 'MobileIdentifier',
                        valueField: 'MobilePhoneId',
                        value: 'MobilePhoneId',
                        queryMode: 'local',
                        queryDelay: 100,                     
                        specialkey: function(f, e) {
                        if(e.getKey() === e.ESC) {
                                    this.hide(); }
                                },
                       listeners: {
                            load: function(store, recs, success) {
                                if(Ext.typeOf(this.getPicker().loadMask) != "boolean") {
                                    console.log("trying to hide the loadmask");
                                    this.getPicker().loadMask.hide();
                                }
                            }

                        }

                    },

>                   renderer: function(value,metaData,record) {
                  if(value) {
                      var MobileStore = Ext.getStore( App.mcmAllMobilePhoneStore);
                      var Record = MobileStore.findRecord('MobilePhoneId', value);
                      return Record ? Record.get('MobileIdentifier'): record.get('MobileIdentifier');
                  } else return "";
              }//TCS: 12/3/2013 cell phone table modified end*/                           },              
          { xtype: 'datecolumn', header: 'Start Date', width: 84, dataIndex: 'StartAvailability', format: 'Y-m-d', 
              editor: {
                  xtype: 'datefield',
                  allowBlank: false,
                  format: 'Y-m-d'
              }
          },
          { header: 'Start', width: 65, dataIndex: 'StartAvailabilityTime', format: 'H:i', 
              editor: {
                  xtype: 'timefield',
                    id: starttime,
                  format: 'H:i',
                  increment: 15,
                  allowBlank: false
              }
          },
          { xtype: 'datecolumn', header: 'End Date', width: 84, dataIndex: 'EndAvailability', format: 'Y-m-d', 
              editor: {
                  xtype: 'datefield',
                  allowBlank: false,
                  format: 'Y-m-d'
              }
          },
          { header: 'End', width: 65, dataIndex: 'EndAvailabilityTime', format: 'H:i',
              editor: {
                  xtype: 'timefield',
                    id: endtime,
                  format: 'H:i',
                  increment: 15,
                  allowBlank: false
              }
          }           ],          tbar: [
          {
              text: 'Add',
              tooltip: 'Add Shift',
              iconCls: 'icon-shift-add',
              scope: me,
              handler: function() {
                  var agent = this.mcmAgentCombobox.getValue();
                  if(agent) {
                      addShift.call(this, agent);
                  } else {
                      App.mcmShowMessageBox({
                          title: 'Important', 
                          message: 'Please select an agent', 
                          time: 2000
                      });
                  }
              }
          }, 
          {
              itemId: 'removeShift',
              text: 'Remove',
              tooltip: 'Remove Selected Shifts',
              iconCls: 'icon-shift-remove',
              scope: me,
              handler: function() {
                  this.mcmRemoveShifts();
              },
              disabled: true
          },
          {
              itemId: 'closeoutShift',
              text: 'Closeout',
              tooltip: 'Closeout Selected Shifts',
              iconCls: 'icon-shift-closeout',
              scope: me,
              handler: function() {
                  var selection = this.mcmGridPanel.getSelectionModel().getSelection();
                  if(selection.length && selection.length > 1) {
                      App.mcmShowMessageBox({
                          title: 'Important', 
                          message: 'Please enter a single shift to perform closeout', 
                          time: 2000
                      });
                      return;
                  }
                  App.mcmCloseoutShift(selection[0]);
              },
              disabled: true
          },
          //TCS: 12/3/2013 cell phone table modification
          {
              text: 'Add Cell Phone',
              tooltip: 'Add CellPhone',
              iconCls: 'icon-cellphone-add',
              scope: this,
              handler: function()
              {
                  this.hide;
                  App.mcmShowMobilePhoneWindow();
              }
          }, 
          //TCS: 12/3/2013 cell phone table modification end          ],          plugins: [ this.mcmRowEditing ],            viewConfig: {},             listeners: {
          scope: me,
            beforeedit : function(editor, e) {
                     editor.down('[@id=starttime]').clearValue();
                     editor.down('[@id=endtime]').clearValue();
} }

我在编辑前重置了值。但它不起作用。

0 个答案:

没有答案