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/