extjs中的级联组合框答案

【问题标题】：Cascading Combobox in extjsextjs中的级联组合框
【发布时间】：2012-10-23 00:02:29
【问题描述】：

我想在 extjs 中做级联组合框。我必须组合框

课程组合框

{ 
    xtype : 'combobox',  
    emptyText : 'Course',  
    id:'combo-course',  
    displayField : 'name',  
    valueField : 'id',  
    store:coursestore,  
    forceSelection: true,  
    triggerAction:'all',  
    queryMode: 'remote',  
    listeners: {  
        'select': {  
            fn:function(combo, value) {  
                var comboModule = Ext.getCmp('combo-module');  
                comboModule .setDisabled(true);
        comboModule .clearValue('');
        comboModule .getStore().removeAll();
        comboModule .getStore().load({
        params: {courseId: combo.getValue()}
         });
                comboModule .setDisabled(false);  
            }  
        }  
    }  
}

课程模块：

{
    xtype : 'combobox',  
    emptyText : 'Module',  
    id:'combo-module',  
    displayField : 'name',  
    valueField : 'id',  
    disabled:true,  
    remoteFilter:true,  
    store:coursemodulestore,  
    forceSelection: true,  
    queryMode: 'remote',  
    triggerAction:'all'
}

休息服务

    @Path("/coursemodule/{courseId}")
    public List<CourseModule> getAllCourseModules(@PathParam("courseId")String courseId ) {
        try {           
            return courseObj.getModulesForCourse(courseId);
                } catch (HibernateException e) {
            logger.debug(e.getMessage());
        }
        return null;
    }

当我运行应用程序并选择第一个组合框时，它只会在第一次在第二个组合框中显示正确的值；
但是当我第二次选择组合框时，它不会在第二个组合框中显示值。

【问题讨论】：

omg.. 高度不可读.. 请给我们fiddle
编辑时尽量保持格式。

标签： javascript spring hibernate extjs

【解决方案1】：

您似乎想清除已应用的过滤器。要删除已应用的过滤器，商店中有一个 clearFilter() 方法。您可以将其混入您的代码中，类似于：

comboModule.clearValue();  
// new line to clear any filter applied to the store
comboModule.getStore().clearFilter(true);  
comboModule.getStore().filter('courseId',combo.getValue());

【讨论】：

【解决方案2】：

您的问题很可能是 store.load() 是异步的。尝试在 load 回调中传入其余的逻辑（过滤等）。

【讨论】：

【解决方案3】：

第二次加载时是否显示 LoadMask？

使用它来覆盖该行为：

Ext.override(Ext.LoadMask, {
    onHide: function() {
    this.callParent();
  }
});

【讨论】：