extjs数据视图未找到事件选择

extjs dataview not fount event select

本文关键字:事件 选择 数据 视图 extjs      更新时间:2023-09-26

更改模板后,数据视图消失事件选择。我有数据视图、存储和模板。但我需要在单击下拉列表时动态更改数据和模板的数据视图。更改模板并加载数据后,我需要选择一行事件。

数据视图:

items: [
            {
                xtype: 'dataview',
                autoScroll: true,
                id: 'dataview',
                margin: '10 0 10 10',
                disableSelection: false,
                itemSelector: 'div',
                itemTpl: [
                    '<table>',
                    '   <tr>',
                    '       <td width=''200px''><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="{host}/avl_icon/get/{id}/18/any.png">{nm}</td>',
                    '       <td class="configure"></td>',
                    '   </tr>    ',
                    '       </table>',
                    '   '
                ],
                store: 'CarStore',
                listeners: {
                    itemclick: {
                        fn: 'onDataviewSelectConfigure',
                        single: false
                    },
                    select: 'onDataviewSelect'
                }
            }

存储

Ext.define('MyApp.store.CarStore', {
extend: 'Ext.data.Store',
requires: [
    'MyApp.model.CarModel',
    'Ext.data.JsonStore',
    'Ext.data.proxy.Ajax',
    'Ext.data.JsonPStore'
],
constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        pageSize: 999,
        storeId: 'CarStore',
        model: 'MyApp.model.CarModel',
        proxy: {
            type: 'jsonp',
            url: 'http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid"),
            callbackKey: 'callback',
                reader: {
                        root: 'items'
                },
headers: '("Access-Control-Allow-Origin", "*")'
        }
    }, cfg)]);
}

});

功能新模板

onObjectsClick: function(component, eOpts) {
    var panel = Ext.getCmp('dataview');
    store = Ext.getStore('CarStore');
    store.reload();

    panel.tpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<table class="tabview">',
        '   <tr>',
        '       <td width=''200px''><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="{host}/avl_icon/get/{id}/18/any.png">{nm}</td>',
        '       <td class="configure"></td>',
        '   </tr>    ',
        '       </table>',
        '</tpl>',
        '   ');

}

渲染新模板和数据后,我无法应用事件选择。我做错了什么?

看起来itemSelector是一个div,但模板上没有div。

尝试将其更改为itemSelector: tr[name=car]

然后将您的新tpl更改为:

panel.tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<table class="tabview">',
    '   <tr name=''car''>',
    '       <td width=''200px''><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="{host}/avl_icon/get/{id}/18/any.png">{nm}</td>',
    '       <td class="configure"></td>',
    '   </tr>    ',
    '       </table>',
    '</tpl>',
    '   ');