1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    vtmoren is on a distinguished road

      0  

    Default Combobox auto-complete: Arrow Keys do not work properly

    Combobox auto-complete: Arrow Keys do not work properly


    I have an existing txet field which I want to add an auto-complete feature to in my jsp:
    <input id="text" name="text" class="classText" type="text" onfocus="Filter.setFilterType('filter');" onkeyup="Filter.displayData();"/>

    This code appears within my displayData function:

    Ext.namespace('Ext.filterData');

    Ext.filterData.data = displayData;
    var filterStore = new Ext.data.SimpleStore({
    fields: ['data'],
    data: Ext.filterData.data
    });

    var filterText = new Ext.form.ComboBox({
    store: filterStore,
    displayField: 'data',
    tpl: '<div class="filtertextsize">{data}</div>',
    fieldClass: 'filtertextsize',
    typeAhead: false,
    mode: 'local',
    triggerAction: 'all',
    hideTrigger: true,
    selectOnFocus : false,
    maxHeight: 150,
    shadow: false,
    forceSelection: false,
    width: 169
    })

    filterText.applyTo(transform);

    filterText.focus();

    The text field now has auto-complete functionality, but the arrow keys do not seem to work:
    Left and right do not move the cursor.
    Up and down do not move up or down the drop-down list...

    Also as each key is typed into the textfield the shadow keeps getting darker and darker (which is not as critical because I removed it)

    Any ideas why the arrow keys do nto function?
    Do I need to define them using the specialKeys event?
    I fifugred this functionality was already incorporated into the Ext.form.Combobox object...

    Any responses would be greatly appreciated...

    -VM

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    vtmoren is on a distinguished road

      0  

    Default


    In the following line:

    filterText.applyTo(transform);

    transform represents a string variable of the current textfield element.

    Any ideas?

    -VM

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    69
    Vote Rating
    0
    mthad is on a distinguished road

      0  

    Default


    did u find any solution for how to work on keyboard arrow keys? please let me know.

  4. #4
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    402
    Vote Rating
    1
    bkraut is on a distinguished road

      0  

    Default


    I use next configuration for ComboBox and it works perfect:

    PHP Code:

    new Ext.form.ComboBox({
                           
    allowBlankfalse,
                           
    name'anType',
                        
    storedsCombo,
                        
    tabIndex6,
                           
    displayField'acName',
                           
    typeAheadtrue,
                           
    valueField'anType',
                           
    emptyText'Empty text ...',
                           
    editable:true,
                           
    selectOnFocus:true,
                           
    mode'local',
                        
    triggerAction'all',
                        
    forceSelectiontrue,
                        
    allowBlankfalse,
                        
    width:155
                   
    }); 

  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    69
    Vote Rating
    0
    mthad is on a distinguished road

      0  

    Default


    Sorry!! it is not clear to me. What do you mean by "next configuration"? here is my combobox config:

    Code:
         var productSearch = new Ext.form.ComboBox({
             store:  CommonproductStore ,
             id:'productCombo',
             displayField:'product',        
             valueField: 'productNCID',
             pageSize: PageSize,       
             width: 575,        
             valiateonBlur:false,
             typeAhead: true,
             mode: 'remote',
             triggerAction: 'all',
             emptyText:productText,
             selectOnFocus:true,
             hiddenId:'productNCID',
             hiddenName: 'productNCID',
             applyTo: 'product',
             editable:true,
             minChars: 2,
             tpl: '<font color="black"><tpl for="."><div class="x-combo-list-item">{product}</div></tpl></font>',        
             hideTrigger:false,
             style: 'color: black;'
          });

Thread Participants: 2