首页 文章

在Ext-JS组合框上更改valueField配置？

提问于
浏览 次
0

我在表单上有一个组合框，我需要重置它的存储以及'displayField'和'valueField'配置 .

通过 cmb.bindStore(newStore) 重置商店效果很好 .

设置 cmb.displayField = 'newfieldname'; 也很有用 .

但是， cmb.valueField = 'newValField'; 不起作用 . 组合显示正确的东西，但是当我选择一个项目时，该值使用的是旧的valueField值，而不是新的值 .

我试过了：

  • 之后做 cmb.reset()

  • Ext.apply(...)

是因为 valueField 在某种程度上是特殊的，因为它是必需的字段？是否有一些特殊的方法在Ext-JS组件上设置配置值我不是't know about or is it just not possible to change the value of ' valueField'？

仅供参考 - 这是我的代码：

comp.bindStore(Ext.create('Ext.data.Store', {
        fields : [ {
            name : 'abbr',
            type : 'string'
        }, {
            name : 'name',
            type : 'string'
        }, {
            name : 'slogan',
            type : 'string'
        } ],
        data : [ {
            "abbr" : "AL",
            "name" : "Alabama",
            "slogan" : "The Heart of Dixie"
        }, {
            "abbr" : "AK",
            "name" : "Alaska",
            "slogan" : "The Land of the Midnight Sun"
        }, {
            "abbr" : "AZ",
            "name" : "Arizona",
            "slogan" : "The Grand Canyon State"
        }, {
            "abbr" : "AR",
            "name" : "Arkansas",
            "slogan" : "The Natural State"
        }, ]
    }));

    comp.displayField = 'abbr';    // THIS WORKS
    comp.valueField = 'abbr';      // THIS DOESNT WORK
javascript user-interface extjs combobox config

2 回答

  • 1

    你几乎就在那里，但你在哪里看错了 property 因为 valueField 不是你的问题，它是 displayField . 您确切的问题是预先配置和缓存的属性 . 第一个是显示模板，第二个是选择器实例 . 您需要覆盖模板并删除选择器实例 . 这是一个有效的剪辑（ JSFiddle ）

    在示例中，我添加了第二个带十字的触发器 . 点击它，ComboBox获得新值 . 我建议你为此创建自己的组件，方法是从ComboBox扩展并将all包装到一个期望树参数的重新配置方法中 .

    Ext.onReady(function() {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL1", "name":"Alabama1"},
            {"abbr":"AK1", "name":"Alaska1"},
            {"abbr":"AZ1", "name":"Arizona1"}
            //...
        ]
    });

    var comp = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Choose State',
        id: 'combo-ident',
        trigger2Cls: 'x-form-clear-trigger',
        onTrigger2Click: function (args) {
            var comp = Ext.getCmp('combo-ident');
            comp.clearValue();
            comp.bindStore(Ext.create('Ext.data.Store', {
                fields : [ {
                    name : 'abbr',
                    type : 'string'
                }, {
                    name : 'name',
                    type : 'string'
                }, {
                    name : 'slogan',
                    type : 'string'
                } ],
                data : [ {
                    "abbr" : "AL",
                    "name" : "Alabama",
                    "slogan" : "The Heart of Dixie"
                }, {
                    "abbr" : "AK",
                    "name" : "Alaska",
                    "slogan" : "The Land of the Midnight Sun"
                }, {
                    "abbr" : "AZ",
                    "name" : "Arizona",
                    "slogan" : "The Grand Canyon State"
                }, {
                    "abbr" : "AR",
                    "name" : "Arkansas",
                    "slogan" : "The Natural State"
                }, ]
            }));

            comp.displayField = 'abbr';
            comp.valueField = 'name';
            comp.displayTpl = new Ext.XTemplate(
                '<tpl for=".">' +
                    '{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
                    '<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
                '</tpl>'
            );
            comp.picker = null;
        },
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        renderTo: Ext.getBody()
    });
    comp.on('select', function(){ console.log(arguments); console.log(arguments[0].getSubmitValue()); })

});
    回复于
  • 1

    我不确定是否可以通过这种方式重新配置组合框，但也许您可以使用不同的store和valueField创建另一个组合框 . 根据您的逻辑隐藏/销毁其中一个 .

    回复于

相关问题