Question

我正在尝试将itemclick事件委托给XTemplate项目但没有成功。数据正确呈现，但itemclick事件在呈现视图时抛出错误。我得到的错误如下：

TypeError：records [i]未定义node.setAttribute（'data-recordId'，记录[I] .internalId）;

数据输出（用户看到的内容）如下所示：

一个成功的男人是一个比妻子可以花更多钱的人。



4 Tom



5 David



6 Arthur



一个成功的女人是能找到这样一个男人的人。



1 Joanne



2 Tina



3 Kate

有没有办法将事件委托给XTemplate嵌套项？

Bellow是我正在使用的代码。

我有以下相关的模型：

Ext.define('Gender', {
    extend: 'Ext.data.Model',


    fields: [
        { name: 'gender', type: 'auto' }
    ],


    hasMany:{model:'Member', name:'member'}


    //associations: {
    //    type: 'hasMany',
    //    model: 'Member',
    //    name: 'member',
    //    associationKey: 'member'
    //}
});

和

Ext.define('Member', {
    extend: 'Ext.data.Model',


    fields: [
        { name: '_id', type: 'int' },
        { name: 'name', type: 'auto' },
        { name: 'model', type: 'auto' }
    ],


    belongsTo: 'Gender'
});

这是我的商店：

Ext.define('GenderStore', {
    extend: 'Ext.data.Store',
    model: 'Gender',
    storeId: 'genderstore',


    autoLoad: true,


    proxy: {
        type: 'ajax',
        pageParam: false, //to remove param "page"
        startParam: false, //to remove param "start"
        limitParam: false, //to remove param "limit"
        noCache: false, //to remove param "_dc"
        url: '/data/data.json',
        extraParams: {},
        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success',
            totalProperty: 'dataset'
        }
    }


});

我的观点：

Ext.define("GenderView",{
    extend: "Ext.panel.Panel",
    id: 'genderview',
    xtype: 'genderview',


    bodyPadding: 20,
    autoScroll: true,


    title: 'Gender View',
    closable: false,
    tooltip: 'Gender View',


    items: [{
        xtype: 'dataview',
        margin: '20 80 20 80',
        store: Ext.create('GenderStore'),
        emptyText: 'Try again!!!',
        loadMask: false,
        itemSelector: '.gender',


        // tpl: new Ext.XTemplate(
//             '<tpl for=".">' +
//             '<p>{gender}</p>' +
//                 '<tpl for="member">' +
//                     '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
//                 '</tpl>' +
//             '</tpl>'
//         ),


        tpl: new Ext.XTemplate(
            '<tpl for=".">' +
                        
                '<tpl if="gender == \'male\'">' +
                    '<p>A successful man is one who makes more money than his wife can spend.</p>' +                
                    '<tpl for="member">' +
                        '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
                    '</tpl>' +
                '<tpl else>' +
                    '<p>A successful woman is one who can find such a man.</p>' +                    
                    '<tpl for="member">' +
                        '<span class="gender">[{_id}]&nbsp;&nbsp;{name}</span><br><br>' +
                    '</tpl>' +
                '</tpl>' +
                
            '</tpl>'
        ),


        listeners: {
            itemclick: function(view, record, item, index, e, eOpts) {
                console.log(record.get('_id'));
            }
        }
    }]


});

我正在尝试加载的数据是这种形式：

{
    "data": [{
        "gender": "female",
        "member": [{
            "_id": 1,
            "name": "Joanne",
            "model": "female"
        }, {
            "_id": 2,
            "name": "Tina",
            "model": "female"
        }, {
            "_id": 3,
            "name": "Kate",
            "model": "female"
        }]
    }, {
        "gender": "male",
        "member": [{
            "_id": 4,
            "name": "Tom",
            "model": "male"
        }, {
            "_id": 5,
            "name": "David",
            "model": "male"
        }, {
            "_id": 6,
            "name": "Arthur",
            "model": "male"
        }]
    }],
    "dataset": 6,
    "message": "OK",
    "success": true
}

现在采用不同的方法：如果我使用不同的数据结构怎么办？如果我加载类似下面的[未嵌套]的JSON，是否可以实现上述表示布局？

{           
    "data": [{                                   
        "_id": 1,
        "name": "Joanne",
        "model": "female"                       
    }, {                                   
        "_id": 2,
        "name": "Tina",
        "model": "female"                       
    }, {                                   
        "_id": 3,
        "name": "Kate",
        "model": "female"                       
    }, {                                   
        "_id": 4,
        "name": "Tom",
        "model": "male"                       
    }, {                                  
        "_id": 5,
        "name": "David",
        "model": "male"                       
    }, {                                   
        "_id": 6,
        "name": "Arthur",
         "model": "male"                       
    }],
    "dataset": 6,
    "message": "OK",
    "success": true
}

Answer 1

其他人帮我找到了解决方案。以下代码属于dataview。注意模板中与itemSelector匹配的额外div。

如果其他人在类似的情况下需要帮助，我在这里提供解决方案：

items: [{
        xtype: 'dataview',
        margin: '20 80 20 80',
        store: {
            type: 'gender'
        },
        emptyText: 'Try again!!!',
        loadMask: false,
        itemSelector: '.gender-wrap',
        tpl: new Ext.XTemplate(
            '<tpl for=".">' +
                '<div class="gender-wrap">' +
                    '<tpl if="gender == \'male\'">' + 
                        '<p>A successful man is one who makes more money than his wife can spend.</p>' + 
                        '<tpl for="member">' + 
                            '<span class="gender" child:id="{_id}">[{_id}]  {name}</span><br><br>' + 
                        '</tpl>' + 
                    '<tpl else>' + 
                        '<p>A successful woman is one who can find such a man.</p>' + 
                        '<tpl for="member">' + 
                            '<span class="gender" child:id="{_id}">[{_id}]  {name}</span><br><br>' + 
                        '</tpl>' + 
                    '</tpl>' +
                '</div>' +
            '</tpl>'
        ),
        listeners: {
            itemclick: function(view, record, item, index, e, eOpts) {
                var child = e.getTarget('.gender', 3, true),
                    id    = child && child.getAttribute('id', 'child');

                if (id) {
                    console.log('click was on', id, 'of this gender', record.get('gender'));
                }
            }
        }
    }]

嵌套数据的XTemplate事件委派问题

1 个答案: