Question

我是ExtJS的新手，我使用的是ExtJS 4.0.7以及他们所谓的MVC，只是习惯了代码，所以，我正在看看这些例子，还有一个这非常适合我想要做的事情，＆＃34; MultiSelect和ItemSelector＆＃34;例如，更具体的，ItemSelector，即我使用的那个，它使用某种名为＆＃34; ux＆＃34;的库，例如我认为，但是ItemSelector对我来说是好的，我不想改变或添加任何东西到组件，所以，我做的是，创建一个窗口，其中包含一个窗体，并在形式的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，我正在查看定义代码，我认为就像在第二次加载{{ 1}}没有被创建，但我不知道如何处理这个，

所以，为此存在一个工作场所？一种让它发挥作用的方法？希望你能帮助我们

感谢

Answer 1

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

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

现在，它正如我想要的那样工作

希望它可以帮助别人

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

第二次加载时，Ext JS为空ItemSelector

2 个答案: