Results 1 to 2 of 2

Thread: combobox with nested JSON

  1. #1
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default combobox with nested JSON

    Hi,

    I have JSON containing Country Names and States Name in that country.

    I want to show in combo box as shown below

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

    JSON
    Code:
    {
        "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"
            }]
        }]
    }
    Fiddle
    https://fiddle.sencha.com/#view/editor&fiddle/2889

    Files:
    data2.json

    How i can get the list populate from this nested JSON.

    Thanks in Adcance.
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  2. #2
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    You will have to use treestore with a combobox,

    Sample result:
    Untitled.png

    Sample code:

    Code:
    Ext.application({
    	name : 'TreeCombo',
    	launch : function() {
    		Ext.create('Ext.form.Panel',{
    			width : 400,
    			title: 'Something',
    			renderTo: Ext.getBody(),
    			bodyPadding: '10',
    
    
    			items: [{
    				xtype: 'panel',
    				frame: true,
    				layout: {
    					type: 'vbox',
    					align: 'stretch'
    				},
    				items: [{
    					xtype: 'combobox',
    					fieldLabel: 'Countries',   
    					width : 50,
    
    
    					createPicker: function() {
    					var me = this;
    
    
    					var store = new Ext.data.TreeStore({
    						root: {
    							expanded: true,
    							children: [
    									{ text: "CN", expanded: true, children: [
    										{ text: 'AB', leaf: true },
    										{ text: 'BC', leaf: true },
    										{ text: 'MB', leaf: true }
    									] },
    									{ text: "MX", expanded: false, children: [
    										{ text: 'AG', leaf: true },
    										{ text: 'BJ', leaf: true },
    										{ text: 'BS', leaf: true }
    									] },
    									{ text: "US", expanded: false, children: [
    										{ text: 'AK', leaf: true },
    										{ text: 'AL', leaf: true },
    										{ text: 'AR', leaf: true }
    									] }
    							]
    						}
    					});
    
    
    					var picker = new Ext.tree.Panel({
    						store:  store,
    						pickerField: me,
    						rootVisible: false,
    						floating: true,
    						hidden: true
    					});
    
    
    					me.mon(picker, {
    						afteritemexpand: me.alignPicker,
    						afteritemcollapse: me.alignPicker,
    						scope:  me
    					});
    					return picker;
    					}
    				}]
    			}]
    		});
    	}
    });
    Since above is reconstructed code and not my original work, below are the references used:

    References:

    https://www.sencha.com/forum/showthread.php?182502-Tree-inside-a-ExtJS-4-combobox
    https://stackoverflow.com/questions/...o-in-extjs-4-1
    https://www.sencha.com/forum/showthr...-into-Combobox
    https://www.sencha.com/forum/showthr...-s-Picker-Menu
    https://www.sencha.com/forum/showthr...t-ux-TreeCombo
    https://www.sencha.com/forum/showthr...ree-in-a-Combo

Similar Threads

  1. Replies: 0
    Last Post: 12 Oct 2014, 10:11 PM
  2. Replies: 1
    Last Post: 22 Apr 2013, 5:19 AM
  3. Replies: 0
    Last Post: 15 Jun 2012, 10:24 AM
  4. Combobox on Grid with Nested Json Data
    By oguz. in forum Ext: Discussion
    Replies: 4
    Last Post: 24 Apr 2012, 10:21 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •