Ext.view.View中itemSelector的作用

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.DataView', '../extjs/examples/ux/DataView');
 
Ext.onReady(function () {
    //创建store
    var store = Ext.create('Ext.data.Store', {
        fields: ['IntData', 'StringData', 'TimeData'],
        proxy: {
            type: 'ajax',
            url: 'app2.jsp',
            reader: {
                type: 'json',
                root: 'rows'
            }
        }
    });
    store.load();
 
    //定义模板
    var tpl = new Ext.XTemplate(
        '<table cellpadding=0 cellspacing=0 border=1 width=450px>',
        '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
        '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',
        '<tpl for=".">',
            '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
        '</tpl>',
        '</table>'
    );
 
    //定义Ext.view.View控件
    var view = Ext.create('Ext.view.View', {
        renderTo: "div1",
        store: store,
        tpl: tpl,
        autoHeight: true,
        multiSelect: true,
        //height: 310,
        trackOver: true,
        id: 'view1',
        overItemCls: 'hover',
        itemSelector: 'td.x-editable',
        emptyText: '没有数据',
        plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
            ],
        listeners: {
            selectionchange: function (dataView, selectNodes) {
                var msg = "";
                for (var i = 0; i < selectNodes.length; i++) {
                    var index = 1 + selectNodes[i].index;
                    if (msg == "") {
                        msg = index;
                    }
                    else {
                        msg += "," + index;
                    }
                }
                if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
                else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
            }
        }
    });
 
});

第二种情况

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.DataView', '../extjs/examples/ux/DataView');
 
Ext.onReady(function () {
    //创建store
    var store = Ext.create('Ext.data.Store', {
        fields: ['IntData', 'StringData', 'TimeData'],
        proxy: {
            type: 'ajax',
            url: 'app2.jsp',
            reader: {
                type: 'json',
                root: 'rows'
            }
        }
    });
    store.load();
 
    //定义模板
    var tpl = new Ext.XTemplate(
        '<table cellpadding=0 cellspacing=0 border=1 width=450px>',
        '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
        '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',
        '<tpl for=".">',
            '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
        '</tpl>',
        '</table>'
    );
 
    //定义Ext.view.View控件
    var view = Ext.create('Ext.view.View', {
        renderTo: "div1",
        store: store,
        tpl: tpl,
        autoHeight: true,
        multiSelect: true,
        //height: 310,
        trackOver: true,
        id: 'view1',
        overItemCls: 'hover',
        itemSelector: 'tr.data',//
        emptyText: '没有数据',
        plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
            ],
        listeners: {
            selectionchange: function (dataView, selectNodes) {
                var msg = "";
                for (var i = 0; i < selectNodes.length; i++) {
                    var index = 1 + selectNodes[i].index;
                    if (msg == "") {
                        msg = index;
                    }
                    else {
                        msg += "," + index;
                    }
                }
                if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
                else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
            }
        }
    });
 
});

效果图如下

大家可以看到选择的是一整行，那么itemSelector选择的就是tpl中的Dom节点，并将node转换成records