.. / Ajax Suggest в ExtJS Combobox - выборка по строке с автозавершением в стиле google-поиска

  1. ExtJS-notes

В примерах по ExtJS вариант называется "Combo with Templates and Ajax". Но там что-то невразумительно тяжелое. Мне такое не надо. Мне надо что-то простое и нехитрое. Пойду по шагам

Шаг 1. Combobox в статике

 Ext.create('Ext.form.field.ComboBox', {
    queryMode: 'local',
    renderTo: Ext.getBody(),
    store: ['Жопа 1', 'Жопа 2']
});

Здесь вообще задается самый минимум. даже поля не указываются. Значения будут выбраны из статического массива

Шаг 2. Combobox c удаленным источником данных

 /* загрузка всего и сразу  */
 Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    width:400,
    queryMode: 'local',  
    store: {
        autoLoad: true, 
        fields: ['text'],
        proxy: {
            type: 'ajax',
            url: 'dt.php'
        }
    }
});

autoload:true указывает на то, что нужно загрузить все и сразу. На сервер пойдет GET запрос с параметром query в котором будет указана строка поиска. С сервера ожидается прихода массива вида:

[{text:'жопа 1',text:'жопа 2'.......}]

queryMode: 'local' - это не то что можно подумать, зная что по умолчанию стоит queryMode: 'local'. Это означает что запрос на фильтрацию содержимого combobox. Если фильтрация локальная, как в этом примере - при наборе буковок будут отображаться те записи которые начинаются(!!!) с набранного текста. Т.е. если слово будет в центре записи, то типа неайдено не будет. Для этого должна быть удаленная фильтрация. В последнем случае будет сформирован новый запрос к серверу и там можно уже выбирать что угодно и как угодно.

Шаг 3. Combobox c удаленным источником данных и подсказкой

 Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    width:400,
    minChars: 1,
    store: {

        fields: ['text'],
        proxy: {
            type: 'ajax',
            url: 'dt.php'
        }
    }
});

Здесь я убрал дурацкий queryMode: 'local' и запулил minChar = 1, т.е. отправляю запрос на сервер даже если набрана хотя бы одна буква.

Шаг 4. Украшательства

 Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    width:400,
    minChars: 1,
    hideTrigger: true, // убрал переключатель из cobobox, превратив его (визуально) в текстовое поле.
    emptyText: 'Введите текст', // включил подсказу для пустого поля
    editable: false,  // удалил возможность отсебятины. Выбрать можно только то что есть.
    typeAhead: true, // форсирует набор данных. типа autocomplete если значение единственное 
    store: {

        fields: ['text'],
        proxy: {
            type: 'ajax',
            url: 'dt.php'
        }
    }
});


});

Шаг 5. Листалка для простыней

Если выдача очень большая, в Combobox предусмотрена выдача поиска порциями.

 Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    width:400,
    minChars: 2,
    hideTrigger: true,
    emptyText: 'Введите текст',
    typeAhead: true,
    pageSize: true, // указание на то что нужно вывести листалку
    store: {
        pageSize: 5, // количество записей на странице
        fields: ['text'],
        proxy: {
            type: 'ajax',
            url: 'dt2.php',
            reader: {
                root: 'data', // параметр в json отклике где ледат данные
                type: 'json'
            }
        }
    }
});

На сервер в GET запросе будут переданы limit (количество записей) и start - позиция в записи для запроса (типа SELECT * FROM t LIMIT start,limit)
С сервера, соответственно, должно придти:

{ 
    "total": 8,  /*  количество найденных записей */
    "data": [  /* данные */
        {"text": "Жопа 1"}, 
        {"text": "Жопа 2"}, 
        {"text": "Жопа 3"} 
    ] 
}
  1. 2012-05-25
  2. ExtJS-notes
Go Index Test