How to develop Extjs component like date Picker?

Question

I'm ExtJs 6.0 framework developer.

I want to develop a component like date that when user click it, It open a window and this window have some textfields and other Extjs components. My problem is when I want to use this component as a grid cell editor. it does not show the component. In other words, I want to develop a custom picker.

How do I do?

CD.. CD.. · Accepted Answer · 2015-11-15T04:57:17

You can extend Ext.form.field.Picker and implement createPicker:

An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be controlled via the matchFieldWidth and pickerAlign/pickerOffset config properties respectively.

You would not normally use this class directly, but instead use it as the parent class for a specific picker field implementation. Subclasses must implement the createPicker method to create a picker component appropriate for the field.

It can look like:

Ext.define('Fiddle.view.FooPicker', {

    extend: 'Ext.form.field.Picker',

    xtype: 'foo-picker',

    createPicker: function(){

        return Ext.widget('container',{
            padding: 20,
            floating: true,
            items: [
                {
                    xtype: 'textfield'
                },
                {
                    xtype: 'box',
                    html: 'Foo'
                }
            ]
        })

    }

});

https://fiddle.sencha.com/#fiddle/1139

How to develop Extjs component like date Picker?

1 Answers