非商店价值ExtJs

Question

所以我试图用ExtJs 4创建一个'异常'的组合框,我遇到了一个小问题,我无法弄清楚如何解决.我用下面的代码了解了基础知识.截至目前,我可以通过下拉列表以正确的格式显示所有地址,当我点击正确的地址时,它会在输入中正确显示"Street1"值.

这就是我所坚持的:我正在尝试在组合框中添加一个初始项目,它基本上表示用户可以选择的"添加新地址".(我打算打开一个模态,用户可以输入一个新地址,保存它然后将它显示在组合框中,但所有这些都应该相当简单)我似乎无法弄清楚添加一个简单的"添加新地址"然后跟踪该值以查看是否返回该值以使模式出现的方法.我不想将它添加到商店中(我假设)将在数据库中添加一个项目,我宁愿不会发生'添加新地址'.

有关如何使其工作的任何想法？从下面您可以看到LocationStore是我的商店,并且通用地址组件适用.

先感谢您.

组合框代码:

{
     xtype: 'combobox',
     anchor: '100%',
     listConfig: {
         emptyText: 'Add New Address - Empty Text',
         itemTpl: '<tpl if="Name">{Name}<br /></tpl>'+'<tpl if="Street1">{Street1}<br /></tpl>'+'<tpl if="Street2">{Street2}<br /></tpl>'+'{City}, {StateOrProvince} {PostalCode}'
     },
     emptyText: 'Add New Location - tester',
     fieldLabel: 'Street 1',
     name: 'Street1',
     allowBlank: false,
     blankText: 'Street 1 Required',
     displayField: 'Street1',
     forceSelection: true,
     store: 'LocationStore',
     typeAhead: true,
     valueField: 'Street1',
     valueNotFoundText: 'Add New Location'
 },

Answer 1

感谢那些把我指向文档中正确位置的人,我终于找到了它!

我设法通过使用来实现你想要的tpl,遗憾的是我无法找到一种方法来使键盘导航适用于添加的项目.我查看了代码Ext.view.BoundListKeyNav,但没有找到任何简单的解决方案......

关键是使用tpl而不是itemTpl,并在for循环之前为额外项添加标记:

listConfig: {
    tpl: '<div class="my-boundlist-item-menu">Add New Address</div>'
        + '<tpl for=".">'
        + '<div class="x-boundlist-item">' + itemTpl + '</div></tpl>'
    ,listeners: {
        el: {
            delegate: '.my-boundlist-item-menu'
            ,click: function() {
                alert('Go go go!');
            }
        }
    }
}

其余的代码在jsFiddle上.