ExtJS4 组件缩放

效果图：

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