CODEWITHSUNDEEP
comboboxextjs4store
nani1216
nani1216

Reputation: 324

Extjs 4 set combox values in form load event

I have a form containing 2 comobox fields, which are linked combox fields.

Chapters and lessons

When a user selects a chapter, list of lessons in that chapter will be shown.

How to filter the lessons combo based on chapters combo in EXTjs 4. If chapters combo is selected then only lessons combo should show lessons, otherwise it should be empty.

And how to set the cmobo values selected when form data is loaded from server and populated in form fields.

Chapters store

var chapter_store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['chapter_id', 'chapter_name'],
    proxy: {
        type: 'ajax',
        url: BASE_URL + 'courses/chapters/getChaptersCombo/' + course_id,
        actionMethods: {
            read: 'POST'
        },
        noCache: false,
        reader: {
            type: 'json',
            root: 'results',
            totalProperty: 'total'
        }
    },
    storeId: 'chapter_id'
});

Lessons store

var lesson_store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['lesson_id',
             //'chapter_name',
             'lesson_name', 'lc_relation_id'
             ],
    proxy: {
        type: 'ajax',
        url: BASE_URL + 'courses/lessons/getLessonsCombo/' + course_id,
        actionMethods: {
            read: 'POST'
        },
        noCache: false,
        reader: {
            type: 'json',
            root: 'results',
            totalProperty: 'total'
        }
    },
    storeId: 'lesson_id'
});

Form with linked combos

 var quiz_form = Ext.create('Ext.form.Panel', {
    items: [{
        xtype: 'combobox',
        //readOnly:true,
        id: 'test_chapter_combo',
        name: 'test_chapter_combo',
        //hiddenName: 'test_linkchapter_val',
        displayField: 'chapter_name',
        valueField: 'chapter_id',
        fieldLabel: 'Select Chapter',
        allowBlank: false,
        blankText: 'Chapter is required',
        triggerAction: 'all',
        queryMode: 'remote',
        store: chapter_store,
        selectOnFocus: true,
        listeners: {
            select: {
                fn: function (combo, value) {
                    var comboLesson = Ext.getCmp('test_lesson_combo');
                    comboLesson.clearValue();
                    lesson_store.load({
                        params: {
                            chapters_id: combo.getValue()
                        }
                    });
                }
            }
        }
    }, {
        xtype: 'combobox',
        //readOnly:true,
        id: 'test_lesson_combo',
        name: 'test_lesson_combo',
        //hiddenName: 'test_linklesson_val',
        displayField: 'lesson_name',
        valueField: 'lc_relation_id',
        mode: 'local',
        fieldLabel: 'Link To Lesson',
        allowBlank: false,
        blankText: 'Lesson is required',
        triggerAction: 'all',
        store: edu_lesson_store,
        queryMode: 'remote'
    }]
});

Loading form data from server

quiz_form.getForm().load({
    url: BASE_URL + 'courses/getCourseTest/' + quiz_id,
    method: 'POST'
});

Upvotes: 0

Views: 6176

Answers (1)

byte_slave
byte_slave

Reputation: 1378

I dunno which server side technology are you using, but i'm sure you can get some inspiration/guidance following these 2 great links:

HTH!

Upvotes: 1

Related Questions