组合框无法从下拉列表中选择值。

Question

我正在使用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上。

编辑： Rest的JSON响应：

{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application Provisioning Policy Form","value":"Application"},{"name":"Role Provisioning Policy Form","value":"Role"},{"name":"Workflow Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}

- code_fish

---

你需要提供更多的信息。你使用的是哪个版本的ExtJS，存储配置看起来如何等等。最好提供一个可以重现错误的fiddle.sencha.com。 - sra

为了能够提供帮助，我们需要关于这个问题的额外信息。我已经使用您提供的代码创建了一个fiddle，但添加了自己的数据，无法复制该问题。Sencha Fiddle请告诉我们您正在使用哪个版本的ExtJS，以及是否在出现此问题时看到任何控制台错误。 - Scriptable

@AswinRamakrishnan 我这里没有做任何奇怪的事情。我只是在同一个类中定义了一个构造函数，里面有下一个和关闭按钮。但我也尝试将它们放在initcomponents()中，但结果相同。 - code_fish

@Scriptable 我已经用JSON响应编辑了我的答案。我在控制台上没有得到任何错误信息。如果你看到图片，下拉框和第一项之间有一些间隔。我不知道这是为什么。 - code_fish

是的，我之前也是这样做的。我今天刚更新了代码。按照您指定的方式创建窗口并删除静态后仍然出现同样的问题。 - code_fish

Answer 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 分支并尝试修改这段代码。

- Scriptable

---

这更像是一条评论，而不是答案。请将其添加为评论并删除此帖。 - sra

我已经尝试过这个了。基本上，你正在使用Ext.create来创建组件。我可能还需要从其他方面进行考虑。对我来说，这似乎是一些不同的问题。 - code_fish

我不确定在这种情况下静态方法是否被正确使用，正如您在此处的文档中所看到的Ext.base.Statics。当您使用Ext.create时，它是否正常工作？ - Scriptable

即使我移除了静态，问题仍然存在。感谢您迄今为止的协助。 - code_fish

我已经在代码中添加了一个按钮，它将加载窗口。 - Scriptable

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

我希望能够帮助

- tarasnn

Answer 3

尝试以下可能的解决方案： 1. 将存储的AutoLoad属性设置为true。 2. 添加一些毫秒的延迟。

- VSharma

---

延迟将等待您的Ajax调用所需的毫秒数。这在存储正在获取时间以填充时使用。 - VSharma