【问题标题】:extjs4 get instance of view in controller?extjs4 在控制器中获取视图实例?
【发布时间】:2012-12-02 19:08:42
【问题描述】:

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

帮助?

我的控制器:

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

【问题讨论】:

  • 请试试这个:var view = this.getSchedulerScheduler();
  • 不,它什么也没做。得到这是萤火虫: TypeError: this.getSchedulerScheduler is not a function [Break On This Error] var view = this.getSchedulerScheduler();
  • 当然,我不可能是唯一有这个问题的人。必须有人知道如何在控制器中获取视图实例。
  • 什么是“这个”。因为 extjs 会自动为控制器中定义的所有视图创建 getter。 'this' 是控制器吗?
  • OK,为它创建了这个getter:this.getSchedulerSchedulerView()。它还在末尾添加了“视图”。但这会在 firebug 中返回“构造函数”,我应该如何访问视图中的属性?

标签: javascript model-view-controller extjs extjs4 extjs4.1


【解决方案1】:

正如我所说,Extjs 为您的视图(控制器视图数组中列出的视图)创建 getter,并且您可以访问它们:

var view = this.getSchedulerSchedulerView();

获得视图参考后,您可以执行此操作以访问包含的网格:

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

【讨论】:

  • 是的,我看到了,现在可以在“获取参考”末尾的文档中找到:docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt3
  • 好吧,使用上面的代码在萤火虫中给了我这个错误:TypeError: view.down is not a function [Break On This Error] var grid = view.down('.inventorylist');跨度>
  • 所以你是说所有视图特定的功能都应该保留在视图中?
  • 是的,您应该尽可能地将视图逻辑与业务逻辑分开。如果将来您想重新设计视图怎么办?如果你的视图发布了一个清晰的界面会更容易。如果 view 是一个组件(我确定它是)它必须有 down 方法。
  • 是的,这很有意义。我相信你回答了我的问题,你帮了我很大的忙。我刚刚习惯了 mvc 方法,这有点挑战。我只需要继续弄脏自己的手并继续提问,再次感谢。
猜你喜欢
  • 2012-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-20
  • 1970-01-01
相关资源
最近更新 更多