ExtJs模态面板控制器没有看到我的网格

时间:2017-04-04 04:35:48

标签: javascript extjs extjs6

我正在尝试构建ExtJS 6应用。 我有两个小组。

第一个(Panel3)包含两个网格,并在'payordCmpGrid'网格调用的行项上展开事件 在控制器'main'中创建模态面板'askObjPanel'。

面板'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'
                        }
                    }
            },

...

小组'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'
                    }
                }]
            }

...

控制者'主'

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

为什么在控制器事件'onAskObjButtonFindPress'中, lookupReference返回grid = null?

UPD 我用这个例子here做了小提琴。 如果你按下Button2,变量'grid'不为null,你可以改变网格的标题, 但如果你按下Button1,然后按下Button3,变量'grid'为空

1 个答案:

答案 0 :(得分:1)

不知怎的,你的小提琴不起作用。无论如何,一开始它打开了所以我做了改变并得出结论。实际上你在添加" AskObjPanel"时已经覆盖了视图。所以我做了相应的更改并且它起作用了。你需要做的只是注释掉

controller:'main'

来自这一部分:

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

也改变了这个:

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

这里也删除了控制器部分。它会工作。如果有任何问题,请告诉我。

对于评论者,我道歉但我不知道这一点。无论如何,谢谢你让我知道