非存储值ExtJs [英] Non-store value ExtJs
问题描述
所以我试图创建一个异常组合框使用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'
}，$ b $感谢那些把我指向文档中正确位置的人，因为他们是一个非常有价值的人，所以他们可以在这里找到一个合适的解决方案。 我终于找到了！
我通过使用 tpl 设法实现了你想要的，一种使键盘导航工作用于添加项目的方法。我查看了 Ext.view的代码.BoundListKeyNav ，但没有找到任何简单的解决方案...
关键是使用 tpl 循环：
listConfig：{
tpl：'< div class =my-boundlist-item-menu >新增地址< / 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 上。
So I'm trying to create an 'abnormal' combobox using ExtJs 4 and I'm running into a slight issue which I can't figure out how to resolve. I got the basics down with the code that follows. As of right now I am able to get the dropdown to show all the addresses in a proper format and when I click on the proper address it properly shows the 'Street1' value in the input.
Here is what I'm stuck on:
I'm trying to add an initial item to the combobox that basically says something like 'Add New Address' that the user can select. (I'm planning on having this open a modal where the user can input a new address, save it and then have it be displayed back in the combobox, but all of that should be fairly simple) I can't seem to figure out a way of adding just a simple 'Add New Address' and then tracking the value to see if that value is returned to know to make the modal appear or not. I don't want to add it to the store as (I assume) that will add an item in the database and I'd prefer that not happen for the 'Add New Address'.
Any thoughts on how to get that to work? From below you can see that LocationStore is my store and that the general address components apply.
Thank you in advance.
ComboBox Code:
{
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'
},
解决方案 Thanks to those who pointed me to the right place in the doc, I finally found it!
I managed to achieve what you want by using the tpl, unfortunately I could not find a way to make the keyboard navigation work for the added item. I've looked at the code of Ext.view.BoundListKeyNav, but didn't find any easy solution...
The key was to use tpl instead of itemTpl, and add the markup for the extra item before the for loop:
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!');
}
}
}
}
The rest of the code in on jsFiddle.
这篇关于非存储值ExtJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
