Ext.view.View中itemSelector的作用

javascript] view plaincopyprint?

1. Ext.Loader.setConfig({ enabled: true });  
2. Ext.Loader.setPath('Ext.ux.DataView', '../extjs/examples/ux/DataView');  
3.    
4. Ext.onReady(function () {  
5.     //创建store  
6.     var store = Ext.create('Ext.data.Store', {  
7.         fields: ['IntData', 'StringData', 'TimeData'],  
8.         proxy: {  
9.             type: 'ajax',  
10.             url: 'app2.jsp',  
11.             reader: {  
12.                 type: 'json',  
13.                 root: 'rows'  
14.             }  
15.         }  
16.     });  
17.     store.load();  
18.    
19.     //定义模板  
20.     var tpl = new Ext.XTemplate(  
21.         '<table cellpadding=0 cellspacing=0 border=1 width=450px>',  
22.         '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',  
23.         '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',  
24.         '<tpl for=".">',  
25.             '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',  
26.         '</tpl>',  
27.         '</table>'  
28.     );  
29.    
30.     //定义Ext.view.View控件  
31.     var view = Ext.create('Ext.view.View', {  
32.         renderTo: "div1",  
33.         store: store,  
34.         tpl: tpl,  
35.         autoHeight: true,  
36.         multiSelect: true,  
37.         //height: 310,  
38.         trackOver: true,  
39.         id: 'view1',  
40.         overItemCls: 'hover',  
41.         itemSelector: 'td.x-editable',  
42.         emptyText: '没有数据',  
43.         plugins: [  
44.                 Ext.create('Ext.ux.DataView.DragSelector', {}),  
45.                 Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })  
46.             ],  
47.         listeners: {  
48.             selectionchange: function (dataView, selectNodes) {  
49.                 var msg = "";  
50.                 for (var i = 0; i < selectNodes.length; i++) {  
51.                     var index = 1 + selectNodes[i].index;  
52.                     if (msg == "") {  
53.                         msg = index;  
54.                     }  
55.                     else {  
56.                         msg += "," + index;  
57.                     }  
58.                 }  
59.                 if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');  
60.                 else Ext.get("span1").update('当前选择了第' + msg + '行数据。');  
61.             }  
62.         }  
63.     });  
64.    
65. });  

第二种情况

[javascript] view plaincopyprint?

1. Ext.Loader.setConfig({ enabled: true });  
2. Ext.Loader.setPath('Ext.ux.DataView', '../extjs/examples/ux/DataView');  
3.    
4. Ext.onReady(function () {  
5.     //创建store  
6.     var store = Ext.create('Ext.data.Store', {  
7.         fields: ['IntData', 'StringData', 'TimeData'],  
8.         proxy: {  
9.             type: 'ajax',  
10.             url: 'app2.jsp',  
11.             reader: {  
12.                 type: 'json',  
13.                 root: 'rows'  
14.             }  
15.         }  
16.     });  
17.     store.load();  
18.    
19.     //定义模板  
20.     var tpl = new Ext.XTemplate(  
21.         '<table cellpadding=0 cellspacing=0 border=1 width=450px>',  
22.         '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',  
23.         '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',  
24.         '<tpl for=".">',  
25.             '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',  
26.         '</tpl>',  
27.         '</table>'  
28.     );  
29.    
30.     //定义Ext.view.View控件  
31.     var view = Ext.create('Ext.view.View', {  
32.         renderTo: "div1",  
33.         store: store,  
34.         tpl: tpl,  
35.         autoHeight: true,  
36.         multiSelect: true,  
37.         //height: 310,  
38.         trackOver: true,  
39.         id: 'view1',  
40.         overItemCls: 'hover',  
41.         itemSelector: 'tr.data',//  
42.         emptyText: '没有数据',  
43.         plugins: [  
44.                 Ext.create('Ext.ux.DataView.DragSelector', {}),  
45.                 Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })  
46.             ],  
47.         listeners: {  
48.             selectionchange: function (dataView, selectNodes) {  
49.                 var msg = "";  
50.                 for (var i = 0; i < selectNodes.length; i++) {  
51.                     var index = 1 + selectNodes[i].index;  
52.                     if (msg == "") {  
53.                         msg = index;  
54.                     }  
55.                     else {  
56.                         msg += "," + index;  
57.                     }  
58.                 }  
59.                 if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');  
60.                 else Ext.get("span1").update('当前选择了第' + msg + '行数据。');  
61.             }  
62.         }  
63.     });  
64.    
65. });  

效果图如下

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