Ext.BLANK_IMAGE_URL = '/images/default/s.gif';

Ext.onReady(function(){

    var ds = new Ext.data.Store({
        baseParams: {
            type: 'json',
            count: 10
        },
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://zip.ricollab.jp/search'
        }),
        reader: new Ext.data.JsonReader({
            root: 'result',
            totalProperty: 'totalResults',
            id: 'zipcode'
        }, [
            {name: 'zipcode', mapping: 'zipcode'},
            {name: 'address', mapping: 'address'}
        ])
    });

    ds.on('beforeload', function(s, o) {
        o.params.page = o.params.start / o.params.limit + 1;
    });

    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '<h3>〒{zipcode}</h3>',
            '{address}',
        '</div></tpl>'
    );

    var zip = new Ext.form.NumberField({
        applyTo: 'zip',
        maxLength: 7,
        width: 100,
        selectOnFocus: true
    });

    var address = new Ext.form.TextField({
        applyTo: 'address',
        width: 350,
        selectOnFocus: true
    });

    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'title',
        typeAhead: false,
        loadingText: '検索中...',
        emptyText: 'ここに郵便番号または住所の一部を入力してください',
        width: 350,
        pageSize:10,
        hideTrigger: true, // トリガー要素を隠す
        tpl: resultTpl,
        applyTo: 'search',
        itemSelector: 'div.search-item',
        queryParam: 'q',
        minChars: 2,
        onSelect: function(record){
            zip.setValue(record.data.zipcode);
            address.setValue(record.data.address);
            this.collapse();
        },
        onKeyUp : function(e){
            if(this.editable !== false && !e.isSpecialKey()){
                this.lastKey = e.getKey();
             }
        }
    });

    var timeout;
    var comboValue = '';
    
    var focusCombo = function() {
        if (comboValue != search.el.dom.value) {
            if (search.isExpanded()) {
                search.collapse();
            }
            search.onTriggerClick();
            comboValue = search.el.dom.value;
        }
        timeout = setTimeout(focusCombo, 500);
    }

    var blurCombo = function() {
        clearTimeout(timeout);
    }

    search.on({
        'focus': focusCombo,
        'blur': blurCombo
    });

});