如何在具有现代主题的ext.js 7中的Combobox中显示嵌套列表

时间:2019-11-11 06:30:32

标签: combobox nested-lists

Ext.define('MyExtGenApp.view.main.header.HeaderView', {
    extend: 'Ext.Toolbar',
    xtype: 'headerview',
    cls: 'headerview',
    fields: ['name'],
    viewModel: {},
    items: [
        { 
            xtype: 'container',
            cls: 'headerviewtext',
            bind: { html: '{heading}' }
        },
        {
            xtype: 'combobox',
            store: states,
            multiSelect: false,
            itemCls:'mycombo',
            queryMode: 'local',
            selectOnFocus: true,
            margin:screenLeft,
            typeahead: false,
            displayField: 'name',
            valueField: 'name',
        }]
})

有Json数据要显示:

{
    "countryList": [{
        "country": "CN",
        "stateList": [{
            "state": "AB",
            "stateSpell": "ALBERTA"
        }, {
            "state": "BC",
            "stateSpell": "BRITISH COLUMBIA"
        }, {
            "state": "MB",
            "stateSpell": "MANITOBA"
        }, {
            "state": "NB",
            "stateSpell": "NEW BRUNSWICK"
        }, {
            "state": "NF",
            "stateSpell": "NEWFOUNDLAND"
        }, {
            "state": "NS",
            "stateSpell": "NOVA SCOTIA"
        }, {
            "state": "NT",
            "stateSpell": "NORTHWEST TERRITORY"
        }, {
            "state": "ON",
            "stateSpell": "ONTARIO"
        }, {
            "state": "PE",
            "stateSpell": "PRINCE EDWARD ISLAND"
        }, {
            "state": "PQ",
            "stateSpell": "QUEBEC"
        }, {
            "state": "QC",
            "stateSpell": "QUEBEC"
        }, {
            "state": "SK",
            "stateSpell": "SASKATCHEWAN"
        }, {
            "state": "YK",
            "stateSpell": "YUKON"
        }, {
            "state": "YT",
            "stateSpell": "YUKON"
        }]
    }, {
        "country": "MX",
        "stateList": [{
            "state": "AG",
            "stateSpell": "AGUASCALIENTES"
        }, {
            "state": "BJ",
            "stateSpell": "BAJA CALIFORNIA"
        }, {
            "state": "BS",
            "stateSpell": "BAJACALIFORNIASUR"
        }, {
            "state": "CH",
            "stateSpell": "CHIAPAS"
        }, {
            "state": "CI",
            "stateSpell": "CHIHUAHUA"
        }, {
            "state": "CL",
            "stateSpell": "COLIMA"
        }, {
            "state": "CP",
            "stateSpell": "CAMPECHE"
        }, {
            "state": "CU",
            "stateSpell": "COAHUILA"
        }, {
            "state": "DF",
            "stateSpell": "FEDERAL DISTRICT"
        }, {
            "state": "DG",
            "stateSpell": "DURANGO"
        }, {
            "state": "EM",
            "stateSpell": "MEXICO"
        }, {
            "state": "GJ",
            "stateSpell": "GUANAJUATO"
        }, {
            "state": "GR",
            "stateSpell": "GUERRERO"
        }, {
            "state": "HG",
            "stateSpell": "HIDALGO"
        }, {
            "state": "JA",
            "stateSpell": "JALISCO"
        }, {
            "state": "MH",
            "stateSpell": "MICHOACAN"
        }, {
            "state": "MR",
            "stateSpell": "MCRELOS"
        }, {
            "state": "MX",
            "stateSpell": "MEXICO"
        }, {
            "state": "NA",
            "stateSpell": "NAYARIT"
        }, {
            "state": "NL",
            "stateSpell": "NUEVO LEON"
        }, {
            "state": "OA",
            "stateSpell": "OAXACA"
        }, {
            "state": "PU",
            "stateSpell": "PUEBLA"
        }, {
            "state": "QA",
            "stateSpell": "QUERETARO"
        }, {
            "state": "QR",
            "stateSpell": "QUINTANA ROO"
        }, {
            "state": "SI",
            "stateSpell": "SINALOA"
        }, {
            "state": "SL",
            "stateSpell": "SAN LUIS POTOSI"
        }, {
            "state": "SO",
            "stateSpell": "SONORA"
        }, {
            "state": "TA",
            "stateSpell": "TABASCO"
        }, {
            "state": "TL",
            "stateSpell": "TLAXCALA"
        }, {
            "state": "TM",
            "stateSpell": "TAMAULIPAS"
        }, {
            "state": "VL",
            "stateSpell": "VERACRUZ-LLAV"
        }, {
            "state": "YC",
            "stateSpell": "YUCATAN"
        }, {
            "state": "ZT",
            "stateSpell": "ZACATECAS"
        }]
    }, {
        "country": "US",
        "stateList": [{
            "state": "AK",
            "stateSpell": "ALASKA"
        }, {
            "state": "AL",
            "stateSpell": "ALABAMA"
        }, {
            "state": "AR",
            "stateSpell": "ARKANSAS"
        }, {
            "state": "AZ",
            "stateSpell": "ARIZONA"
        }, {
            "state": "CA",
            "stateSpell": "CALIFORNIA"
        }, {
            "state": "CO",
            "stateSpell": "COLORADO"
        }, {
            "state": "CT",
            "stateSpell": "CONNECTICUT"
        }, {
            "state": "DE",
            "stateSpell": "DELAWARE"
        }, {
            "state": "FL",
            "stateSpell": "FLORIDA"
        }, {
            "state": "GA",
            "stateSpell": "GEORGIA"
        }, {
            "state": "HI",
            "stateSpell": "HAWAII"
        }, {
            "state": "IA",
            "stateSpell": "IOWA"
        }, {
            "state": "ID",
            "stateSpell": "IDAHO"
        }, {
            "state": "IL",
            "stateSpell": "ILLINOIS"
        }, {
            "state": "IN",
            "stateSpell": "INDIANA"
        }, {
            "state": "KS",
            "stateSpell": "KANSAS"
        }, {
            "state": "KY",
            "stateSpell": "KENTUCKY"
        }, {
            "state": "LA",
            "stateSpell": "LOUISIANA"
        }, {
            "state": "MA",
            "stateSpell": "MASSACHUSETTS"
        }, {
            "state": "MD",
            "stateSpell": "MARYLAND"
        }, {
            "state": "ME",
            "stateSpell": "MAINE"
        }, {
            "state": "MI",
            "stateSpell": "MICHIGAN"
        }, {
            "state": "MN",
            "stateSpell": "MINNESOTA"
        }, {
            "state": "MO",
            "stateSpell": "MISSOURI"
        }, {
            "state": "MS",
            "stateSpell": "MISSISSIPPI"
        }, {
            "state": "MT",
            "stateSpell": "MONTANA"
        }, {
            "state": "NC",
            "stateSpell": "NORTH CAROLINA"
        }, {
            "state": "ND",
            "stateSpell": "NORTH DAKOTA"
        }, {
            "state": "NE",
            "stateSpell": "NEBRAKSA"
        }, {
            "state": "NH",
            "stateSpell": "NEW HAMPSHIRE"
        }, {
            "state": "NJ",
            "stateSpell": "NEW JERSEY"
        }, {
            "state": "NM",
            "stateSpell": "NEW MEXICO"
        }, {
            "state": "NV",
            "stateSpell": "NEVADA"
        }, {
            "state": "NY",
            "stateSpell": "NEW YORK"
        }, {
            "state": "OH",
            "stateSpell": "OHIO"
        }, {
            "state": "OK",
            "stateSpell": "OKLAHOMA"
        }, {
            "state": "OR",
            "stateSpell": "OREGON"
        }, {
            "state": "PA",
            "stateSpell": "PENNSYLVANIA"
        }, {
            "state": "RI",
            "stateSpell": "RHODE ISLAND"
        }, {
            "state": "SC",
            "stateSpell": "SOUTH CAROLINA"
        }, {
            "state": "SD",
            "stateSpell": "SOUTH DAKOTA"
        }, {
            "state": "TN",
            "stateSpell": "TENNESSEE"
        }, {
            "state": "TX",
            "stateSpell": "TEXAS"
        }, {
            "state": "UT",
            "stateSpell": "UTAH"
        }, {
            "state": "VA",
            "stateSpell": "VIRGINIA"
        }, {
            "state": "VT",
            "stateSpell": "VERMONT"
        }, {
            "state": "WA",
            "stateSpell": "WASHINGTON"
        }, {
            "state": "WI",
            "stateSpell": "WISCONSIN"
        }, {
            "state": "WV",
            "stateSpell": "WEST VIRGINIA"
        }, {
            "state": "WY",
            "stateSpell": "WYOMING"
        }]
    }]
}

我想在组合框中显示如下所示

**CountryName 1**
State 1
State 2
State 3
**CountryName 2**
State 1
State 2
State 3
**CountryName 3**
State 1
State 2
State 3

0 个答案:

没有答案