组合框不要从下拉列表中选择值答案

【问题标题】：Combo box do not select Value from drop down组合框不要从下拉列表中选择值
【发布时间】：2014-12-17 12:37:39
【问题描述】：

我正在使用 ExtJs 创建一个组合框。这是我的代码：

Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',

id: 'formTypeDialog',

formId: null,

callbackFunction : null,

modal: true,

statics : {
    show : function(formId, callback) {
        Ext.create(Form.FormTypeDialog", {
            formId : formId,
            callbackFunction : callback
        }).show();
    }
},

constructor : function(config) {
    var me = this;

    Ext.apply(this, {
        buttons : [
            {
                text:"#{msgs.form_create_dialog_button_cancel}",
                cls : 'secondaryBtn',
                handler: function() {
                    me.close();
                }
            },
            {
                text:"#{msgs.form_create_dialog_button_next}",
                handler: function() {
                    // Get selected form type

                }
            }
        ]
    });
    this.callParent(arguments);
},

initComponent:function() {
    this.setTitle("#{msgs.form_create_dialog_title}");
    this.setHeight(175);
    this.setWidth(327);

    var formTypeStore = Mystore.Store.createRestStore({
        url : getRelativeUrl('/rest/form/formTypes'),
        root: 'objects',
        fields: ['name','value']
    });

    this.form = new Ext.form.Panel({
        style:'padding:15px;background-color:#fff' ,
        border:false,
        bodyBorder:false,
        items:[
            new Ext.form.Label({
                text: "#{msgs.form_create_dialog_select_type_label}",
                margin: "25 10 25 5"
            }),
            new Ext.form.ComboBox({
                id: 'createformTypeCombo',
                margin: "8 10 25 5",
                allowBlank: false,
                forceSelection: true,
                editable:false,
                store: formTypeStore,
                valueField: 'value',
                displayField: 'name',
                width: 260,
                emptyText: '#{msgs.form_create_dialog_select_type}'
            })
        ]
    });

    this.items = [
        this.form
    ];

    this.callParent(arguments);
}
});

我在 xhtml 页面上通过单击按钮创建此窗口：

Form.FormTypeDialog.show(null, showFormWindowCallBack);

它工作正常，显示组合框，我可以选择值。

但是如果我打开和关闭它 4 次，那么在下一个节目中它会显示值，但它不允许我选择最后两个值。我只能选择第一个值。

请提出建议。

注意：我曾尝试以我的应用程序其他页面的形式复制和执行此代码。但是在所有情况下行为都是相同的。此组合框位于 Ext.Window 上。

编辑：来自休息的 JSON 响应：

