Form loadRecord takes 4 seconds to load

[999Dom999]

It it takes 4.31 seconds to load the form as per 1st image attached.

If I comment out form.getForm().loadRecord(rec); it takes 867ms as per 2nd image attached.

So its not the database load, that on its own takes 7ms. Its only when you load the records into the form.

If I test in IE its the same time. I do have a lot of fields but should this really take so long to load? I'm rebuilding a current product database thats uses html/php/mysql and the same form loading takes 327ms.

WithLoadRecord.jpg
WithoutLoadRecord.jpg

Here is my form. Any ideas why this might take so long?

Ext.define('AM.view.zeonproducts.FormView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.formview',
    initComponent: function () {
        var running = Ext.create('Ext.data.Store', {
            fields: ['code', 'display', 'cls'],
            data: [{
                'code': 'Yes',
                'display': 'Running'
            }, {
                'code': 'No',
                'display': 'Not Running'
            }, {
                'code': 'Disc',
                'display': 'Discontinued'
            }]
        });
        Ext.apply(this, {
            bodyStyle: 'padding:5px 5px 0',
            width: 800,
            minHeight: 800,
            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'side'
            },
            defaults: {
                border: false,
            },
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                height: 30,
                defaults: {
                    border: false,
                    xtype: 'panel',
                    flex: 1,
                    layout: 'anchor'
                },
                layout: 'hbox',
                items: [, {
                    items: [{
                        xtype: 'text',
                        cls: 'small-title',
                        text: 'Date Created By',
                        anchor: '-5',
                        itemId: 'createdby'
                    }, {
                        xtype: 'text',
                        cls: 'small-title',
                        text: 'Date Modified By',
                        anchor: '-5',
                        itemId: 'modifiedby'
                    }, {
                        xtype: 'hidden',
                        itemId: 'dbtype',
                        name: 'dbtype'
                    }]
                }, {
                    items: [{
                        xtype: 'combo',
                        name: 'checked',
                        store: ["Yes", "No"],
                        labelAlign: 'left',
                        fieldLabel: 'Checked',
                        forceSelection: true
                    }]
                }, {
                    items: [{
                        xtype: 'combo',
                        name: 'runLine',
                        itemId: 'running',
                        store: running,
                        labelAlign: 'left',
                        fieldLabel: 'Running Line',
                        displayField: 'display',
                        valueField: 'code',
                        editable: false,
                        forceSelection: true
                    }]
                }]
            }, {
                defaults: {
                    border: false,
                    flex: 1,
                    layout: 'anchor'
                },
                layout: 'hbox',
                height: 110,
                items: [{
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Model',
                        itemId: 'model',
                        anchor: '-5',
                        name: 'model',
                        readOnly: true
                    }, {
                        xtype: 'combo',
                        name: 'factory',
                        store: 'products.Factory',
                        fieldLabel: 'Factory',
                        displayField: 'factory',
                        valueField: 'factory',
                        forceSelection: true,
                        minChars: 2,
                        anchor: '-5'
                    }]
                }, {
                    items: [{
                        xtype: 'combo',
                        name: 'brand',
                        itemId: 'brand',
                        store: 'products.Brands',
                        fieldLabel: 'Brand',
                        displayField: 'brands',
                        valueField: 'brands',
                        forceSelection: true,
                        minChars: 2,
                        anchor: '-5'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Factory Ref',
                        anchor: '-5',
                        name: 'factref'
                    }]
                }, {
                    items: [{
                        xtype: 'combo',
                        name: 'type',
                        store: 'products.Type',
                        fieldLabel: 'Type',
                        displayField: 'type',
                        valueField: 'type',
                        forceSelection: true,
                        minChars: 2,
                        anchor: '100%'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Cad Ref',
                        anchor: '100%',
                        name: 'cadref'
                    }]
                }]
            }, {
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                },
                minHeight: 450,
                items: [{
                    xtype: 'container',
                    flex: 2,
                    items: [{
                        xtype: 'container',
                        flex: 1,
                        minHeight: 225,
                        defaults: {
                            layout: 'anchor',
                            style: {
                                padding: '5px',
                            },
                        },
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        },
                        items: [{
                            xtype: 'container',
                            flex: 1,
                            items: [{
                                xtype: 'combo',
                                name: 'material',
                                store: 'products.CaseMat',
                                fieldLabel: 'Case Material',
                                displayField: 'casemat',
                                valueField: 'casemat',
                                forceSelection: true,
                                minChars: 2,
                                anchor: '100%'
                            }, {
                                xtype: 'textarea',
                                fieldLabel: 'Dial',
                                grow: true,
                                growMin: 0,
                                width: '100%',
                                maxLength: 500,
                                enforceMaxLength: true,
                                name: 'dial'
                            }]
                        }, {
                            xtype: 'container',
                            flex: 1,
                            items: [{
                                xtype: 'textarea',
                                fieldLabel: 'Case Finishing',
                                grow: true,
                                growMin: 0,
                                width: '100%',
                                maxLength: 250,
                                enforceMaxLength: true,
                                name: 'caseplate'
                            }, {
                                xtype: 'textfield',
                                fieldLabel: 'Hands',
                                anchor: '100%',
                                name: 'hands'
                            }, {
                                xtype: 'textarea',
                                fieldLabel: 'Crown/Pushers',
                                grow: true,
                                growMin: 0,
                                width: '100%',
                                maxLength: 60,
                                enforceMaxLength: true,
                                name: 'crowpush'
                            }]
                        }]
                    }, {
                        xtype: 'container',
                        flex: 1,
                        minHeight: 225,
                        defaults: {
                            layout: 'anchor',
                            style: {
                                padding: '5px',
                            },
                        },
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        },
                        items: [{
                            xtype: 'container',
                            flex: 1,
                            items: [{
                                xtype: 'combo',
                                name: 'strapmat',
                                store: 'products.StrapMat',
                                fieldLabel: 'Strap/Bracelet Material',
                                displayField: 'strapmat',
                                valueField: 'strapmat',
                                forceSelection: true,
                                minChars: 2,
                                anchor: '100%'
                            }, {
                                xtype: 'combo',
                                name: 'waterres',
                                store: 'products.WaterRes',
                                fieldLabel: 'Water Resistancy',
                                displayField: 'waterres',
                                valueField: 'waterres',
                                forceSelection: true,
                                minChars: 2,
                                anchor: '100%'
                            }, {
                                xtype: 'combo',
                                name: 'movement',
                                store: 'products.Movement',
                                fieldLabel: 'Movement',
                                displayField: 'movement',
                                valueField: 'movement',
                                forceSelection: true,
                                minChars: 2,
                                anchor: '100%'
                            }, {
                                xtype: 'combo',
                                name: 'battype',
                                store: 'products.Battery',
                                fieldLabel: 'Battery',
                                displayField: 'battery',
                                valueField: 'battery',
                                forceSelection: true,
                                minChars: 2,
                                anchor: '100%'
                            }]
                        }, {
                            xtype: 'container',
                            flex: 1,
                            items: [{
                                xtype: 'textarea',
                                fieldLabel: 'Strap/Bracelet Finishing',
                                grow: true,
                                growMin: 0,
                                width: '100%',
                                maxLength: 150,
                                enforceMaxLength: true,
                                name: 'strapcol'
                            }, {
                                xtype: 'textarea',
                                fieldLabel: 'Functions',
                                grow: true,
                                growMin: 0,
                                width: '100%',
                                maxLength: 500,
                                enforceMaxLength: true,
                                name: 'function'
                            }]
                        }]
                    }]
                }, {
                    xtype: 'container',
                    border: 1,
                    minHeight: 225,
                    style: {
                        padding: '5px',
                    },
                    flex: 1,
                    items: [{
                        xtype: 'textarea',
                        fieldLabel: 'Picture Comments',
                        grow: true,
                        growMin: 0,
                        width: '100%',
                        maxLength: 150,
                        enforceMaxLength: true,
                        name: 'commentpic'
                    }, {
                        xtype: 'button',
                        text: 'Upload picture',
                        handler: function () {
                            if (!Ext.getCmp('img-chooser-dlg')) {
                                var model = this.up('form').query('#model')[0].value;
                                var brand = this.up('form').query('#brand')[0].value;
                                var dbtype = this.up('form').query('#dbtype')[0].value;
                                var win = Ext.create('Ext.window.Window', {
                                    id: 'img-chooser-dlg',
                                    border: 0,
                                    title: 'Choose an Image for ' + model,
                                    animateTarget: this.getEl(),
                                    items: {
                                        xtype: 'uploadimage',
                                        modelVar: model,
                                        brandVar: brand,
                                        dbtypeVar: dbtype,
                                        formVar: this.up('form')
                                    }
                                }).show();
                            }
                        },
                        flex: 1
                    }, {
                        xtype: 'container',
                        itemId: 'modelpic0',
                        style: {
                            "text-align": 'center'
                        },
                        flex: 1
                    }, {
                        xtype: 'container',
                        height: 80,
                        flex: 1,
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        },
                        items: [{
                            xtype: 'container',
                            itemId: 'modelpic1',
                            style: {
                                "text-align": 'center'
                            },
                            flex: 1
                        }, {
                            xtype: 'container',
                            itemId: 'modelpic2',
                            style: {
                                "text-align": 'center'
                            },
                            flex: 1
                        }, {
                            xtype: 'container',
                            itemId: 'modelpic3',
                            style: {
                                "text-align": 'center'
                            },
                            flex: 1
                        }]
                    }]
                }]
            }, {
                xtype: 'container',
                minHeight: 10,
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                },
                defaults: {
                    layout: 'anchor',
                    flex: 1,
                    style: {
                        padding: '5px',
                    },
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Sample Quantity',
                        anchor: '100%',
                        name: 'sampleqty'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'MOQ',
                        anchor: '100%',
                        name: 'moq'
                    }]
                }, {
                    xtype: 'container',
                    title: 'blank',
                    flex: 1
                }]
            }, {
                xtype: 'container',
                minHeight: 10,
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                },
                defaults: {
                    layout: 'anchor',
                    flex: 1,
                    style: {
                        padding: '5px',
                    },
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Packaging',
                        anchor: '100%',
                        name: 'packcost'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Inserts',
                        anchor: '100%',
                        name: 'inserts'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Additional Costs',
                        anchor: '100%',
                        name: 'addcosts'
                    }]
                }]
            }, {
                xtype: 'container',
                minHeight: 10,
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                },
                defaults: {
                    layout: 'anchor',
                    flex: 1,
                    style: {
                        padding: '5px',
                    },
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Factory Cost',
                        anchor: '100%',
                        name: 'factcost'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Bulk',
                        anchor: '100%',
                        name: 'bulk'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Landed',
                        anchor: '100%',
                        name: 'landed'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Trade',
                        anchor: '100%',
                        name: 'trade'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'FOB Hong Kong',
                        anchor: '100%',
                        name: 'fobhk'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'SSP',
                        anchor: '100%',
                        name: 'ssp'
                    }]
                }]
            }, {
                xtype: 'container',
                minHeight: 10,
                paddin: '5',
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    padding: '5px',
                },
                defaults: {
                    layout: 'anchor',
                    flex: 1,
                    style: {
                        padding: '5px',
                    },
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'textarea',
                    fieldLabel: 'Additional Info',
                    grow: true,
                    growMin: 0,
                    width: '100%',
                    maxLength: 1000,
                    enforceMaxLength: true,
                    name: 'addinfo'
                }]
            }, {
                xtype: 'container',
                minHeight: 10,
                style: {
                    background: '#ffffff',
                    borderColor: '#99bce8',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                },
                defaults: {
                    layout: 'anchor',
                    flex: 1,
                    style: {
                        padding: '5px',
                    },
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'container',
                        html: 'Inner Carton',
                        style: {
                            //'text-align' : 'center',
                            'font-weight': 'bold',
                            'font-size': '14px'
                        },
                        height: 22
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Qty',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'inqty'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Dimensions',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'indim'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Weight',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'inweight'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'container',
                        html: 'Outer Carton',
                        style: {
                            //'text-align' : 'center',
                            'font-weight': 'bold',
                            'font-size': '14px'
                        },
                        height: 22
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Qty',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'outqty'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Dimensions',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'outdim'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Weight',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'outweight'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    items: [{
                        xtype: 'container',
                        html: 'Container',
                        style: {
                            //'text-align' : 'center',
                            'font-weight': 'bold',
                            'font-size': '14px'
                        },
                        height: 22
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Qty',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'conqty'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Size',
                        labelAlign: 'left',
                        labelWidth: 70,
                        anchor: '100%',
                        name: 'consize'
                    }]
                }]
            }, {
                xtype: 'panel',
                title: 'Running Line Information',
                itemId: 'runninglineform',
                border: true,
                margin: '0 0 5 0',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                defaults: {
                    border: false
                },
                items: [{
                    xtype: 'container',
                    minHeight: 10,
                    style: {
                        background: '#ffffff',
                        borderColor: '#99bce8',
                        borderStyle: 'solid',
                        borderWidth: '1px'
                    },
                    defaults: {
                        layout: 'anchor',
                        flex: 1,
                        style: {
                            padding: '5px',
                        },
                    },
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'container',
                        flex: 1,
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Customer 1',
                            anchor: '100%',
                            name: 'customer'
                        }, {
                            xtype: 'combo',
                            name: 'season',
                            store: 'products.CustSeason1',
                            fieldLabel: 'Customer 1 Season',
                            displayField: 'season',
                            valueField: 'season',
                            forceSelection: true,
                            minChars: 2,
                            anchor: '100%'
                        }, {
                            xtype: 'textarea',
                            fieldLabel: 'Customer 1 Requirements',
                            grow: true,
                            growMin: 0,
                            anchor: '100%',
                            maxLength: 1000,
                            enforceMaxLength: true,
                            name: 'custrequire'
                        }]
                    }, {
                        xtype: 'container',
                        flex: 1,
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Customer 2',
                            anchor: '100%',
                            name: 'customer2'
                        }, {
                            xtype: 'combo',
                            name: 'season2',
                            store: 'products.CustSeason2',
                            fieldLabel: 'Customer 2 Season',
                            displayField: 'season',
                            valueField: 'season',
                            forceSelection: true,
                            minChars: 2,
                            anchor: '100%'
                        }, {
                            xtype: 'textarea',
                            fieldLabel: 'Customer 2 Requirements',
                            grow: true,
                            growMin: 0,
                            anchor: '100%',
                            maxLength: 1000,
                            enforceMaxLength: true,
                            name: 'custrequire2'
                        }]
                    }, {
                        xtype: 'container',
                        flex: 1,
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Customer 3',
                            anchor: '100%',
                            name: 'customer3'
                        }, {
                            xtype: 'combo',
                            name: 'season3',
                            store: 'products.CustSeason2',
                            fieldLabel: 'Customer 3 Season',
                            displayField: 'season',
                            valueField: 'season',
                            forceSelection: true,
                            minChars: 2,
                            anchor: '100%'
                        }, {
                            xtype: 'textarea',
                            fieldLabel: 'Customer 3 Requirements',
                            grow: true,
                            growMin: 0,
                            anchor: '100%',
                            maxLength: 1000,
                            enforceMaxLength: true,
                            name: 'custrequire3'
                        }]
                    }]
                }, {
                    xtype: 'container',
                    minHeight: 10,
                    style: {
                        background: '#ffffff',
                        borderColor: '#99bce8',
                        borderStyle: 'solid',
                        borderWidth: '1px'
                    },
                    defaults: {
                        layout: 'anchor',
                        flex: 1,
                        style: {
                            padding: '5px',
                        },
                    },
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'container',
                        flex: 1,
                        items: [{
                            xtype: 'textarea',
                            fieldLabel: 'Test Requirements',
                            grow: true,
                            growMin: 30,
                            anchor: '100%',
                            maxLength: 150,
                            enforceMaxLength: true,
                            name: 'testreq'
                        }, {
                            xtype: 'textarea',
                            fieldLabel: 'ZUK QC Approval',
                            grow: true,
                            growMin: 30,
                            anchor: '100%',
                            maxLength: 250,
                            enforceMaxLength: true,
                            name: 'zqcapp'
                        }]
                    }, {
                        xtype: 'container',
                        flex: 2,
                        items: [{
                            xtype: 'textarea',
                            fieldLabel: 'Special Instructions',
                            grow: true,
                            growMin: 94,
                            anchor: '100%',
                            maxLength: 1000,
                            enforceMaxLength: true,
                            name: 'special'
                        }]
                    }]
                }]
            }],
            buttons: ['->', {
                text: 'Save'
            }, {
                text: 'Cancel'
            }]
        });
        this.callParent(arguments);
    },
    // initComponent
});

