javascript - ExtJs：如何将记录传递给创建的元素？

Question

也许任何人都可以帮助我解决我的简单问题：使用 itemtap 我创建了一个模式面板。此模式面板有一个文本字段。我想将点击的项目绑定到新面板的那个文本字段。我在侦听器函数中使用“Ext.create ...”来创建面板。我现在如何将记录传递到我想在我的 viewModel 中使用它的那个面板？

注意评论！:-)

这是我的带有网格和 itemtap 侦听器的 Main.js。这里的记录来自：

Ext.define('QuickApp.view.main.Main', {
    extend: 'Ext.tab.Panel',

    xtype: 'tabpanel',
    items: [{
        title: 'Employee Directory',
        xtype: 'grid',
        iconCls: 'x-fa fa-users',
        listeners: {
            itemtap: function(view, index, item, record) { //record is coming from here
                Ext.create('QuickApp.view.main.Formdialog'); //I want to create the dialog here WITH the record
            }
        },
        store: Ext.create('QuickApp.store.Employee'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstName',
            flex: 1
        }, {
            text: 'Last Name',
            dataIndex: 'lastName',
            flex: 1
        }, {
            text: 'Phone Number',
            dataIndex: 'phoneNumber',
            flex: 1
        }],
    },{
        title: 'About Sencha',
        iconCls: 'x-fa fa-info-circle'
    }]
});

在我的 FormDialog.js 中，我想接收和使用记录：

Ext.define('QuickApp.view.main.Formdialog', {
    extend: 'Ext.form.Panel',

    renderTo: Ext.getBody(),

    xtype: 'formpanel',
    title: 'Update Record',
    floating: true,
    centered: true,
    width:300,
    modal: true,
    draggable: true,

    record: record, //At least here I need the record from before
    viewModel : {
        data: {
            employee: record
        }
    },

    items: [{
        xtype: 'textfield',
        name: 'firstname',
        label: 'First Name'
    }, {
        xtype: 'toolbar',
        docked: 'bottom',
        items: ['->', {
            xtype: 'button',
            text: 'Submit',
            iconCls: 'x-fa fa-check',
            handler: function() {
                this.up('formpanel').destroy();
            }
        }, {
            xtype: 'button',
            text: 'Cancel',
            iconCls: 'x-fa fa-close',
            handler: function() {
                this.up('formpanel').destroy();
            }
        }]
    }]
});

谢谢！

标签： javascriptwebextjsfrontendsingle-page-application

Answer 1

viewmodel您可以在创建Formdialog这样的时直接传递记录

Ext.create({
    xtype: 'formdialog',
    viewModel: {
        data: {
            employee: record
        }
    }
})

或者您也可以使用ViewModel.set()这样的方法在视图模型中设置您的记录

form.getViewModel().set('employee', record);

你可以在这里检查工作小提琴。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function() {


        Ext.define('QuickApp.view.main.Formdialog', {

            extend: 'Ext.form.Panel',

            xtype: 'formdialog',

            bodyPadding: 10,

            title: 'Update Record',

            floating: true,

            centered: true,

            width: 300,

            modal: true,

            draggable: true,

            items: [{
                xtype: 'textfield',
                name: 'firstname',
                label: 'First Name',
                bind: '{employee.firstName}'
            }, {
                xtype: 'toolbar',
                docked: 'bottom',
                items: ['->', {
                    xtype: 'button',
                    text: 'Submit',
                    iconCls: 'x-fa fa-check',
                    handler: function() {
                        this.up('formpanel').destroy();
                    }
                }, {
                    xtype: 'button',
                    text: 'Cancel',
                    iconCls: 'x-fa fa-close',
                    handler: function() {
                        this.up('formpanel').destroy();
                    }
                }]
            }]
        });

        Ext.define('QuickApp.view.main.Main', {
            extend: 'Ext.tab.Panel',

            xtype: 'maintabpanel',

            items: [{
                title: 'Employee Directory',
                xtype: 'grid',
                iconCls: 'x-fa fa-users',
                listeners: {
                    itemtap: function(view, index, item, record) {
                        Ext.create({
                            xtype: 'formdialog',
                            viewModel: {
                                data: {
                                    employee: record
                                }
                            }
                        }).showBy(item.el);
                    }
                },
                store: {
                    type: 'employee'
                },

                columns: [{
                    text: 'First Name',
                    dataIndex: 'firstName',
                    flex: 1
                }, {
                    text: 'Last Name',
                    dataIndex: 'lastName',
                    flex: 1
                }, {
                    text: 'Phone Number',
                    dataIndex: 'phoneNumber',
                    flex: 1
                }],
            }, {
                title: 'About Sencha',
                iconCls: 'x-fa fa-info-circle'
            }]
        });

        Ext.create({
            xtype: 'maintabpanel',
            renderTo: Ext.getBody(),
            fullscreen: true
        })
    }
});