Non-store value ExtJs

问题:

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'
 },

回答1:

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.

回答2:

@rixo see the comments on sencha api:

Config: Ext.form.field.ComboBoxView

---

ADD VALUE:

Maybe we can use Sencha merge object function...

To put 'add new location' value at the store top:

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

SORT:

1. add name config param to your combobox

2. On controller: (2 ways)

   'nameComboView combobox[name=combo]' : {

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

   }

3. Now, on function, compare the value to open modal window or not.