Hybrid View

  1. #1
    Ext User
    Join Date
    Nov 2010
    Posts
    1
    Vote Rating
    0
    auspara is on a distinguished road

      0  

    Default ComboBox auto-complete

    ComboBox auto-complete


    Hi Friends !

    Background :

    We are creating an Adobe Air Offline Desktop Application (using Adobe Air 2.5 and Extjs 3.3.0 Air Pack). We enjoy using Extjs thus far.

    We are using SQLite for datastorage.

    We have a requirement to provide autocomplete for our combo boxes. The data for the combo boxes is to be derived from the local SQLite. Some of the combo boxes may contain 10,000 + records.

    Current Implementation:


    PHP Code:
    conn = new Ext.data.SQLiteDB();
     
    postcode Ext.data.Record.create([{
     
    name'id'},
    {
     
    name'postcode'},
    {
     
    name'locality'},
    {
     
    name'state'},
    {
     
    name'current_as_of'},
    {
     
    name'last_updated'}]);
     
    postcodeStore = new Ext.data.SQLiteStore({
     
    autoLoadtrue,
     
    autoCreateTablefalse,
     
    fieldspostcode,
     
    connconn,
     
    tableName'tbl_postcode_localities',
     
    idProperty'id'
    });
     
    // so we dont get crazy
    postcodeStore.baseParams.limit 10;
     
    postcodeStore.load();
    air.Introspector.Console.info(postcodeStore);
     
    new 
    Ext.form.ComboBox({
     
    storepostcodeStore,
     
    fieldLabel'locality',
     
    displayField'locality',
     
    typeAheadtrue,
     
    width250,
     
    autoScrollfalse,
     
    mode'local',
     
    valueField'id',
     
    triggerAction'all',
     
    enableKeyEventstrue,
     
    emptyText'Select a locality...',
     
    loadingText'Searching...',
     
    pageSize10,
     
    totalProperty'totalCount',
     
    hideTriggerfalse,
     
    selectOnFocustrue,
     
    minChars3,
     
    forceSelectiontrue,
     
    allowBlankfalse,
     
    listeners: {
      
    beforequery: function (qe) {
       
    air.Introspector.Console.info(qe);
      }
     }
    })
     
    try {
     
    conn.open('data/test.db');
     
    air.trace("Database opened");
    } catch (
    err) {
     
    air.trace("Database could not be opened");
     
    air.trace(err.message);

    //----------- // SNIP // --------------

    // The SQLite table schema looks like this :

    CREATE TABLE tbl_postcode_localities (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    postcode TEXT NOT NULL,
    locality TEXT NOT NULL,
    state TEXT NOT NULL,
    current_as_of DATE,
    last_updated DATE DEFAULT (datetime('now','localtime'))
    )

    Problem :

    So ... we have a paging ComboBox (please see dropdown1.jpg , below).

    dropdown1.JPG


    This is great! We can select next page and only load X number of results from the database at any given time (please see screenshot 3, below).

    dropdown3.JPG

    However the issue we have is that the autocomplete only appears to allow for results within the current page of the result set (please see dropdown2.jpg). The database does not appear to be queried (or perhaps im not looking in the right spot) when the user types values in.

    For example if I typed in a value of "lyons" it does not autocomplete the value of "LYONS" (which is within the second page of results).

    dropdown4.JPG

    However if I typing in "JIN", JINGILI is correctly autocompleted (as it occured in the current page of results).


    dropdown2.JPG

    Unfortunately it is an assumption of the application that we do not have access to a backend (eg we can not make ajax requests out to receive json results), all data must come from the local sqlite database.

    I seek advise from the community as to how to achieve the situation where suggestion results can be dynamically retreaved from the local sqlite database as the user types in values (without loading all 10,000+ records).

    I have been looking for a number of days without sucess for a solution to this query, thank you in advance for any time spent here it will be greatly appreciated.

  2. #2
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    526
    Vote Rating
    17
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    I didn't test the paging with a local combo right now.
    But I would recommend to setup the combo to a remote combo as follows:
    Code:
    new Ext.form.ComboBox({
     store: postcodeStore,
     fieldLabel: 'locality',
     displayField: 'locality',
     typeAhead: true,
     width: 250,
     autoScroll: false,
     mode: 'remote',
     valueField: 'id',
     triggerAction: 'query',
     queryParam: 'locality',
     lastQuery: '', // to do a first load
     enableKeyEvents: true,
     emptyText: 'Select a locality...',
     loadingText: 'Searching...',
     pageSize: 10,
     totalProperty: 'totalCount', // it is not a combo config option
     hideTrigger: false,
     selectOnFocus: true,
     minChars: 3,
     forceSelection: true,
     allowBlank: false,
     listeners: {
      beforequery: function (qe) {
       air.Introspector.Console.info(qe);
      }
     }
    });
    I assume that autocomplete with a local paging combo will not work and that this is not an Air specific issue.
    Some thoughts:
    The store only holds the 10 records of the current page. How should the combo look into records that aren't present and that cannot be loaded since it is a local combo? I would say you cannot do other than another load, which means, you have to use a remote combo.

    In ext-air, a remote combo with a SQLiteStore isn't really remote of course. It only does database queries.
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

Similar Threads

  1. Auto Complete combobox on typing single character
    By extjslikeit in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Jul 2010, 9:34 AM
  2. ComboBox<BeanModel> + auto-complete
    By valery.stroeder in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 3 Mar 2010, 12:22 AM
  3. Auto Complete Combobox w/ Template using MySQL and PHP
    By wesDuff in forum Community Discussion
    Replies: 8
    Last Post: 14 Jul 2009, 3:24 AM
  4. auto complete ComboBox
    By soma13 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 6 Feb 2009, 7:48 AM
  5. Combobox auto-complete: Arrow Keys do not work properly
    By vtmoren in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 12 Aug 2008, 4:35 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar