ext Stor 的this.proxy is undefined 错误

最新推荐文章于 2023-11-26 16:08:13 发布

gwh_08

最新推荐文章于 2023-11-26 16:08:13 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext 文章标签： EXT Firebug 工作

本文链接：https://blog.youkuaiyun.com/gwh_08/article/details/83709682

Ext 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用ExtJS框架实现ComboBox的动态加载功能。通过设置store的参数和加载方法，可以实现在选择不同选项时，从服务器获取相应数据并更新显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了实现Stor的动态加载，

var orgId = "";
var fStore =new Ext.data.Store({
	        autoLoad : false,
	        url: 'findFromOMRole.action?orgId='+'orgId',
	        reader : new Ext.data.JsonReader({
	            totalProperty: 'totalCount',
            	root: 'list'
	        }, [{name : 'menuName'}, { name : 'id'}]),
	        sortInfo: {field: 'menuName', direction: 'ASC'}
	    });

在Ext.form.ComboBox({})中引如了事件listeners

 var orgIdStore = new Ext.data.JsonStore({
            url: 'findComOrgRole.action',
            autoLoad: false,
            sortInfo: {field: 'orgName', direction: 'ASC'},
            fields: [{
                name: 'role.org.id',
                mapping: 'id'
            }, {
                name: 'orgName',
                mapping: 'orgName'
            }]
        });
        orgIdStore.load();
        
        var orgIdComboBox = new Ext.form.ComboBox({
            listClass: 'x-combo-list-small',
            enableKeyEvents: true,
            selectOnFocus: true,
            hiddenName: 'role.org.id',
            name: 'role.org.id',
            id:"orgIds",
            valueField: 'role.org.id',
            displayField: 'orgName',
            blankText : '请选择',
	    emptyText : '选择机构名称',
            selectOnFocus: true,
            mode: 'local',
            triggerAction: 'all',
            store: orgIdStore,
            fieldLabel: "所在组织",
            allowBlank : false,
            editable: false,
            listeners: {'select': function(){
				Ext.getCmp('roleSele').setValue('');
				var t_orgId = Ext.getCmp('orgIds').getValue();
				fStore.load();
				}
        	}
        });

即，当所选择项改变时，fStor的url所接受的参数的值，改变，从而实现动态加载数据的目的。

但是这样做有通过fireBug可以看到，url所接受的参数的值，没有改变，即还是原来的值，没有实现动态加载数据，

若将URL放在listeners中

listeners: {'select': function(){
				Ext.getCmp('roleSele').setValue('');
				var t_orgId = Ext.getCmp('orgIds').getValue();

url: 'findFromOMRole.action?orgId='+'orgId'
 fStore.load();
				}
        	}

firebug会报："this.proxy is undefined "的错误。

这其实是对ext的stor的工作原理不清楚造成的。

首先，ext的stor是通过代理模式实现的，它首先通过一个代理向后台发送请求（根据url），而后再通过代理将数据返回，并对数据进行封装，才是我们最后得到的数据。

标准的Stor形式是：

var d_stor = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: 'queryMessages.action'
                }),
                reader: _jsonReader,
                remoteSort: true//True表示在proxy配合下，要求服务器提供一个更
                                         //  新版本的数据对象以便排序，反之就是在Record缓
                                         //存中排序（默认是false）。
            });

stor在load之前，必须要为其指定代理，若我们不指定proxy代理属性，而直接指定url，那么url如果有值传入，会为该URL创建一个HttpProxy对象，否则就没有代理模式。会报"this.proxy is undefined "的错误。

这就是为什么上面会出现这样的错误，那么如何实现数据的动态加载呢？

我们可以通过以下两种方式解决:

fStore.baseParams.orgId = orgId;
fStore.load();

等号左边的orgId为所传参数变量，右边的orgId为所传的值，当然此处的load()方法是放在Ext.form.ComboBox({})的listeners中的。此方案的传参与加载是分开来进行的。

第二种解决方案是：

tStore.load({
	                    params: {
							orgId: t_orgId
						}
					});

传参与加载一体化处理。