javascript - extjs4 在 Controller 中获取 View 实例？

Question

我正在尝试在 Controller 中获取我的 View 实例。我怎样才能做到这一点。我尝试这样做的主要原因是我的 View 中有一个网格，我想在从组合框中进行选择之前将其禁用，因此我需要访问 View 的实例。

帮忙吗？

我的 Controller :

Ext.define('STK.controller.SiteSelectController', {
    extend: 'Ext.app.Controller',

    stores: ['Inventory', 'Stacker', 'Stackers'],
    models: ['Inventory', 'Stackers'],
    views: ['scheduler.Scheduler'],

    refs: [{
        ref: 'stackerselect',
        selector: 'panel'
    }],

    init: function () {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },
    /* render all default functionality */
    onPanelRendered: function () {
        var view = this.getView('Scheduler'); // this is null?
    }
});

我的看法:

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature',
    'Ext.ux.LiveSearchGridPanel']);

var filters = {
    ftype: 'filters',
    autoReload: false,
    encode: false,
    local: true
};

Ext.define('invtGrid', {
    extend: 'Ext.ux.LiveSearchGridPanel',
    alias: 'widget.inventorylist',
    title: 'Inventory List',
    store: 'Inventory',
    multiSelect: true,
    padding: 20,
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'invtGridDDGroup',
            dropGroup: 'stackerGridDDGroup'
        },
        listeners: {
            drop: function (node, data, dropRec, dropPosition) {
                var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
            }
        }
    },
    features: [filters],
    stripeRows: true,
    columns: [{
        header: 'OrdNum',
        sortable: true,
        dataIndex: 'ordNum',
        flex: 1,
        filterable: true
    }, {
        header: 'Item',
        sortable: true,
        dataIndex: 'item',
        flex: 1,
        filterable: true
    }, {
        header: 'Pcs',
        sortable: true,
        dataIndex: 'pcs',
        flex: 1,
        filterable: true
    }]
});

Ext.define('stackerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.stackerselect',
    title: 'Stacker  Select',
    store: 'Stacker',
    padding: 20,
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'stackerGridDDGroup',
            dropGroup: 'invtGridDDGroup'
        },
        listeners: {
            drop: function (node, data, dropRec, dropPosition) {
                var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
            }
        }

    },
    columns: [{
        header: 'OrdNum',
        dataIndex: 'ordNum',
        flex: 1
    }, {
        header: 'Item',
        dataIndex: 'item',
        flex: 1
    }, {
        header: 'Pcs',
        dataIndex: 'pcs',
        flex: 1
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [{
            text: 'Submit',
            action: 'submit'
        }, {
            text: 'Reset',
            action: 'reset'
        }]
    }, {
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            id: 'combo',
            xtype: 'combobox',
            queryMode: 'local',
            fieldLabel: 'Stacker',
            displayField: 'stk',
            valueField: 'stk',
            editable: false,
            store: 'Stackers',
            region: 'center',
            type: 'absolute'
        }]
    }]
});

Ext.define('STK.view.scheduler.Scheduler', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.schedulerview',
    title: "Scheduler Panel",
    layout: {
        type: 'column'
    },

    items: [{
        xtype: 'inventorylist',
        width: 650,
        height: 600,
        columnWidth: 0.5,
        align: 'stretch'
    }, {
        xtype: 'stackerselect',
        width: 650,
        height: 600,
        columnWidth: 0.5
    }]
});

Answer 1

正如我所说，Extjs 为您的 View (在 Controller 的 View 数组中列出的 View )创建 getter，并且您可以访问它们:

var view = this.getSchedulerSchedulerView();

获得 View 引用后，您可以执行此操作以访问包含的网格:

var grid = view.down('.inventorylist');
grid.disable();