如何在ExtJS的Triggerfield弹出窗口中放置组件？

有没有办法在触发字段单击时实现组件弹出？例如，我有一个触发器字段，我想在单击触发器字段时显示一个树网格。当我从树网格中选择一个值时，触发器字段也会设置相同的值。 Ext.Net中有一个类似的示例：

---

我使用Sencha Arhitect 3和ExtJS 4.2。感谢您的帮助 基本treepicker作为捆绑扩展存在于ExtJS框架中-

treepicker的另一个有用实现是用户扩展

如果您想创建自己的选择器组件，它应该从 对于如何创建自己的选择器的灵感，您可以查看或组件的源代码。

试试这个

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()

Ext.create（'Ext.form.ComboBox'，{
存储：Ext.create（'Ext.data.store'{
字段：[“组名称”，“属性”]，
数据：[{
“集团名称”：“武装冲突”，
“属性”：“边界冲突”
}, {
“集团名称”：“武装冲突”，
“财产”：“民兵冲突”
}, {
“集团名称”：“走私”，
“财产”：“燃料”
}, {
“集团名称”：“走私”，
“财产”：“人”
}]
}),
列表配置：{
tpl:Ext.create（'Ext.XTemplate'，
“
”，
'',
'',
“
{[this.getGroupStr（values）]}
”，
'',
'',
“
{property}
”，
'' +
“
”{
getGroupStr:函数（值）{
返回值。组名称
}
}
)
},
queryMode:'本地'，
valueField:'属性'，
displayField:'属性'，
renderTo:Ext.getBody（）

}))

使用js使列表可折叠，并使用样式添加图标。 我能指一下这把小提琴吗

---

或者使用Ext.ux.TreeCombo，Fiddle:

感谢大家的回答，我找到了另一个解决方案：使用

触发器字段的
createPicker
功能。例如，下面是我如何为网格选择器扩展TriggerField`

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;
    }

});

小提琴：
这个自定义组件接受3个配置：store、idDataIndex、nameDataIndex；它们都需要向网格显示数据。我认为您可以在此基础上扩展自己的选择器，例如树网格选择器：）
当前触发器字段正是这样做的。例如，一个日期字段显示一个
picker.date
实例。谢谢，但我问的是如何“准确”实现这一点。我必须为某个父类建立子类，还是扩展triggerfield？扩展
Ext.form.field.Trigger
。这两个答案都是正确的，但我想给你评分。我想这样做，但你的小提琴不适合我。只是一片空白。