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();