ExtJS4 组件缩放

最新推荐文章于 2017-04-25 09:54:51 发布

原创最新推荐文章于 2017-04-25 09:54:51 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4

ExtJS4 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架的应用布局设计方案，通过Accordion布局实现多个网格视图的切换与展示，包括附件管理与审计发现等内容，并提供了具体配置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

{
xtype : 'form',
region : 'center',
layout : {
type : 'accordion',
titleCollapse : false,
animate : true,
activeOnTop : false
},
flex : 2,
items : [{
xtype : 'grid',
frame : false,
layout : "column",
title : '附件',
tbar : [{
xtype : 'basebutton',
text : '上传'
}],
columns : {
items : [{
text : '序号',
flex : 0.5,
xtype : 'rownumberer'
}, {
text : '文档名称',
flex : 7,
dataIndex : 'qn1'
}]
}
}, {
xtype : 'grid',
frame : false,
layout : "column",
title : '审计发现',
tbar : [{
xtype : 'button',
btype : 'add',
iconCls : 'add',
text : '新建'
}, {
xtype : 'button',
btype : 'edit',
iconCls : 'edit',
text : '编辑'
}, {
xtype : 'button',
btype : 'delete',
iconCls : 'delete',
text : '删除'
}],
store : Ext.create('Ext.data.Store', {
fields : ['title', "qn1", "qn2", 'qn3',
'qn4', 'qn5'],
data : [{
'title' : '零售审计发现',
'qn1' : '零售',
'qn2' : '问题',
'qn3' : '重要',
'qn4' : '业务问题'
}, {
'title' : '信贷审计发现',
'qn1' : '信贷',
'qn2' : '建议',
'qn3' : '一般',
'qn4' : '成本问题'
}]
}),
columns : {
defaults : {
align : 'center',
flex : 1
},
items : [{
text : '序号',
flex : 0.5,
xtype : 'rownumberer'
}, {
flex : 1,
text : '标题',
dataIndex : 'title'
}, {
flex : 1,
text : '业务条线',
dataIndex : 'qn1'
}, {
flex : 1,
text : '类别',
dataIndex : 'qn2'
}, {
text : '严重程度',
dataIndex : 'qn3'
}, {
text : '描述',
flex : 2,
dataIndex : 'qn4'
}, {
text : '操作',
flex : 1,
dataIndex : 'qn5',
renderer : function() {
return '<a href="javascript:void(0)" id="add" color="blue">详细</a>';
}
}]
}
}, {
xtype : 'editGrid',
title : '参考'
}]