Extjsフォームロードイベントで4つのcombox値を設定しました

Question

2つのcomoboxフィールドを含むフォームがあり、これはcomboxフィールドにリンクされています。ユーザーがチャプターを選択すると

章と教訓

は、その章のレッスンの一覧が表示されます。

EXTjsのチャプターに基づいてレッスンのコンボをフィルターする方法4.チャプターのコンボが選択されている場合、レッスンのコンボのみがレッスンを表示する必要があります。

フォームデータがサーバーから読み込まれ、フォームフィールドに入力されたときに選択されたcmobo値を設定する方法。連結コンボサーバ

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

から

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' 
    }] 
}); 

読み込みフォームデータと

章ストア

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' 
}); 

レッスンストア

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' 
}); 

フォーム

Answer 1

私は、サーバーサイドの技術は、使用して、私はあなたがこれらの2つの偉大なリンクを以下のいくつかのインスピレーション/指針を得ることができると確信している知らん：

• Extjs Cascading (Dependent) Combo Boxes
• ExtJs 4 cascading ComboBox example using Java Servlet and MySQL

HTH！