FIDDLE

Question

鉴于我有这样的组件：

Ext.define('MyGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.mygrid',
  controller: 'mygridviewcontroller',
  config: {
    foo: null
  }
}

我将它添加到我的页面，如：

{
  xtype: 'mygrid',
  bind: {
    foo: '{something}'
  }
}

如何从我的组件的ViewController内的函数中访问config foo的值？即如果我的控制器正在响应某个事件，我希望它根据foo的当前值执行某些操作。

Answer 1

为此，你需要先在任何事件中使用contoller.getView()访问视图，然后才能直接访问这样的视图配置

var view = this.getView();
view.getFoo()

FIDDLE

在上面的小提琴中，我使用grid，viewModel和ViewController创建了一个演示。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyGridviewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.mygridviewcontroller',

            // This method is called as a "handler" for the Get Foo Value button in our view
            onGetFooValueButtonClick: function (button, e) {
                var view = this.getView();
                Ext.Msg.alert('Foo Value is', view.getFoo());
            },

            onSetFooValueButtonClick: function (button, e) {
                var view = this.getView();
                Ext.Msg.prompt('Enter FooValue', '', function (btn, v) {
                    if (btn == 'ok') {
                        view.setFoo(v);
                        /*
                         * you can also set value using view model.
                         * view.getViewModel().set('something',v);
                         */
                    }
                })
            }
        });

        Ext.define('MyGrid', {
            extend: 'Ext.grid.Panel',
            alias: 'widget.mygrid',
            controller: 'mygridviewcontroller',
            config: {
                foo: null
            }
        });

        Ext.define('MyGridViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.mygridvm',
            data: {
                something: 'This is foo value.. :)'
            },
            stores: {
                mygridstore: {
                    data: [{
                        'name': 'Lisa',
                        "email": "lisa@simpsons.com",
                        "phone": "555-111-1224"
                    }, {
                        'name': 'Bart',
                        "email": "bart@simpsons.com",
                        "phone": "555-222-1234"
                    }, {
                        'name': 'Homer',
                        "email": "home@simpsons.com",
                        "phone": "555-222-1244"
                    }]
                }
            }
        });

        Ext.create({
            xtype: 'mygrid',
            renderTo: Ext.getBody(),
            title: 'My Demo',
            viewModel: {
                type: 'mygridvm'
            },
            bind: {
                foo: '{something}',
                store: '{mygridstore}'
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120
            }],
            tbar: ['->', {
                text: 'Get foo value',
                handler: 'onGetFooValueButtonClick'
            }, {
                text: 'Set foo value',
                handler: 'onSetFooValueButtonClick'
            }]
        });
    }
});

ViewController中的ExtJS访问视图配置

1 个答案:

FIDDLE