Wednesday, 29 March 2017

Extjs - Loading Json data in Combo

In this post i am going to explain about the loading of the Jsoin data in combo Box.


Ext.onReady(function () {

    var JsonData = {
        'items': [{
            'name': 'Lisa',
            "id": "111"
        }, {
            'name': 'Bart',
            "id": "222"
        }, {
            'name': 'Homer',
            "id": "555"
        }]
    };

    var colors = new Ext.data.JsonStore({
        root: 'items',
        id: "colors",
        fields: ['id', 'name']
    });
    colors.loadData(JsonData);

    var entitySearchForm = new Ext.form.FormPanel({
        title: "Form loading with Json data",
        width: 425,
        frame: true,
        items: [{
            xtype: 'combo',
            fieldLabel: 'Role Selection',
            id: 'role',
            hiddenName: 'role',
            hiddenValue: 1,
            editable: false,
            emptyText: 'Please select a role',
            typeAhead: true,
            triggerAction: 'all',
            lazyRender: true,
            mode: 'local',
            displayField: 'name',
            valueField: 'id',
            store: colors
        }]
    });
    var entitySearchWindow = new Ext.Window({
        layout: 'anchor',
        closable: true,
        resizable: false,
        draggable: false,
        modal: true,
        items: [entitySearchForm]
    });
    entitySearchWindow.show();
});


No comments:

Post a Comment