[scottmartin]

If you remove the images, do you get a better result? If so, Are you scaling the images?

Scott.

[999Dom999]

I stripped the code out for the images and it made a few milliseconds quicker, but the 3-4 second delay is still there.

There is an initial delay as the form loads. The only way to stop that delay is to comment out the loadRecord line.

[scottmartin]

If you simply create a single json record on a file and load that into the form using loadRecord, do you see the same thing? Have you tried commenting out sections of your form?

Properties like: enforceMaxLength will slow things down, commenting out that and perhaps grow. as well.


On a side note, you have about 20 trailing comma errors in your code. These need to be corrected or it will not run on IE.

If none of this helps, please create a small test case with the JSON file I mentioned so we can have a look.

Scott.

[999Dom999]

Thanks so much, grow was the culprit. It worked really nice for my form as they don't want to have to scroll textarea's sometimes they have a few words and sometimes up to 1000 chars, so this really compacted the form. 3-4 seconds is way too much to use this feature. Its now loading with 4 images under 1 second.

My old app I used a form to create/edit models and to display the models in a separate html page and the div's would automatically expand to the size. In Ext it seemed better to display everything in the form rather than create a separate viewing page as I would have to create the layout in html and that negates the reason for me using Ext. I guess I can just resize the textarea and they will have to live with some scrolling then I'll have to create a separate print page, in this I'll have to make sure they expand so they print. Unless there is a plugin that can do this.

[tijuana]

I have the same problem, but with only a few displayfields. Each one of them takes about ~1s to load, if I have 4 of them it becomes ~4 seconds for the whole form. And the values are just around 10 chars, nothing huge. If I just replace the displayfields with textfields, problem goes away - form.loadRecord() is instantaneous.