ExtJS4 组件缩放

不念不忘少年蓝@ 2022-07-17 02:20 174阅读 0赞

效果图：

![Center][]

\{  
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 : '参考'  
\}\]

[Center]: /images/20220717/650e8236b2054d7cb727bcfb1dc9c862.png