有时候系统菜单用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布局,布布扣,bubuko.com
原文地址：http://my.oschina.net/11253217/blog/290619
