Question

分析Ext.DataView结合Ext.Panel是怎么样输出数据

Answer 1

　　Ext.DataView 一种使用定制的模板布局和格式展示数据的机制。 DataView使用一个Ext.XTemplate作为其内部的模板机制， 并被绑定到一个Ext.data.Store， 这样当store中的数据发生变化时视图将自动同步以反应变化。 视图也内建了对许多可能发生的通用事件的处理，包含项目被单击、双击、鼠标滑过、鼠标移出等等， 同时也有一个内建的选择模型（selection model）。为了使用这些特性，必须为DataView提供一个itemSelector配置项， 用来决定与哪个节点配合使用。
　　以下是使用Ext.DataView和Ext.Panel输出数据
　　view sourceprint?
　　01 <script type="text/javascript">
　　02
　　03 Ext.onReady(function() {
　　04
　　05 // create the data store
　　06 varstore =newExt.data.ArrayStore({
　　07 fields: [
　　08 { name:'company'},
　　09 { name:'price', type:'float'},
　　10 { name:'change', type:'float'},
　　11 { name:'pctChange', type:'float'},
　　12 { name:'lastChange', type:'date', dateFormat:'n/j h:ia' }
　　13 ]
　　14 });
　　15
　　16
　　17 // sample static data for the store
　　18 varmyData = [
　　19 ['3m Co', 71.72, 0.02, 0.03,'9/1 12:00am'],
　　20 ['Alcoa Inc', 29.01, 0.42, 1.47,'9/1 12:00am'],
　　21 ['Altria Group Inc', 83.81, 0.28, 0.34,'9/1 12:00am'],
　　22 ['American Express Company', 52.55, 0.01, 0.02,'9/1 12:00am'],
　　23 ['American International Group, Inc.', 64.13, 0.31, 0.49,'9/1 12:00am'],
　　24 ['AT&T Inc.', 31.61, -0.48, -1.54,'9/1 12:00am'],
　　25 ['Boeing Co.', 75.43, 0.53, 0.71,'9/1 12:00am'],
　　26 ['Caterpillar Inc.', 67.27, 0.92, 1.39,'9/1 12:00am'],
　　27 ['Citigroup, Inc.', 49.37, 0.02, 0.04,'9/1 12:00am'],
　　28 ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28,'9/1 12:00am'],
　　29 ['Exxon Mobil Corp', 68.1, -0.43, -0.64,'9/1 12:00am'],
　　30 ['General Electric Company', 34.14, -0.08, -0.23,'9/1 12:00am'],
　　31 ['General Motors Corporation', 30.27, 1.09, 3.74,'9/1 12:00am'],
　　32 ['Hewlett-Packard Co.', 36.53, -0.03, -0.08,'9/1 12:00am'],
　　33 ['Honeywell Intl Inc', 38.77, 0.05, 0.13,'9/1 12:00am'],
　　34 ['Intel Corporation', 19.88, 0.31, 1.58,'9/1 12:00am'],
　　35 ['International Business Machines', 81.41, 0.44, 0.54,'9/1 12:00am'],
　　36 ['Johnson & Johnson', 64.72, 0.06, 0.09,'9/1 12:00am'],
　　37 ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15,'9/1 12:00am'],
　　38 ['McDonald\'s Corporation', 36.76, 0.86, 2.40,'9/1 12:00am'],
　　39 ['Merck & Co., Inc.', 40.96, 0.41, 1.01,'9/1 12:00am'],
　　40 ['Microsoft Corporation', 25.84, 0.14, 0.54,'9/1 12:00am'],
　　41 ['Pfizer Inc', 27.96, 0.4, 1.45,'9/1 12:00am'],
　　42 ['The Coca-Cola Company', 45.07, 0.26, 0.58,'9/1 12:00am'],
　　43 ['The Home Depot, Inc.', 34.64, 0.35, 1.02,'9/1 12:00am'],
　　44 ['The Procter & Gamble Company', 61.91, 0.01, 0.02,'9/1 12:00am'],
　　45 ['United Technologies Corporation', 63.26, 0.55, 0.88,'9/1 12:00am'],
　　46 ['Verizon Communications', 35.57, 0.39, 1.11,'9/1 12:00am'],
　　47 ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63,'9/1 12:00am']
　　48 ];
　　49
　　50 // manually load local data
　　51 store.loadData(myData);
　　52
　　53 vartpl =newExt.XTemplate('<tpl for=".">',
　　54 '<div class="thumb-wrap">',
　　55 '<table><tr>',
　　56 '<td>{company}</td><td>{price}</td><td>{change}</td><td>{pctChange}</td><td>{lastChange}</td>',
　　57 '</tr></table>',
　　58 '</div>',
　　59 '</tpl>',
　　60 '<div class="x-clear"></div>');
　　61
　　62 varpanel =newExt.Panel({
　　63 id:'images-view',
　　64 frame:true,
　　65 width: 535,
　　66 autoHeight:true,
　　67 collapsible:true,
　　68 layout:'fit',
　　69 autoHeight:true,
　　70 title:'Simple DataView',
　　71
　　72 items:newExt.DataView({
　　73 store: store,
　　74 tpl: tpl,
　　75 autoHeight:true,
　　76 multiSelect:true,
　　77 overClass:'x-view-over',
　　78 itemSelector:'div.thumb-wrap',
　　79 emptyText:'No images to display'
　　80 })
　　81 });
　　82 panel.render(document.body);
　　83
　　84 });
　　85 </script>

　　转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