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

Question

有没有办法在Trigger Field点击上实现组件弹出？例如,我有一个Trigger Field,当我点击Triggerfield时我想显示一个Tree Grid.当我从树网格中选择一个值时,触发字段也设置相同的值.Ext.Net中有一个与此类似的例子:http://examples.ext.net/#/Form/DropDownField/Overview/

我使用Sencha Arhitect 3和ExtJS 4.2.任何帮助表示赞赏!

Answer 1

试试这个.

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

});

使用js使列表可折叠,并使用样式添加图标.可以参考这个小提琴http://jsfiddle.net/gilsha/82TzM/1/

或者使用Ext.ux.TreeCombo,Fiddle:http://jsfiddle.net/gilsha/ZvnaM/83/