I just made a large form and put it in a Window, it cost me nearly 2 sec to show,any good suggestion to shortcut the showing time?

the code like this below
var up = new Ext.form.FormPanel({
style: 'padding:2px;',
anchor: '100%',
height: 320,
bodyPadding: '10 10 10 10',
items: [{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
},
items: [{
fieldLabel: '工程代码',
width: 230
},
{
xtype: 'combo',
queryMode: 'local',
displayField: 'text',
valueField: 'value',
store: new Ext.data.Store({
fields: ['text', 'value'],
data: [{
"text": "新增",
"value": 1
},
{
"text": "被驳回",
"value": 2
},
{
"text": "送审中",
"value": 3
},
{
"text": "批准",
"value": 4
},
{
"text": "已完结",
"value": 5
},
{
"text": "不批准",
"value": 6
}]
}),
fieldLabel: '状 态',
width: 185,
margins: '0 0 0 15',
value: 1
},
{
fieldLabel: '期 数',
xtype: 'numberfield',
width: 185,
margins: '0 0 0 15',
value: 0
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
},
items: [{
fieldLabel: '进度款申请编号',
width: 230
},
{
xtype: 'datefield',
fieldLabel: '截止时间',
width: 185,
margins: '0 0 0 15',
value: new Date(),
format: 'Y-m-d'
},
{
xtype: 'datefield',
fieldLabel: '审定日期',
width: 185,
margins: '0 0 0 15',
value: new Date(),
format: 'Y-m-d'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
},
items: [{
fieldLabel: '进度款申请名称',
width: 430
},
{
xtype: 'datefield',
fieldLabel: '权限分类码',
width: 185,
margins: '0 0 0 15',
value: new Date(),
format: 'Y-m-d'
},
{
xtype: 'label',
text: '开始日期:',
margins: '3 0 0 15',
width: 55
},
{
xtype: 'datefield',
width: 100,
margins: '0 0 0 5',
value: new Date(),
format: 'Y-m-d'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
},
items: [{
fieldLabel: '录入人',
width: 230
},
{
xtype: 'datefield',
fieldLabel: '录入时间',
width: 185,
margins: '0 0 0 15',
value: new Date(),
format: 'Y-m-d'
},
{
fieldLabel: '进度款主货币',
width: 185,
margins: '0 0 0 15',
value: 'RMB'
},
{
xtype: 'label',
text: '精度:',
margins: '3 0 0 15',
width: 30
},
{
xtype: 'numberfield',
text: '精度:',
margins: '0 0 0 5',
width: 50,
value: 0
},
{
xtype: 'button',
text: '按精度计算',
margins: '0 0 0 5'
}]
},
{
html: '<hr />',
border: false
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'numberfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 140
},
items: [{
fieldLabel: '当前税款',
width: 320
},
{
fieldLabel: '本期进度完成金额',
width: 320,
margins: '0 0 0 15'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'numberfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 140
},
items: [{
fieldLabel: '实际支付金额',
width: 320
},
{
fieldLabel: '本期核准完成金额',
width: 320,
margins: '0 0 0 15'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'numberfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 140
},
items: [{
fieldLabel: '本期回扣预付款',
width: 320
},
{
fieldLabel: '扣款合计',
width: 320,
margins: '0 0 0 15'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'numberfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 140
},
items: [{
fieldLabel: '本期应付进度款累计',
width: 320
},
{
fieldLabel: '本期应付金额',
width: 320,
margins: '0 0 0 15'
},
{
xtype: 'button',
text: '计算',
margins: '0 0 0 15'
}]
},
{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'numberfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 140
},
items: [{
fieldLabel: '往期实际支付金额累计',
width: 320
}]
}]
});
if (!Ext.ModelManager.isRegistered('bbfygc')) {
Ext.define('bbfygc', {
extend: 'Ext.data.Model',
fields: [{
name: 'zfxflbm',
type: 'string'
},
{
name: 'zfxflmc',
type: 'string'
}]
});
}
var storedd = Ext.create('Ext.data.TreeStore', {
model: 'bbfygc',
proxy: {
type: 'ajax',
url: 'treegridFygc.json'
},
folderSort: true
});
var fygc_west = Ext.create('Ext.tree.Panel', {
region: 'west',
width: 240,
rootVisible: false,
store: storedd,
style: 'padding:2px;',
columns: [{
xtype: 'treecolumn',
text: '支付项分类编号',
width: 110,
sortable: true,
dataIndex: 'zfxflbm'
},
{
text: '支付项分类名称',
flex: 1,
sortable: true,
dataIndex: 'zfxflmc'
}]
});
var fygc_center = new Ext.grid.GridPanel({
title: '工程量清单->第三合同段业主清单->第一百章->建筑工程一切险',
region: 'center',
style: 'padding:2px;',
store: new Ext.data.ArrayStore({
fields: [{
name: 'zfxbh'
},
{
name: 'zfxmc'
},
{
name: 'bghzje'
},
{
name: 'bghsl'
},
{
name: 'dw'
},
{
name: 'sbsl'
},
{
name: 'zfbl'
},
{
name: 'sbje'
}],
data: [
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12'],
['XSDL-001', '水电站土建、机电及金属项目', '109743.23', '20', '总额', '1', '100', '109723.12']]
}),
stripeRows: true,
columnLines: true,
columns: [{
text: '支付项编号',
width: 65,
sortable: true,
dataIndex: 'zfxbh',
align: 'center'
},
{
text: '支付项名称',
width: 120,
sortable: true,
dataIndex: 'zfxmc'
},
{
text: '变更后总金额',
width: 80,
sortable: true,
dataIndex: 'bghzje',
align: 'center'
},
{
text: '变更后数量',
width: 80,
sortable: true,
dataIndex: 'bghsl',
align: 'center'
},
{
text: '单 位',
width: 35,
sortable: true,
dataIndex: 'dw',
align: 'center'
},
{
text: '申报数量',
width: 65,
sortable: true,
dataIndex: 'sbsl',
align: 'center'
},
{
text: '支付比例(%)',
width: 65,
sortable: true,
dataIndex: 'zfbl',
align: 'center'
},
{
text: '申报金额',
width: 65,
sortable: true,
dataIndex: 'sbje',
align: 'center'
}],
tbar: [{
xtype: 'checkbox',
boxLabel: '显示全部',
width: 70,
margin: '0 0 0 5'
},
{
xtype: 'checkbox',
boxLabel: '过滤零项',
width: 70
},
{
xtype: 'checkbox',
boxLabel: '显示完成情况',
width: 90
},
'->', '按系数更新业主核准金额', {
xtype: 'numberfield',
width: 70
},
{
text: '更新'
}],
bbar: ['-', {
text: '增 加'
},
'-', {
text: '删 除'
},
'-']
});
var down = Ext.create('Ext.TabPanel', {
activeTab: 0,
style: 'padding:0px 2px 2px 2px;',
anchor: '100% -320',
items: [{
title: '费用构成',
layout: 'border',
items: [fygc_west, fygc_center]
},
{
title: '申请金额',
disabled: true
},
{
title: '原合同信息',
disabled: true
},
{
title: '扣款明细',
disabled: true
},
{
title: '已批变更',
disabled: true
},
{
title: '核准',
disabled: true
},
{
title: '下期预计',
disabled: true
},
{
title: '审批信息',
disabled: true
},
{
title: '附件(0)',
disabled: true
},
{
title: '自定义字段',
disabled: true
},
{
title: '关联',
disabled: true
},
{
title: '模板',
disabled: true
},
{
title: '计划/进度',
disabled: true
},
{
title: '自定义分类码',
disabled: true
},
{
title: '备注',
disabled: true
}]
});
var center = new Ext.form.FormPanel({
border: false,
region: 'center',
layout: 'anchor',
items: [up, down]
});
var east = new Ext.form.FormPanel({
style: 'padding:2px;',
region: 'east',
width: 100,
layout: {
type: 'vbox',
align: 'stretch',
padding: '5'
},
defaults: {
xtype: 'button',
margins: '0 0 5 0'
},
items: [{
text: '关 闭',
iconCls: 'close',
handler: function () {
w.close();
}
},
{
text: '文 档',
iconCls: 'wd'
},
{
text: '审 批',
iconCls: 'sp',
handler: function () {
sp(taskId, excutionId);
}
},
{
text: '关 联',
iconCls: 'gl'
},
{
text: '费用归集',
iconCls: 'fygj'
},
{
text: 'XML报表',
iconCls: 'yfsll'
},
{
text: '发送邮件',
iconCls: 'ck'
},
{
text: '记录归类',
iconCls: 'ck'
},
{
text: '知识相关',
iconCls: 'ck'
},
{
text: '门户相关',
iconCls: 'ck'
},
{
text: '报 表',
iconCls: 'ck'
},
{
text: '帮 助',
iconCls: 'ck'
}]
});
var w = new Ext.Window({
title: '进度申请款',
width: 950,
height: 600,
plain: true,
modal: true,
layout: 'border',
items: [center, east]
});
w.show();