How to put a component in Triggerfield popup in ExtJS?

Question

Is there any way to implement a component popup on Trigger Field click? For example, I have a Trigger Field, and I would like to display a Tree Grid when I click the Triggerfield. When I select a value from the Tree Grid, the Trigger Field also set the same value. There's an example from Ext.Net that is similar to this: http://examples.ext.net/#/Form/DropDownField/Overview/

I use Sencha Arhitect 3 and ExtJS 4.2. Any help is appreciated!

Answer 1

Try this.

Ext.create('Ext.form.ComboBox', {   
    store: Ext.create('Ext.data.Store', {
    fields: ['group_name', 'property'],
    data: [{
        "group_name": "Armed Clash",
        "property": "Border Clash"
    }, {
        "group_name": "Armed Clash",
        "property": "Militia Clash"
    }, {
        "group_name": "Smuggling",
        "property": "Fuel"
    }, {
        "group_name": "Smuggling",
        "property": "Humans"
    }]
}),
listConfig: {
    tpl: Ext.create('Ext.XTemplate',
        '<ul><tpl for=".">',
        '<tpl if={group_name}>',
        '<tpl if="xindex == 1 || this.getGroupStr(parent[xindex - 2]) != this.getGroupStr(values)">',
        '<li class="x-combo-list-group"><b>{[this.getGroupStr(values)]}</b></li>',
        '</tpl>',
        '</tpl>',
        '<li role="option" class="x-boundlist-item" style="padding-left: 12px">{property}</li>',
        '</tpl>' +
        '</ul>', {
            getGroupStr: function (values) {
                return values.group_name
            }
        }
    )
},
queryMode: 'local',
valueField: 'property',
displayField: 'property',
renderTo: Ext.getBody()

});

Make list collapsible using js and add icons using styles. Can refer this fiddle http://jsfiddle.net/gilsha/82TzM/1/

Or else use Ext.ux.TreeCombo, Fiddle: http://jsfiddle.net/gilsha/ZvnaM/83/

Answer 2

If I were you I firstly consider using some already existing component.

Base treepicker exists as bundled extension in ExtJS framework - Ext.ux.TreePicker

Another useful implementation of treepicker is user extension Ext.ux.TreeCombo

If you want to create your own picker component it should extends from Ext.form.field.Picker For inspiration how to create your own picker you can look into source code of Ext.ux.TreePicker or Ext.picker.Date components.

Answer 3

Thanks to everyone's answer, I found another solution: use the createPicker function of the TriggerField. For example, here's how I extend the TriggerField` for a Grid Picker:

Ext.define('Custom.view.GridPicker', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.gridpicker',

    requires: [
        'Ext.grid.View',
        'Ext.grid.column.Column'
    ],

    store: 'none',
    idDataIndex: 'id',
    nameDataIndex: 'name',
    fieldLabel: 'Grid Picker',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    },

    createPicker: function() {
        picker = new Ext.create('Ext.grid.Panel', {
            floating: true,
            hidden: true,
            height: 150,
            width: 400,
            header: false,
            store: this.store,
            columns: [
                {
                    xtype: 'gridcolumn',
                    width: 95,
                    text: 'ID',
                    dataIndex: this.idDataIndex
                },
                {
                    xtype: 'gridcolumn',
                    width: 300,
                    text: 'Name',
                    dataIndex: this.nameDataIndex
                }
            ]
        });
        return picker;
    }

});

Fiddle: https://fiddle.sencha.com/#fiddle/2fb This custom component accepts 3 config : store, idDataIndex, nameDataIndex; all of them needed to display data to the grid. I think you can base on this to extend your own picker, such as Tree Grid Picker :)