1

因此，我尝试使用 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'
 },
4

2 回答 2

5

感谢那些在文档中指出我正确位置的人，我终于找到了！

我设法通过使用 来实现您想要的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上的其余代码。

于 2013-06-06T20:59:10.317 回答
0

@rixo 查看关于 sencha api 的评论：

配置：Ext.form.field.ComboBoxView

增加价值：

也许我们可以使用Sencha 合并对象功能...

要将“添加新位置”值放在商店顶部：

var newLocation = { 'Street' : 'Add New Location' };
var dataMerged = Ext.Object.merge(newLocation,myStore.getRange());
myStore.loadData(dataMerged);

种类：

  1. 将名称配置参数添加到您的组合框

  2. 在控制器上：（2 种方式）

    'nameComboView 组合框 [name=combo]' : {

    select : this.function1, // <-- when you select a item
change : this.funciton2  // <-- when the item select are changing

    }

  3. 现在，在功能上，比较该值是否打开模态窗口。

于 2013-06-06T07:42:49.660 回答