add textfield and button for grid cell edit with e

问题:

I'd like to use extjs grid cell edit function, besides textfield, datepicker, I also need a textfield with a button in the right to trigger a picklist modal window. It looks like to datepicker which has a calendar icon in a textfield in the right.

I tried fieldcontainer to combine a textfield with a button, however, it doesn't work. Thanks a lot for help!

Ext.define('CellPicklist', {
    extend: 'Ext.form.FieldContainer',
    xtype: 'cell-picklist',
    layout: 'hbox',
    width: 200,
    items: [{
            xtype: 'textfield',
        }, {
            xtype: 'button'
        }]
});

columns: [{dataIndex: 'id',hidden: true},{text: 'Name', dataIndex: 'name', flex: 1, editor: 'cell-picklist'}]

回答1:

You could either use a trigger field and implement your picker logic in the onTriggerClick method or define your own field by extending Ext.form.field.Picker, which is an abstract class for fields that show a picker on trigger click and therefore already provides some of the logic (such as displaying the picker under the trigger).

If you have a look at the class hierarchy of the datefield you will see how those classes are related:

Ext.Base
  Ext.AbstractComponent
    Ext.Component
      Ext.form.field.Base
        Ext.form.field.Text
          Ext.form.field.Trigger
            Ext.form.field.Picker
              Ext.form.field.Date