Question

更改后，模板数据视图消失，事件选择。我有数据视图，商店和模板。但是我需要在单击下拉列表时动态地分别更改数据和模板数据视图。更改模板并加载数据后，我需要选择一行Event。

数据视图：

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>',
        '   ');

}

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

Answer 1

您的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>',
    '   ');

extjs dataview未找到事件选择

1 个答案: