Combobox in 4.1.1

[s00pa]

Hi,

first post so please play nice .. I've just started with ExtJS and after trying to make a combobox in 4.1.1 with remote store I find that it doesn't work as expected.. As in, pressing enter doesn't select the item I'm highlighting, pressing tab jumps to the next field but doesn't select and if I select by clicking the item I have to double-click to select it.
The combobox in ExtJS 4.0.7 doesn't have this problem. I'll post more info if needed but just wanted to check if this was a known error.

Thanks,
Sean

PS: as it's my first post I'd like to thank the team at Sencha for this framework. It seems perfect for developing powerful web apps but I've got a lot of learning to do

[skirtle]

Not a known problem as far as I'm aware.

Could you post the config for your combobox? Please make sure you use [CODE] tags (# button on the editor toolbar).

[s00pa]

Thanks for the reply. I've had a play around to see what I can figure out. A simple combobox with local source seems to work fine. I'm trying to learn a few things at the same time so I am running a remote store using ExtDirect and I'm using MVC pattern. My code is probably crummy but I'll post anyway. I should probably try remote store without MVC or ExtDirect as my suspicion is that the bug is related to using a remote store - any help appreciated

app.js

Ext.Loader.setConfig({enabled:true});


Ext.application({
    name: 'AM',
    appFolder: 'app',


    controllers: [
        'Products'


    ],

    launch: function() {




        Ext.create('Ext.container.Viewport', {


            layout: 'border',
            frame: false,
            items: [
                {
                    xtype: 'form',
                    region: 'center',
                    width: '100%',
                    frame: true,
                    bodyStyle : 'padding: 6px',
                    deferredRender : false,
                    border : false,
                    items : [{
                        xtype: 'productsearch'
                    }]
                }


            ]
});
}
});

Products Controller

Ext.define('AM.controller.Products', {
    extend: 'Ext.app.Controller',


    stores: [
        'Products'
    ],
    models: [
        'Product'
    ],
    views: [
        'product.List',
        'product.Search'


    ]});

Products Store

Ext.define('AM.store.Products', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Product',
    autoLoad: true,
    pageSize: 10


});

Product Search View:

Ext.define('AM.view.product.Search', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.productsearch',
    fieldLabel: 'Select a product',
    store: 'Products',
    displayField: 'name',
    valueField : 'id',
    queryMode: 'remote',
    typeAhead: true,
    queryDelay: 200,
    minChars: 1,
    forceSelection: true,
    pageSize: true,
    triggerAction: 'all'
   
    })

[s00pa]

Product Model :

Ext.define('AM.model.Product', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'generic'],
    proxy: {
        type : 'direct',
        api : {
              read : Ext.php.Products.getList


        },
        reader : {
            root : 'data',
            idProperty : 'id',
            type : 'json',
            totalProperty: 'totalCount',
            successProperty: 'success'


        }
    }


});

[s00pa]

I think I've figured it out. Unfortunately my PHP code was expecting a query parameter to be passed but I didn't realise that ExtJS does a load without a query parameter when the page is first loaded. This error seems to then cause the weird behaviour I experienced. Ordinarily I'd be checking for all this in the PHP but as I'm just playing around at the mo I hadn't gotten that far.

Thanks,

Sean

[skirtle]

I think the extra request will be because you have autoLoad: true on your store, if that helps.