Ext JS第二次加载时为空ItemSelector

Posted 2023-02-26

【中文标题】Ext JS第二次加载时为空ItemSelector

【英文标题】：Ext JS empty ItemSelector when loaded for the second time

【发布时间】：2012-03-12 03:45:32

【问题描述】：

我是 ExtJS 的新手，我正在使用 ExtJS 4.0.7 和他们所谓的 MVC，只是习惯了代码，所以，我正在查看示例，其中有一个可以完美运行对于我正在尝试做的事情，“MultiSelect and ItemSelector”示例，更具体地说，ItemSelector，这是我正在使用的那个，它使用某种名为“ux”的库，例如我认为，但 ItemSelector 对我来说没问题，我不想更改或向组件添加任何内容，所以，我要做的是，创建一个包含 Form 的窗口，并在表单中使用 ItemSelector，ItemSelector 使用远程存储因为我从数据库加载数据，一切正常，我可以在 ItemSelector 中看到数据并使用该组件，问题是当我关闭窗口并再次打开它时，ItemSelector 只是空的，没有错误，没有警告，没有任何问题，只是一个空的 ItemSelector，这是我的代码：

//My window definition
Ext.define('Sigep.view.ProjectForm', 
    extend: 'Ext.Window',
    uses: ['Ext.ux.form.ItemSelector'],
    id:"projectFormWindow",
    title: 'New Project',
    autoHeight:true,
    width: 700,
    modal:true,
    layout: 'fit',
    initComponent: function() 
        var win = this;
        var studentStore = Ext.create('Sigep.store.StudentsStore');
        this.items = [
        
            xtype:"form",
            id: 'projectForm',
            bodyPadding: 10,
            border:false,
            autoHeight:true,
            postUrl:baseURL+'projects/save',
            defaults: 
                border:false
            ,
            fieldDefaults: 
                labelAlign: 'left',
                labelWidth: 110,
                msgTarget: 'side'
            ,
            items:[
            
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:260,
                margin: '10 0 0 0',
                defaults:
                    bodyStyle:'padding:10px'
                ,
                items:[
                    title:'Autor(es)',
                    defaults: 
                        allowBlank:false
                    ,
                    defaultType: 'textfield',
                    items:[
                    
                        xtype: 'itemselector',
                        name: 'project[authors][]',
                        id: 'itemselector-field',
                        anchor: '100%',
                        labelWidth: 90,
                        width:600,
                        height:210,
                        fieldLabel: 'ItemSelector',
                        imagePath: baseURL+'extjs/ux/images/',
                        store: studentStore,
                        displayField: 'fullName',
                        valueField: 'userId',
                        maxSelections:2,
                        buttons: ['add', 'remove'],
                        delimiter:null
                    
                    ]
                ]
            
            ]
        
        ];
        this.buttons= [
            text: 'Save',
            handler:function()
                win.close();
            
        ,
            text: 'Cancel',
            handler:function()
                win.close();
            
        ];
        studentStore.load();
        this.callParent();
    
);  
///////////////////////////////////////////////
//In a click event of a button
var win = Ext.create('Sigep.view.ProjectForm');
win.show();  

//////////////////////////////////////////////
//The Store definition
Ext.define('Sigep.store.StudentsStore', 
    extend: 'Ext.data.Store',
    fields: ['userId', 'fullName'],
    proxy: 
        type: 'ajax',                
        url:baseURL+'accounts/students',
        reader: 
            type: 'json',
            root: 'results'
        
    
);  

我也尝试将autoLoad:true设置为商店，但它也不起作用，所以，如您所见，一切都很简单，我第一次打开窗口，一切正常，但是当我关闭时然后再次打开，ItemSelector 是空的，我已经尝试了每个我可以尝试的事件，但没有任何工作，使用 FireBug，在显示窗口后，我执行类似这样的操作

//if i execute this code after the window is show, the item selector is filled with the data
var item = Ext.getCmp("projectFormWindow").down('#itemselector-field');
var store = item.store;
item.bindStore(store);  

此代码在窗口显示后重新加载 itemselector，所以我尝试在 show 事件中，但它不起作用，如果我在窗口和处理程序中放置这 3 行按钮，则 ItemSelector 加载正常.有趣的是 ItemSelector 扩展了 MultiSelect，如果我将 xtype 更改为 multiselect，它工作得很好，非常完美，但是 ItemSelector 呢，我正在查看定义代码，我认为类似于第二次加载 @987654324 @ 没有被创建，但我不知道如何处理这个，

那么，是否存在一个解决方法？让它工作的方法？希望你们能帮帮我

谢谢

【参考方案1】：

我正在查看 Ext js 论坛，有人给出了解决方案，我不知道它是否是最好的，但它对我有用，

studentStore.load(function()
            win.down('#itemselector-field').bindStore(studentStore);
        );  

现在，它正在按我的意愿工作

希望能帮到别人

【参考方案2】：

在我的 Forms initComponent 方法中，我为 beforerender 添加了一个监听器

initComponent: function () 
    var me = this;
    Ext.applyIf(me, 
        listeners: 
        beforerender: 
                fn: me.onFormBeforeRender,
                scope: me
            
       
    );

    me.callParent(arguments);

,

onFormBeforeRender: function(abstractcomponent, options) 
            // where store is created globally like this var store = Ext.create('TIP.store.CommodityStore');

    store.load(function()
        Ext.getCmp("commoselector").bindStore(store);
    );