extjs4获取控件中的视图实例？ [英] extjs4 get instance of view in controller?

问题描述

我正试图在控制器中获取我的视图实例。我该如何做到这一点我试图这样做的主要原因是我有一个网格，我想要禁用，直到从组合框中进行选择，所以我需要访问视图的实例。

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.

帮助？

我的控制器：

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

推荐答案

正如我所说，Extjs为您的意见创建getter控制器视图数组中列出的那些），并且您可以访问它们：

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

这篇关于extjs4获取控件中的视图实例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！