{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name": “应用配置策略表单","value":"Application"},{"name":"Role 供应策略表单","value":"Role"},{"name":"Workflow 表单","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null }

【问题讨论】：

在失败的情况下，您是否验证了服务器端的实际响应？如果您关闭和打开 2 o3 次效果很好？
您必须提供更多信息。你用的是什么版本的 ExtJS，store cfg 看起来怎么样等等。最好是重现错误的 fiddle.sencha.com。
我们可以使用有关此问题的其他信息来提供帮助，我使用您提供的代码创建了一个小提琴，但添加了我自己的数据并且无法复制问题Sencha Fiddle 可以您让我们知道您使用的是哪个版本的 ExtJS，以及当这种情况发生时您是否在控制台中看到任何错误。
只是为了临床，您是否尝试过以下 - - 您是否尝试过不同的浏览器？ - 如果是这样，您在从组合框中选择一个值时是否在做任何时髦的事情？即在此 initComponent 函数之外 - 您是否尝试在此 initComponent 函数之外使用存储并将其设置为 autoLoad？（不确定 createRestStore 中有什么。尽管它看起来不像是加载问题，但我不知道 Ext JS 是否正在使用 Window / Combo Boxes 进行任何奇怪的缓存，这会阻止您选择值。真的远射）- 您是否尝试在样式中添加分号？
@AswinRamakrishnan 不，我在这里没有做任何时髦的事情。我在同一个类中定义的构造函数中只有下一步和关闭按钮。但是我也尝试过将它们放入 initcomponents() 中，但结果相同。

标签： javascript extjs

【解决方案1】：

我重新创建了这段代码，直接使用你的代码在 Firefox 中显示了一些错误，所以我改变了一些东西。

运行下面的代码并在控制台窗口中调用Ext.create("Form.FormTypeDialog", {}).show();，然后关闭窗口并重复不会复制此问题。你可以试试我的代码，看看你是否还有同样的问题。

Ext.application({
    name: 'HelloExt',
    launch: function () {
        Ext.define('Form.FormTypeDialog', {
            extend: 'Ext.Window',
            id: 'formTypeDialog',
            formId: null,
            callbackFunction: null,
            modal: true,

            constructor: function (config) {
                var me = this;

                Ext.apply(this, {
                    buttons: [
                        {
                            text: "#{msgs.form_create_dialog_button_cancel}",
                            cls: 'secondaryBtn',
                            handler: function () {
                                me.close();
                            }
                        },
                        {
                            text: "#{msgs.form_create_dialog_button_next}",
                            handler: function () {
                                // Get selected form type

                            }
                        }
                    ]
                });
                this.callParent(arguments);
            },

            initComponent: function () {
                this.setTitle("#{msgs.form_create_dialog_title}");
                this.setHeight(175);
                this.setWidth(327);

                var myData = [
                    ["Application Provisioning Policy Form", "Application"],
                    ["Role Provisioning Policy Form", "Role"],
                    ["Workflow Form", "Workflow"],
                ];

                var formTypeStore = Ext.create("Ext.data.ArrayStore", {
                    fields: [
                        'name',
                        'value'
                    ],
                    data: myData,
                    storeId: "myStore"
                });

                this.form = Ext.create("Ext.form.Panel", {
                    style: 'padding:15px;background-color:#fff',
                    border: false,
                    bodyBorder: false,
                    items: [
                        Ext.create("Ext.form.Label", {
                            text: "#{msgs.form_create_dialog_select_type_label}",
                            margin: "25 10 25 5"
                        }),
                        Ext.create("Ext.form.ComboBox", {
                            id: 'createformTypeCombo',
                            margin: "8 10 25 5",
                            allowBlank: false,
                            forceSelection: true,
                            editable: false,
                            store: formTypeStore,
                            valueField: 'value',
                            displayField: 'name',
                            width: 260,
                            emptyText: '#{msgs.form_create_dialog_select_type}'
                        })
                    ]
                });

                this.items = [
                    this.form
                ];

                this.callParent(arguments);
            }
        });

        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                Ext.create("Form.FormTypeDialog", {}).show();
            }
        });
    }
});

您还可以使用/从这个Fiddle 分叉来玩这个代码

【讨论】：

这更多的是评论，而不是答案。请将其添加为评论并删除此帖子
我试过这个。基本上你正在使用这个 Ext.create 来创建组件。我可能还得看看其他方面。对我来说，这似乎是一些不同的问题。
我不确定静力学在这种情况下是否被正确使用，正如您在此处的文档中看到的那样。 Ext.base.Statics。使用 Ext.create 时它是否适合您？
即使我删除了静态，问题仍然存在。感谢您到目前为止为我提供的帮助。
我对您上面的代码所做的唯一更改是商店的数据源和静态数据的删除。并且问题本身并不存在。您在什么浏览器中测试它？，您使用什么尺寸的屏幕？是否有任何其他代码影响窗口，定位？ z 索引？

【解决方案2】：

不清楚您的问题是什么。我使用远程组合如下：

Ext.define('ComboRemote', {
extend: 'Ext.form.ComboBox',
xtype: 'ComboRemote',
emptyText: 'empty',
width: 75,
displayField: 'name',
valueField: 'id',
store: {
    model: 'ComboModel',
    proxy: {
        type: 'rest',
        url: '/serv/Res',
        extraParams: {
            query: ''
        },
        reader: {
            root: "result", type: 'json'
        }
    },
    autoLoad: true,
},
queryMode: 'remote',
pageSize: false,
lastQuery: '',
minChars: 0});

Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [
    'id',
    'name'
]});

希望能帮到你

【讨论】：

【解决方案3】：

尝试这些可能的解决方案 1. 将 store 的 AutoLoad 属性设为 true。 2.增加一些毫秒的延迟

【讨论】：

Delay 将等待您的 ajax 调用所需的毫秒数。这用于商店有时间填充的地方。