Extjs 页面布局以及dataview的使用

Ext.onReady(function(){
	
	var myData = [
        ['GE2', 'int.png',0,2],
        ['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
        ['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2],
		['GE2', 'int.png',0,2]
    ];
	
	var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'interface'},
           {name: 'url'},
           {name: 'in', type: 'float'},
           {name:'out', type: 'float'}
        ]
    });
    store.loadData(myData);
	
	/*var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );*/
	
	var tpl = new Ext.XTemplate(
		'<table>',
			'<tr>',
				'<tpl for=".">',
					'<div class="thumb-wrap" id="{interface}">',
					'<td><img src="{url}" title="网口：{interface}\n流入包统计（个）：{in}\n流出包统计（个）：{out}"></td>',
					'<tpl if="xindex % 6 === 0">',
			'</tr>',
			'<tr>',
			'</tpl></tpl></tr></table>',
        '<div class="x-clear"></div>'
    );

	
	var panel = Ext.create('Ext.panel.Panel',{
		xtype: 'panel',
		border: false,
		title: 'hello',
		html: ' ',
		layout: 'fit',
		height: 350,
		width: 500,
		items: [{
			xtype: 'container',
			layout: 'border',
			height: '100%',
			width: '100%',
			items: [
				{
					xtype: 'panel',
					region: 'north',
					height: 100,
					//title: 'My Panel',
					layout: {
						type: 'hbox',
						padding:'5',
						pack:'end',
						align:'middle'
					},
					items: [{
						xtype:'button',
                        　　　　　　　　　　　　　　text: 'Button 1'
					}]
				},
				{
					xtype: 'panel',
					region: 'west',
					width: 250,
					//title: 'My Panel',
					layout: {
						type: 'hbox',
						padding:'5',
						pack:'start',
						align:'middle'
					},
					items: [{
						xtype:'button',
                        text: 'Button 1'
					},{
						xtype:'tbspacer',
						flex:1
					},{
						xtype:'image',
						src: 'int.png',
						margin: 0
					}]
				},
				{
					xtype: 'panel',
					region: 'center',
					//title: 'My Panel',
					layout: {
						type: 'hbox',
						padding:'5',
						pack:'center',
						align:'middle'
					},
					items: new Ext.DataView({
						store: store,
						tpl: tpl,
						autoHeight:true,
						multiSelect: true,
						overClass:'x-view-over',	//鼠标悬停item时的类样式,defaults to undefined
						itemSelector:'div.thumb-wrap'//必须项,值为item选择器,此值也可为.thumb-wrap  e.g. div.some-class
					})
				}
			]
		}],
		renderTo:Ext.getBody()
	});
	
});

　效果图：