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次，那么在下一个节目中它会显示值但是它不允许我选择最后两个值。我只能选择第一个值。

enter image description here

请建议。

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

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

{＆＃34;属性＆＃34;：空，＆＃34;完整＆＃34;：真，＆＃34;计数＆＃34;：3，＆＃34;错误＆＃34;：空，＆＃ 34;失效＆＃34;：假，＆＃34;元数据＆＃34;：空，＆＃34;对象＆＃34;：[{＆＃34;名称＆＃34;：＆＃34;应用供应政策表＆＃34;，＆＃34;价值＆＃34;：＆＃34;申请＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;角色供应政策表格＆＃34;，＆＃34;价值＆＃34;：＆＃34;角色＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;工作流程形式＆＃34;＆＃34;值＆＃34;：＆＃34;工作流＆＃34;}]，＆＃34;的requestId＆＃34;：空，＆＃34;重试＆＃34;：假，＆＃34 ; retryWait＆＃34;：0，＆＃34;状态＆＃34;：＆＃34;成功＆＃34;＆＃34;成功＆＃34;：真，＆＃34;警告＆＃34;：空}

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

中的/ forking来使用此代码

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

我希望能帮助

Answer 3

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

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

3 个答案: