Question

I am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.

Help?

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

My view:

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

As I said, Extjs creates getter for your views (those listed in the controller’s view array) and you get access to them:

var view = this.getSchedulerSchedulerView();

Once you have the view reference you can do this to get access to the contained grid:

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