Sencha Touch事件代表多个项目

Question

我正在尝试通过一个通用的类名将一个事件委托给多个项目，但是似乎不起作用。委派多个ID应该可以，但是我收到有关以下消息的错误消息：“无效的ComponentQuery选择器”。

这是我目前所拥有的：

Ext.define("App.view.Main", {
    extend : "Ext.Container",

    config : {
        listeners : {
            disclose : {
                fn : "onElementDisclose",
                delegate : [ "#onelist", "#anotherlist" ] // this don't work
                // delegate : ".lists" <- this also don't work
                // delegate : "#onelist, #anotherlist" <- this don't work either
                // delegate : "#onelist" <- but this work!
            }
        },
    },

    initialize : function() {
        this.callParent(arguments);

        this.add([ {
            xtype : "slideshow",
        }, {
            xtype : "onelist",
        }, {
            xtype : "anotherlist",
        } ]);
    },

    onElementDisclose : function () {
        console.log("click");
    },

});

两个列表都具有“ onItemDisclosure：true”和“ cls：列表”。

我该如何实现？

Answer 1

这当然在一定程度上是可行的，您不必如此处所示在控制器中委派它：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            title: 'Test',
            layout: 'vbox',
            items: [{
                xtype: 'panel',
                layout: 'fit',
                flex: 1,
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'List 1'
                }, {
                    xtype: 'list',
                    name: 'list 1',
                    cls: 'myList',
                    id: 'list1',
                    onItemDisclosure: true,
                    itemTpl: "List1 item {name}",
                    model: Ext.define('User', {
                        extend: 'Ext.data.Model',

                        config: {
                            fields: [{
                                name: 'name',
                                type: 'string'
                            }]
                        }
                    }),
                    data: [{
                        name: 'John'
                    }, {
                        name: 'Jane'
                    }]
                }]
            }, {

                xtype: 'panel',
                layout: 'fit',
                flex: 1,
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'List 2'
                }, {
                    xtype: 'list',
                    name: 'list 2',
                    cls: 'myList',
                    id: 'list2',
                    onItemDisclosure: true,
                    itemTpl: "List2 item {make}",
                    model: Ext.define('Car', {
                        extend: 'Ext.data.Model',

                        config: {
                            fields: [{
                                name: 'make',
                                type: 'string'
                            }]
                        }
                    }),
                    data: [{
                        make: 'Volkswagen'
                    }, {
                        make: 'Audi'
                    }]
                }]
            }],

            listeners: {
                disclose: {
                    fn: function(list, record, target, index, e, eOpts) {
                        console.log(list);
                        var greeting = '';
                        if (typeof(record.data.make) != 'undefined') {
                            greeting = "I am a car and my make is " + record.data.make + "!";
                        } else if (typeof(record.data.name) != 'undefined') {
                            greeting = "I am a user and my name is " + record.data.name + "!";
                        };
                        console.log('disclosing from list ' + list.config.name, greeting);

                    },
                    // delegate : 'list' // this works as you are querying by xtype of list
                    // delegate : 'component [onItemDisclosure]' // this works as you are targeting by attribute of onItemDisclosure
                    // delegate : '[onItemDisclosure]' // this works as you are targeting by attribute
                    // delegate : '[name="list 1"]' // this works as you are targeting by attribute of name = 'list 1'
                    // delegate : '[cls="myList"]' // this unfortunately doesn't work
                    // delegate : "#list1, #list2" <- this don't work either
                    // delegate : "#list1" <- but this work!
                }
            }
        });
    }
});

但是您可以看到上述内容存在一些陷阱。

演示：https://fiddle.sencha.com/#fiddle/g49

Answer 2

您无法在视图中的多个控件定义侦听器上使用公共事件来触发相同的功能。

是的，您可以在控制器中执行相同的操作。毫无疑问，它将起作用。

谢谢萨钦