Question

希望你们都好。我有下一个问题，使用两个组合（事实上，这是我试图做的一个例子，但我无法得到所需的结果）与ExtJS 4。

我的目标是，使用一个组合并选择其中一个项目，第二个组合显示不同的数据（我需要完成此练习以实现Country-State-City组合集）。由于所有都是一个例子，它根本没有意义，但功能性是我需要的。

我的代码是下一个：

<script type="text/javascript">
    Ext.require([
        'Ext.form.field.ComboBox',
        'Ext.form.FieldSet',
        'Ext.tip.QuickTipManager',
        'Ext.data.*'
    ]);

    Ext.define('State', { //Define state model
        extend: 'Ext.data.Model',
        fields: [
            { type: 'integer', name: 'conse' },
            { type: 'string', name: 'abbr' },
            { type: 'string', name: 'name' },
            { type: 'string', name: 'slogan' }
        ]
    });

    Ext.define('User', { //Define user model
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Id', type: 'string' },
            { name: 'Name', type: 'string' },
        ]
    });

    Ext.onReady(function () {

        var states = [
        { "conse": 1, "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
        { "conse": 2, "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
        { "conse": 3, "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
        { "conse": 4, "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
        { "conse": 5, "abbr": "CA", "name": "California", "slogan": "The Golden State" },
        { "conse": 6, "abbr": "CO", "name": "Colorado", "slogan": "The Mountain State" },
        { "conse": 7, "abbr": "CT", "name": "Connecticut", "slogan": "The Constitution State" },
        { "conse": 8, "abbr": "DE", "name": "Delaware", "slogan": "The First State" },
        { "conse": 9, "abbr": "DC", "name": "District of Columbia", "slogan": "The Nation's Capital" },
        { "conse": 10, "abbr": "FL", "name": "Florida", "slogan": "The Sunshine State" },
        { "conse": 11, "abbr": "GA", "name": "Georgia", "slogan": "The Peach State" },
        { "conse": 12, "abbr": "HI", "name": "Hawaii", "slogan": "The Aloha State" },
        { "conse": 13, "abbr": "ID", "name": "Idaho", "slogan": "Famous Potatoes" },
        { "conse": 14, "abbr": "IL", "name": "Illinois", "slogan": "The Prairie State" },
        { "conse": 15, "abbr": "IN", "name": "Indiana", "slogan": "The Hospitality State" },
        { "conse": 16, "abbr": "IA", "name": "Iowa", "slogan": "The Corn State" },
        { "conse": 17, "abbr": "KS", "name": "Kansas", "slogan": "The Sunflower State" },
        { "conse": 18, "abbr": "KY", "name": "Kentucky", "slogan": "The Bluegrass State" },
        { "conse": 19, "abbr": "LA", "name": "Louisiana", "slogan": "The Bayou State" },
        { "conse": 20, "abbr": "ME", "name": "Maine", "slogan": "The Pine Tree State" },
        { "conse": 21, "abbr": "MD", "name": "Maryland", "slogan": "Chesapeake State" },
        { "conse": 22, "abbr": "MA", "name": "Massachusetts", "slogan": "The Spirit of America" },
        { "conse": 23, "abbr": "MI", "name": "Michigan", "slogan": "Great Lakes State" },
        { "conse": 24, "abbr": "MN", "name": "Minnesota", "slogan": "North Star State" },
        { "conse": 25, "abbr": "MS", "name": "Mississippi", "slogan": "Magnolia State" },
        { "conse": 26, "abbr": "MO", "name": "Missouri", "slogan": "Show Me State" },
        { "conse": 27, "abbr": "MT", "name": "Montana", "slogan": "Big Sky Country" },
        { "conse": 28, "abbr": "NE", "name": "Nebraska", "slogan": "Beef State" },
        { "conse": 29, "abbr": "NV", "name": "Nevada", "slogan": "Silver State" },
        { "conse": 30, "abbr": "NH", "name": "New Hampshire", "slogan": "Granite State" },
        { "conse": 31, "abbr": "NJ", "name": "New Jersey", "slogan": "Garden State" },
        { "conse": 32, "abbr": "NM", "name": "New Mexico", "slogan": "Land of Enchantment" },
        { "conse": 33, "abbr": "NY", "name": "New York", "slogan": "Empire State" },
        { "conse": 34, "abbr": "NC", "name": "North Carolina", "slogan": "First in Freedom" },
        { "conse": 35, "abbr": "ND", "name": "North Dakota", "slogan": "Peace Garden State" },
        { "conse": 36, "abbr": "OH", "name": "Ohio", "slogan": "The Heart of it All" },
        { "conse": 37, "abbr": "OK", "name": "Oklahoma", "slogan": "Oklahoma is OK" },
        { "conse": 38, "abbr": "OR", "name": "Oregon", "slogan": "Pacific Wonderland" },
        { "conse": 49, "abbr": "PA", "name": "Pennsylvania", "slogan": "Keystone State" },
        { "conse": 40, "abbr": "RI", "name": "Rhode Island", "slogan": "Ocean State" },
        { "conse": 41, "abbr": "SC", "name": "South Carolina", "slogan": "Nothing Could be Finer" },
        { "conse": 42, "abbr": "SD", "name": "South Dakota", "slogan": "Great Faces, Great Places" },
        { "conse": 43, "abbr": "TN", "name": "Tennessee", "slogan": "Volunteer State" },
        { "conse": 44, "abbr": "TX", "name": "Texas", "slogan": "Lone Star State" },
        { "conse": 45, "abbr": "UT", "name": "Utah", "slogan": "Salt Lake State" },
        { "conse": 46, "abbr": "VT", "name": "Vermont", "slogan": "Green Mountain State" },
        { "conse": 47, "abbr": "VA", "name": "Virginia", "slogan": "Mother of States" },
        { "conse": 48, "abbr": "WA", "name": "Washington", "slogan": "Green Tree State" },
        { "conse": 49, "abbr": "WV", "name": "West Virginia", "slogan": "Mountain State" },
        { "conse": 50, "abbr": "WI", "name": "Wisconsin", "slogan": "America's Dairyland" },
        { "conse": 51, "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
    ];


    var store = Ext.create('Ext.data.Store', { //Store for the STATES
        model: 'State',
        data: states
    });

    //In this otherStore, i'll save the Categories data 
    var otherStore = Ext.create('Ext.data.Store', {
        model: 'User',
        proxy: {
            type: 'ajax',
            url: '/Categories',
            reader: {
                type: 'json',
                root: 'Categories'
            }
        }
    });

    var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        id: 'simpleCombo',
        store: otherStore,                        
        displayField: 'Name',
        valueField: 'Id',
        queryMode: 'local',
        triggerAction: 'all',
        emptyText: 'Select a category...',
        renderTo: 'simpleCombo',
        listeners: {
            select: function (combo, record, index) {
                alert(combo.getValue());
            }
        }
    });

    var anotherCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        store: store,
        displayField: 'name',
        valueField: 'conse',
        queryMode: 'local',                       
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'State',
        selectOnFocus: true,
        renderTo: 'anotherCombo'
    });

    anotherCombo.on('select',function(cmb,record,index){
        simpleCombo.enable();
        simpleCombo.clearValue();
        otherStore.load({
            params:{  
                id:cmb.getValue()
            }  
        });  
    },this); 
});
</script>

好的，让我解释一下我正在尝试做什么，什么工作，什么不工作。状态被加载到其他Combo中。在那里，当我选择其中一个项目时，我将conse值发送到服务器（.NET中的MVC，这是为了这个目的正常工作，所以我不会把它的代码）。 conse值表示将在simpleCombo中加载多少项。第一次，一切似乎都很好。这是图片： First time selecting otherCombo
我选择了Arizona（项目编号3），因此加载了3个项目。好的，那个工作正常，但是，我第二次从otherCombo选择其他项目：

enter image description here

选择阿拉斯加（物品编号2），装载了2件物品，好吗？但是，出现了一些错误，因为它看起来仍在加载某些内容，但您可以看到数据已被正确更改。

这是我的问题。我已经看过不同的例子了，这就是为了工作。

希望你能帮助我！：d

非常感谢你。

Answer 1

我遇到了同样的问题，我已经使用了解决方法。
在第一个组合框的更改事件中，您需要将第二个组合框存储设置为null，然后再次绑定它。这是代码：

var anotherCombo = Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Select a single state',
    store: store,
    displayField: 'name',
    valueField: 'conse',
    queryMode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    emptyText: 'State',
    selectOnFocus: true,
    renderTo: 'anotherCombo',
    listeners:[{
        'change': function(cbo, newValue, oldValue){
            var simpleCombo = Ext.getCmp("simpleCombo");
            simpleCombo.bindStore(null);
            otherStore.load({callback: function(){
                simpleCombo.bindStore(otherStore);
            }});
        }
    }]
});

如何使用Ajax在ExtJS中创建Dependent ComboBox？我的第二个ComboBox继续加载

1 个答案: