ExtJs: Как передать запись в созданный элемент? - PullRequest
Новая
       19

ExtJs: Как передать запись в созданный элемент?

0 голосов
/ 09 сентября 2018

Может быть, кто-нибудь может помочь мне с моей простой проблемой: с помощью вкладки я создаю модальную панель. Эта модальная панель имеет текстовое поле. Я хочу связать постучавший элемент с этим текстовым полем новой панели. Я использую Ext.create ... в функции слушателя, чтобы создать панель. Как передать запись сейчас на эту панель, где я хотел бы использовать ее в моей viewModel?

Обратите внимание на комментарии! : -)

Вот мой 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();
            }
        }]
    }]
});

Спасибо!

1 Ответ

0 голосов
/ 10 сентября 2018

Вы можете напрямую передать запись в viewmodel, когда создаете свой Formdialog, например, 

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

Или вы также можете установить свою запись в viewmodle, используя ViewModel.set() метод, подобный этому 

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

Вы можете проверить здесь с работающей скрипкой .

КОД SNIPPET 

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