ExtJs modal panel contoller doesn't see my grid

Question

I am trying to build ExtJS 6 app. I have two panels.

First one (Panel3) contains two grids and expand event on row item of 'payordCmpGrid' grid invokes creating of modal panel 'askObjPanel' in a controller 'main'.

Panel 'panel3'

Ext.define('BillWebApp.view.main.Panel3', {
    extend: 'Ext.panel.Panel',
    xtype: 'panel3',
    title: 'title',
    reference: 'panel3',
    viewModel: {
        type: 'main'
    },
    controller: 'main',
    items: [{
        xtype: 'gridpanel',
        reference: 'payordGrpGrid',
        width: 1200,
        minHeight: 120,
        margin: '0 0 10 0',
        tbar: [{
            text: 'addGrp',
            handler: 'onGridPayordGrpAdd'
        }],
...

        {
        xtype: 'gridpanel',
        iconCls: 'framing-buttons-grid',
        reference: 'payordCmpGrid',
        width: 1000,
        minHeight: 220,
        header: false,
        items: [{
                    header: 'Object',
                    dataIndex: 'klskFk',
                    width: 200,
                    queryMode: 'local',
                    editor: {
                        xtype: 'combo',
                        typeAhead: true,
                        forceSelection: true,
                        displayField: 'name',
                        valueField: 'id',
                        triggerAction: 'all',
                        allowBlank: false,
                        listeners: {
                            expand: 'onGridPayordCmpItemSel'
                        }
                    }
            },

...

Panel 'askObjPanel'

Ext.define('BillWebApp.view.main.AskObjPanel', {

    extend: 'Ext.form.Panel',
    xtype: 'form-hboxlayout',
    alias: 'widget.askobjpanel',
    layout: 'form',
    plain: true,
    reference: 'askObjPanel',
    controller: 'main',

    items: [{
        xtype: 'fieldset',
        defaultType: 'textfield',
        layout: 'anchor',
        items: [
            {   
                xtype: 'fieldcontainer',
                layout: 'hbox',
                align: 'stretch',
                combineErrors: true,

                items: [{
                    flex: 2,
                    xtype: 'button',
                    text: 'Найти',
                    listeners: {
                        click: 'onAskObjButtonFindPress'
                    }
                }]
            }

...

Controller 'main'

var askObjPanel;
Ext.define('BillWebApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onGridPayordCmpItemSel: function() {
        // creating Panel 'askObjPanel'
        askObjPanel = new Ext.form.Panel({
            modal: true,
            title: 'Find obj',
            floating: true,
            closable : true,
            resizable : true,
            layout: 'fit',
            controller: 'main', // the same controller 'main'
            items: [
                { xtype: 'askobjpanel' }
            ]
        });
        askObjPanel.show();
    },

onAskObjButtonFindPress: function() {
    var grid = this.lookupReference('payordGrpGrid'); // returns grid=null
    console.log('Grid='+grid);
}

Why does in controller event 'onAskObjButtonFindPress', lookupReference returns grid=null?

Upd I made fiddle with this example here. If you press Button2, variable 'grid' is not null, and you can change grid's title, but if you press Button1, then Button3, variable 'grid' is null

I think that you are having some scope issues here. Eventhough you are using the same controller for your two forms, is not the same scope when an event is fired by the panel3 or the askobjpanel. That's why you can't retrieve the grid when you press a button inside the modal window. — qmateub

Harshit Shah Harshit Shah · Accepted Answer · 2017-04-04T07:50:54

Somehow your fiddle is not working. Anyways at first it got opened so i did the changes and came to a conclusion. Actually you have overridden the view while adding the "AskObjPanel". So i did the changes accordingly and it worked. What you need to do is just comment out the

controller:'main'

from this part:

xtype: 'form-hboxlayout',
alias: 'widget.askobjpanel',
layout: 'form',
plain: true,
reference: 'askObjPanel',
controller: 'main',

and also change this:

askObjPanel = this.getView().add({
        modal: true,
        title: 'Find obj',
        floating: true,
        closable : true,
        resizable : true,
        layout: 'fit',
        items: [
            { xtype: 'askobjpanel' }
        ]
    });

Here also remove that controller part. It will work. Please let me know if any issues.

And for the reviewers, I apologize but i didn't know this. Anyways thanks for letting me know

ExtJs modal panel contoller doesn't see my grid

1 Answers