Extjs 之dataview布局

有时候系统菜单用tree布局会显得单调内容少,这适合可以考虑DataView布局

Ext.define('MyApp.view.ReportRecord.window.ReportRecordWin', {
	extend : "Ext.window.Window",
	alias : 'widget.reportrecordwin',
	width : 1000,
	height : 510,
	autoScroll : true,
	modal : true,
	//			bodyPadding : 2,
	layout : {
		type : 'hbox',
		align : 'stretch'
	},
	items : [{
			// 导航栏
			xtype : 'dataview',
			itemId : 'nav',
			width : 100,
			margin : '0 2 0 0',
			itemSelector : 'div.dataana-nav',
			id : 'dataana',
			overItemCls : 'nav-hover',
			autoScroll : true,
			emptyText : 'No images available',
			tpl : new Ext.XTemplate(
				'<div align="center">',
				'<tpl for=".">',
				'<div class="dataana-nav">',
				'<img src="{src}" />', '<br/><span>{text}</span>',
				'</div>',
				'</tpl>',
				'</div>'),
			store : Ext.create('Ext.data.Store', {
				fields : ['src', 'text', 'card'],
				data : [{
						src : 'resources/images/but/browser.png',
						text : '1',
						card : 0
					}, {
						src : 'resources/images/but/tasks.png',
						text : '2',
						card : 1
					}, {
						src : 'resources/images/but/contacts.png',
						text : '3',
						card : 2
					}, {
						src : 'resources/images/but/notes.png',
						text : '4',
						card : 3
					}, {
						src : 'resources/images/but/clock.png',
						text : '5',
						card : 4
					}
				]
			})
		}, {
			// 内容区
			flex : 1,
			// xtype:'reportrecordtabpanel'
			xtype : 'container',
			layout : 'card',
			itemId : 'center',
			padding : 2,
			items : [{
					xtype : 'panel',
					title : '1'
				}, {
					xtype : 'panel',
					title : '2'
				}, {
					xtype : 'panel',
					title : '3'
				}, {
					xtype : 'panel',
					title : '4'
				}, {
					xtype : 'panel',
					title : '5'
				}
			]
			// 根据点击导航栏区域而改变
		}
	],
	initComponent : function () {
		var me = this;
		this.callParent(arguments);
	}
});


你可能感兴趣的:(Extjs 之dataview布局)