Sencha Touch 多个项目的事件委托

Posted 2023-02-25

【中文标题】Sencha Touch 多个项目的事件委托

【英文标题】：Sencha Touch event delegate for multiple items

【发布时间】：2015-01-02 15:05:22

【问题描述】：

我正在尝试通过一个通用的类名为多个项目委派一个事件，但是它似乎不起作用。委托多个 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”。

我怎样才能做到这一点？

【参考方案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

【参考方案2】：

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

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

谢谢 萨钦