PDA

View Full Version : Need some speed for interface building



Tinki
28 Jul 2009, 10:30 PM
I have a form for uploading files (see AttachFiles.jpg) consist of two Ext.ux.FileUploadField, one grid, and eight buttons. Layout made by "renderTo" with pointing on divs (there are two Panels, containing Templates > Templates containing tables > tables have divs in their cells).
All this stuff lagging like a turtle. And it doesn't depend on cache, just on building stage (tested by refreshing the page).
Is there any way to increase speed? I suspect FileUploadField is the reason of everything:-?


Ext.onReady(function(){
/** --------------- ??????? ????? ------------------ **/

// ??????? ????
var iccreate_operationType = new Ext.form.Hidden({
id: 'iccreate_operationType',
name: 'iccreate_operationType',
value: ''
});
var iccreate_fileType = new Ext.form.Hidden({
id: 'iccreate_fileType',
name: 'iccreate_fileType',
value: 'documentFile'
});
var file_maindoc_url = new Ext.form.Hidden({
id: 'document',
name: 'document',
value: 'http://geb:80/edfp_spool_mn-1/generic/create/IH54ZFC2JUGBMXXQYPF3BRINKUZIMTB/FormProtocolComittee.bmp'
});

// ?????????
documentFileForm = new Ext.Panel({
formId: 'documentFileForm',
border: false,
title: '???? ?????????',
frame:false,
collapsible: false,
animCollapse: false,
plugins: [new Ext.ux.plugins.FitToParent('upperCell')],
renderTo: 'upperCell',
defaults: {
height: '100%',
allowBlank: false
},
items: [{
html: generalTable.apply({f1: 'f11', f2: 'f12', b1: 'b11', b2: 'b12', b3: 'b13', b4: 'b14'})
},
iccreate_operationType,
iccreate_fileType,
file_maindoc_url
]
});

// 4 ??????
var attButton = new Ext.Button({
text: '????????????',
disabled: true,
cls: 'x-btn-text-icon',
icon: 'img/icon_attach.gif',
id: 'attButton',
width: '100%',
renderTo: 'b11'
});
attButton.on('click',function(){loadFile()});
var scanButton = new Ext.Button({
text: '???????????',
cls: 'x-btn-text-icon',
icon: 'img/icon_scan.gif',
id: 'scanButton',
width: '100%',
renderTo: 'b12'
});
scanButton.on('click',function(){scanFile('documentFile')});
var viewButton = new Ext.Button({
text: '???????????',
cls: 'x-btn-text-icon',
icon: 'img/icon_view.gif',

id: 'viewButton',
width: '100%',
renderTo: 'b13'
});
viewButton.on('click',function(){viewDoc()});
var delButton = new Ext.Button({
text: '???????',
cls: 'x-btn-text-icon',
icon: 'img/icon_del.gif',

id: 'delButton',
width: '100%',
renderTo: 'b14'
});
delButton.on('click',function(){deleteDoc()});

// ??????? ? ??????? ??????
var file_maindoc_name = new Ext.form.Label({
text: 'FormProtocolComittee.bmp',
renderTo: 'f12'
});

// Browse ???? ??? ???????? ?????
var fileUF = new Ext.ux.FileUploadField({
width: '100%',
name: 'scanfile',
id: 'scanfile',
emptyText: '???????? ???? ????????? ??? ????????...',
hideLabel: true,
buttonText: '?????',
buttonOffset: 10,
renderTo: 'f11'
});
fileUF.on('fileselected',function(){attButton.setDisabled(false);});

/** --------------- ?????? ????? ---------------- **/
// ??????? ????
var iccreate_operationType_low = new Ext.form.Hidden({
id: 'iccreate_operationType',
name: 'iccreate_operationType',
value: ''
});
var iccreate_fileType_low = new Ext.form.Hidden({
id: 'iccreate_fileType',
name: 'iccreate_fileType',
value: 'auxFiles'
});
var file_maindoc_url_low = new Ext.form.Hidden({
id: 'auxFile',
name: 'auxFile',
value: ''
});

// ?????????
documentFileForm_low = new Ext.Panel({
formId: 'documentFileForm1',
border: false,
bodyBorder: false,
title: '????? ??????????',
frame:false,
collapsible: false,
animCollapse: false,
plugins: [new Ext.ux.plugins.FitToParent('lowerCell')],
renderTo: 'lowerCell',
defaults: {
height: '100%',
allowBlank: false
},
items: [{
html: generalTable.apply({f1: 'f21', f2: 'f22', b1: 'b21', b2: 'b22', b3: 'b23', b4: 'b24', width: '100%', tr: '</tr><tr>'})
},
iccreate_operationType_low,
iccreate_fileType_low,
file_maindoc_url_low
]
});

// 4 ??????
var attButton_low = new Ext.Button({
text: '????????????',
disabled: true,
cls: 'x-btn-text-icon',
icon: 'img/icon_attach.gif',
id: 'attButton',
width: '100%',
renderTo: 'b21'
});
attButton_low.on('click',function(){loadFile1()});
var scanButton_low = new Ext.Button({
text: '???????????',
cls: 'x-btn-text-icon',
icon: 'img/icon_scan.gif',
id: 'scanButton',
width: '100%',
renderTo: 'b22'
});
scanButton_low.on('click',function(){scanFile('auxFiles')});
var viewButton_low = new Ext.Button({
text: '???????????',
cls: 'x-btn-text-icon',
icon: 'img/icon_view.gif',
disabled: true,

id: 'viewButton',
width: '100%',
renderTo: 'b23'
});
viewButton_low.on('click',function(){viewDoc1()});
var delButton_low = new Ext.Button({
text: '???????',
cls: 'x-btn-text-icon',
icon: 'img/icon_del.gif',
disabled: true,

id: 'delButton',
width: '100%',
renderTo: 'b24'
});
delButton_low.on('click',function(){deleteDoc1()});
// ?????? ?????? ?????
var fileUF_low = new Ext.ux.FileUploadField({
width: '100%',
name: 'scanfile',
id: 'scanfile',
emptyText: '???????? ???? ?????????? ??? ????????...',
hideLabel: true,
buttonText: '?????',
buttonOffset: 10,
renderTo: 'f21'
});
fileUF_low.on('fileselected',function(){attButton_low.setDisabled(false);});

var arrayData = [

];

var aStore = new Ext.data.ArrayStore({
data: arrayData,
autoDestroy: true,
idIndex: 0,
fields: [
{name: 'documentURL'},
{name: 'documentName'}
]
});

fileListGrid = new Ext.grid.GridPanel({
store: aStore,
hideHeaders: true,
height: 100,
plugins: [new Ext.ux.plugins.FitToParent()],
renderTo: 'f22',
viewConfig: {
scrollOffset: -1,
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
columns: [
{header: 'Files', id: 'filelist', sortable: false, dataIndex: 'documentName'}
],
autoWidth: true,
stripeRows: true
});
fileListGrid.on('cellclick', function(grid, rowIndex, columnIndex, e){
var tmpStr = grid.getStore().getAt(rowIndex).get("documentURL");
document.all('auxFile').value = tmpStr;
});
});

var generalTable = new Ext.Template(
'<table width="100%" height="100%">',
'<tr>',
'<td width="88%" height="100%">',
'<table width="100%" height="100%">',
'<tr>',
'<td width="100%" height="26">',
'<DIV id="{f1}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'</tr>',
'<tr>',
'<td width="100%">',
'<DIV id="{f2}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'</tr>',
'</table>',
'</td>',
'<td width="20%" height="100%" cellspacing="2" valign="top">',
'<table width="100%">',
'<tr>',
'<td width="{width}" >',
'<DIV id="{b1}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'{tr}',
'<td width="{width}" >',
'<DIV id="{b2}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'</tr>',
'<tr>',
'<td width="{width}" >',
'<DIV id="{b3}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'{tr}',
'<td width="{width}" >',
'<DIV id="{b4}" style="width:100%; height:100%; overflow:hidden;"></DIV>',
'</td>',
'</tr>',
'</table>',
'</td>',
'</tr>',
'</table>'
);

Condor
28 Jul 2009, 10:45 PM
If you want to check if the slowdown is caused by FileUploadField, you could temporarily replace the FileUploadField with an Ext.form.Field with type:'file'.

ps. I'm not a big fan of renderTo (even though I wrote the FitToParent plugin). Can't you use layouts to create this markup?

Tinki
28 Jul 2009, 10:55 PM
Still too slow, even without FUP.
I spend so much time writing layout-free interface, don't say me it was a wrong way:(