ExtJS Combobox

by WILLIAM CORREA

HTML

<script src="https://siga.fagoc.br/lib/?id=fagoc.br&amp;r=js&amp;extjs=1&amp;v=4.9.0.0&amp;file=lib.js"></script>
<link rel="stylesheet" href="https://siga.fagoc.br/lib/?id=fagoc.br&amp;r=css&amp;extjs=1&amp;v=4.9.0.0&amp;file=lib.css">
<div id="target"></div>

CSS

.x-tab-strip span.x-tab-strip-text {
  color: #AEAEAE;
}

.x-tab-strip-over span.x-tab-strip-text {
	color: #666;
}

.x-tab-strip-active span.x-tab-strip-text {
    font-weight: normal;
    color: #000;
}

JavaScript

/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * [email protected]
 * http://www.sencha.com/license
 */

Ext.onReady(function(){
    
    var value = window.localStorage.getItem('cid_codigo');
    var validate = true;
    var trigger = false;
    var id = 'cid_codigo';

    var store = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            //url: 'http://extjs.com/forum/topics-remote.php'
            url: 'http://teste.fagoc.br/siga/src/principal/json/Cidade.gen.json.php?action=cidade-j-list&full=0'
        }),
        reader: new Ext.data.JsonReader({
            root: 'rows',
            totalProperty: 'total',
            id: 'cid_codigo'
            ,autoLoad: false
            //,baseParams: {
            //  start: 0
            // ,limit: 25
            //}
        }, [
            {name: 'cid_codigo', mapping: 'cid_codigo'},
            {name: 'cid_nome', mapping: 'cid_nome'},
            {name: 'cid_IBGE', mapping: 'cid_IBGE'},
            {name: 'cid_cod_ESTADO', mapping: 'cid_cod_ESTADO'}
            
        ])
    });
    
    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="x-combo-list-item">',
                '{cid_nome}',
            '</div>',
        '</tpl>'
    );
    
    var search = new Ext.form.ComboBox({
        store: store
        
        ,id: id
        ,hiddenName: 'cid_nome'
        ,displayField:'cid_nome'
        ,valueField:'cid_codigo'
        ,mode: 'remote'
        ,queryMode: 'remote'
        ,queryParam: 'query'

        ,typeAhead: false
        ,hideTrigger: false
        ,forceSelection: false
        ,queryDelay: 900
        ,loadingText: 'Pesquisando...'
        ,emptyText: '.:. Digite para Pesquisar .:.'
        
        ,fieldLabel: 'Cidade'
        ,anchor: '95%'
        ,listWidth: 300
        //,width: 570
        ,minChars: 2
        ,pageSize: 25

        //msgTarget: 'under',
        //allowBlank:...