Extjs4-----布局 layout 详解1-accordion(折叠)
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" />
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
//列模型
var userModel = Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
//数据
var data = [
{firstName: 'Ed', lastName: 'Spencer', age:31,'eyeColor':'blue'},
{firstName: 'Edddd', lastName: 'Spencer', age:31,'eyeColor':'Brown'},
{firstName: 'Ea', lastName: 'Spencer', age:31,'eyeColor':'blue'},
{firstName: 'Tommy', lastName: 'Maintz', age:41,'eyeColor':'Brown'},
{firstName: 'Aaron', lastName: 'Conran', age:32,'eyeColor':'blue'},
{firstName: 'Lucy', lastName: 'Conran', age:35,'eyeColor':'red'},
{firstName: 'Jamie', lastName: 'Avins', age:36,'eyeColor':'Brown'}
];
var colorRender = function(value){
if(value.indexOf('blue')>-1){
return "<font color='#4c3ff4;'>"+value+"</font>";
}else if(value.indexOf('Brown')>-1){
return "<font color='#ceab30;'>"+value+"</font>";
}else if(value.indexOf('red')>-1){
return "<font color='#ff0033;'>"+value+"</font>";
}
};
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 500,
height: 300,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',//类型为折叠
titleCollapse: true,//点击title条 就触发折叠/扩展
animate: true,
activeOnTop: false //是否扩展面板总是显示在最顶端
},
items: [
{//折叠面板的第一个面板内容
xtype: 'grid',
bodyPadding: 0,
title: 'Array Grid (Click header to collapse)',
hideCollapseTool: false,//不隐藏扩展面板的扩展图标
columnLines: true,
viewConfig: {
stripeRows: true //条纹样式
},
store: new Ext.data.Store({
model:userModel,
data: data
}),
columns:[{
text: "firstName",
dataIndex: 'firstName',
flex: 1,
sortable: false
},{
text: "lastName",
dataIndex: 'lastName',
width: 100,
hidden: false,
sortable: true
},{
text: "age",
dataIndex: 'age',
width: 70,
align: 'right',
sortable: true
},{
text: "eyeColor",
dataIndex: 'eyeColor',
width: 150,
renderer:colorRender,
sortable: true
}]
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
运行效果：
点击第二个面板的title条或者扩展图标，如图所示：
