ExtJs4_ComboWithTemplatesAndAjax示例;

/**
 * ComboWithTemplatesAndAjax示例
 * 示例亮点：下拉框的配置；
 */
Ext.require([
    "Ext.data.*",
    "Ext.form.*"
]);
Ext.onReady(function() {
    
    // 定义Post模型；
    Ext.define("Post", {
        extend: "Ext.data.Model",
        proxy: {
            // jsonp=>uses JSON-P to send requests to a server on a different domain;
            type: "ajax",    // sends requests to a server on the same domain;
            url: "resources/js/ComboWithTemplatesAndAjax.json",
            
            reader: {
                type: 'json',
                root: "persons",
                totalProperty: 'totalCount'
            }
        },
        
        fields: [{
            name: "id", mapping: "person_id"
        }, {
            name: "name"
        }, {
            name: "sex"
        }, {
            name: "age"
        }, {
            name: "birthday"
        }]
    });
    
    // data store
    var ds = Ext.create('Ext.data.Store', {
        pageSize: 5,
        model: 'Post'
    });
    
    // panel
    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        
        title: "人物搜索",
        width: 560,
        bodyPadding: 10,
        layout: "anchor",
        
        items: [{
            xtype: "combo",
            store: ds,
            displayField: "name",
            typeAhead: false,     // 不自动匹配；
            hideLabel: true,
            hideTrigger: true,
            anchor: '100%',
            
            listConfig: {
                loadingText: "Searching...",
                emptyText: "No matching persons found.",
                
                getInnerTpl: function() {
                    return '<a href="http://cenyebao.com/it.html?id={id}&name={name}">' +
                                '<h3><span>{name}_{sex}</span></h3>' +
                           '</a>';
                }
            },
            
            pageSize: 10
        }, {
            xtype: "component",
            style: "margin-top: 10px;",
            html: "请输入最少为4个字节的字符串进行搜索！"
        }]
    });
    
});

// ComboWithTemplatesAndAjax.json
/*
{
    totalCount: "7890",
    persons: [{
        "person_id" : "1",
        "name" : "汪涵狂人",
        "sex" : "女",
        "age" : "1",
        "birthday" : "1987-04-01"
    }, {
        "person_id" : "2",
        "name" : "欧弟狂人",
        "sex" : "男",
        "age" : "2",
        "birthday" : "1987-04-02"
    }, {
        "person_id" : "3",
        "name" : "钱枫狂人",
        "sex" : "女",
        "age" : "3",
        "birthday" : "1987-04-03"
    }, {
        "person_id" : "4",
        "name" : "浩二狂人",
        "sex" : "男",
        "age" : "4",
        "birthday" : "1987-04-04"
    }, {
        "person_id" : "5",
        "name" : "小五狂人",
        "sex" : "女",
        "age" : "5",
        "birthday" : "1987-04-05"
    }, {
        "person_id" : "6",
        "name" : "田源狂人",
        "sex" : "男",
        "age" : "6",
        "birthday" : "1987-04-06"
    }, {
        "person_id" : "7",
        "name" : "黄锋狂人",
        "sex" : "女",
        "age" : "7",
        "birthday" : "1987-04-07"
    }, {
        "person_id" : "8",
        "name" : "楚原狂人",
        "sex" : "男",
        "age" : "8",
        "birthday" : "1987-04-08"
    }, {
        "person_id" : "9",
        "name" : "冷夜狂人",
        "sex" : "女",
        "age" : "9",
        "birthday" : "1987-04-09"
    }, {
        "person_id" : "10",
        "name" : "狂潮狂人",
        "sex" : "男",
        "age" : "10",
        "birthday" : "1987-04-010"
    }]
}
*/