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：lists”。

我怎么能实现这个？

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

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

是的，你可以在控制器中做同样的事情。毫无疑问它会起作用。

由于萨钦

Sencha Touch事件代表多个项目

2 个答案: