PDA

View Full Version : 32 sec upload time for a 5*18 Grid - can it be improved?



maya
31 May 2007, 6:35 AM
Hi,

I have a Grid with 5 rows and 18 columns. It takes 32 seconds for this Grid to upload.

On the other hand, a 5 rows * 6 cols is uploaded in 4 seconds.

I think that the Grid has a performance problem when the num. of columns is high. (an exponential problem).

What can I do in order to improve performance?

Thanks,
Maya

jon.whitcraft
31 May 2007, 6:59 AM
That is strange. I have a grid with 4 columns and about 110 rows and it loads in an instant.

How are you supplying the data to the gird? I am using JSON to return it from the server.

Can you post the init code for the grid so we can see the code that creates the grid?

Thanks,

perrich
31 May 2007, 7:06 AM
I've a 30 rows by 12 columns grid. Browser build time is less than 1s. Request result is network dependant but constant.

If DS load 10,000 rows, it takes many seconds to load and parse the result.

You can check loading time with firefox and firebug (it can display loading time for each file/request).

maya
31 May 2007, 7:33 AM
Thanks for both of your replies.

Both of you don't have so many columns. - maybe the num of columns causes the problem.
Please find enclosed my code (a 6 rows*30 columns). Most of the column values are empty. In IE it takes 19 seconds load time.

Thanks,
Maya
---------

My code:
===========


<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
<div id="grid_panel">
<div id="grid_table"></div>
<div id="GridDD"></div>
</div>
<script type="text/javascript">
var grid;
var orgIDs;
var Example = {
init : function(){
var myData = [
[1,'<input type="checkbox" class="regular_form_element" name="i_select_3378" value="3378" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','<font class="new_object">Maintaining an Audit Trail</font>','Audit Trail and report as a result of validation requirements.','No','Customization','--','On hold','Medium','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','MM 21-05-07 19:43','MM 21-05-07 19:43','MM 21-05-07 19:43','<a href="javascript:void(window.open(&#39tt.php?pr_id=12&level_id=1&obj_to_move_id=3378&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>'],[2,'<input type="checkbox" class="regular_form_element" name="i_select_3377" value="3377" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','<font class="new_object">Maintaining an Audit Trail</font>','Audit Trail and report as a result of validation requirements.','No','Customization','--','On hold','Medium','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','MM 21-05-07 19:32','MM 21-05-07 19:32','MM 21-05-07 19:32','<a href="javascript:void(window.open(&#39test.php?pr_id=12&level_id=1&obj_to_move_id=3377&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>'],[3,'<input type="checkbox" class="regular_form_element" name="i_select_995" value="995" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','Maintaining an Audit Trail','Audit Trail and report as a result of validation requirements.','No','Customization','--','On hold','Medium','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','RR 22-09-05 08:14','RR 10-09-06 21:27','RR 10-09-06 21:27','<a href="javascript:void(window.open(&#39test.php?pr_id=12&level_id=1&obj_to_move_id=995&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>'],[4,'<input type="checkbox" class="regular_form_element" name="i_select_997" value="997" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','View my Information - Employee Self Service','Employee can enter self service and view self information.','No','Customization','--','Postponed to future phase','High','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','RR 22-09-05 08:14','RR 10-09-06 21:27','RR 10-09-06 21:27','<a href="javascript:void(window.open(&#39test.php?pr_id=12&level_id=1&obj_to_move_id=997&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>'],[5,'<input type="checkbox" class="regular_form_element" name="i_select_998" value="998" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','View subordinates Information - Manager Self Service','Supervisors can view all kinds of information regarding their subordinates.','No','Personalization','--','Postponed to future phase','High','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','RR 22-09-05 08:14','RR 10-09-06 21:27','RR 10-09-06 21:27','<a href="javascript:void(window.open(&#39test.php?pr_id=12&level_id=1&obj_to_move_id=998&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>'],[6,'<input type="checkbox" class="regular_form_element" name="i_select_1004" value="1004" style="float: center;" onclick="checkAllCheckboxStates_all(this)">','[G]','Maintain HRMS security rules','HR securityaccording to business, sub-business, departments and allowed menus and functions should be maintained according to definitions from HR','No','Configuration','--','Active','High','--','Yes','--','--','--','--','--','--','--','--','--','--','--','--','--','--','--','RR 22-09-05 08:14','RR 10-09-06 21:27','RR 10-09-06 21:27','<a href="javascript:void(window.open(&#39test.php?pr_id=12&level_id=1&obj_to_move_id=1004&obj_to_move_type=requirement&pr1_id=12&pr2_id=&pr3_id=&pr4_id=&only_fst_toolbar=true&#39,&#39&#39,&#39width=630, height=325, location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=no&#39))"><img src="images/small_copy.gif" border="0" ALT="Duplicate Requirement"></a>']];var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'grid_auto_num'},{name: ''},{name: 'is_global'},{name: 'field1'},{name: 'field2'},{name: 'field3'},{name: 'field33'},{name: 'field40'},{name: 'field38'},{name: 'field39'},{name: 'field23'},{name: 'field22'},{name: 'field21'},{name: 'field36'},{name: 'field37'},{name: 'field12'},{name: 'field13'},{name: 'field14'},{name: 'field15'},{name: 'field16'},{name: 'field17'},{name: 'field34'},{name: 'field11'},{name: 'field18'},{name: 'field19'},{name: 'field20'},{name: 'field29'},{name: 'defined_by'},{name: 'last_user'},{name: 'local_last_user'},{name: 'grid_copy'} ])
});
ds.load();


var colModel = new Ext.grid.ColumnModel([
{header: '#', width:10 , sortable: true, locked:false, dataIndex: 'grid_auto_num', hidden: false},{header: '<img src="images/select.gif" border="0" ALT="Select">', width:60 , sortable: true, locked:false, dataIndex: '', hidden: false},{header: 'G/L', width:60 , sortable: true, locked:false, dataIndex: 'is_global', hidden: false},{header: '*Name', width:60 , sortable: true, locked:false, dataIndex: 'field1', hidden: false},{header: 'Description', width:240 , sortable: true, locked:false, dataIndex: 'field2', hidden: false},{header: '*Is mandatory?', width:60 , sortable: true, locked:false, dataIndex: 'field3', hidden: false},{header: 'Solution type', width:60 , sortable: true, locked:false, dataIndex: 'field33', hidden: false},{header: 'Solution description', width:60 , sortable: true, locked:false, dataIndex: 'field40', hidden: false},{header: 'Status', width:60 , sortable: true, locked:false, dataIndex: 'field38', hidden: false},{header: 'Priority', width:60 , sortable: true, locked:false, dataIndex: 'field39', hidden: false},{header: 'Phase', width:60 , sortable: true, locked:false, dataIndex: 'field23', hidden: false},{header: 'Mandatory', width:60 , sortable: true, locked:false, dataIndex: 'field22', hidden: false},{header: 'Solution doc.', width:60 , sortable: true, locked:false, dataIndex: 'field21', hidden: false},{header: 'Navigation path', width:60 , sortable: true, locked:false, dataIndex: 'field36', hidden: false},{header: 'Input data', width:60 , sortable: true, locked:false, dataIndex: 'field37', hidden: false},{header: 'Primary Risk Category', width:60 , sortable: true, locked:false, dataIndex: 'field12', hidden: false},{header: 'Secondary Risk Category', width:60 , sortable: true, locked:false, dataIndex: 'field13', hidden: false},{header: 'Risk scenario', width:60 , sortable: true, locked:false, dataIndex: 'field14', hidden: false},{header: 'Risk likelihood', width:60 , sortable: true, locked:false, dataIndex: 'field15', hidden: false},{header: 'Risk impact', width:60 , sortable: true, locked:false, dataIndex: 'field16', hidden: false},{header: 'Probability of detection', width:60 , sortable: true, locked:false, dataIndex: 'field17', hidden: false},{header: 'Reviewed by', width:60 , sortable: true, locked:false, dataIndex: 'field34', hidden: false},{header: 'BTB requirement reference', width:60 , sortable: true, locked:false, dataIndex: 'field11', hidden: false},{header: 'Due: day', width:60 , sortable: true, locked:false, dataIndex: 'field18', hidden: false},{header: 'Due: Month', width:60 , sortable: true, locked:false, dataIndex: 'field19', hidden: false},{header: 'Due: year', width:60 , sortable: true, locked:false, dataIndex: 'field20', hidden: false},{header: 'Comments', width:60 , sortable: true, locked:false, dataIndex: 'field29', hidden: false},{header: 'Defined', width:60 , sortable: true, locked:false, dataIndex: 'defined_by', hidden: false},{header: 'Modified', width:60 , sortable: true, locked:false, dataIndex: 'last_user', hidden: false},{header: 'Local data modified by', width:60 , sortable: true, locked:false, dataIndex: 'local_last_user', hidden: false},{header: 'Duplicate', width:15 , sortable: true, locked:false, dataIndex: 'grid_copy', hidden: false}]);

// create the Grid
grid = new Ext.grid.Grid('grid_table', {
ds: ds,
cm: colModel,
enableColumnMove: false,
autoSizeColumns: true,
autoSizeHeaders: false,
enableRowHeightSync: true,
trackMouseOver: true,
minColumnWidth: 5

});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:0,top:0,right:0,bottom:0},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid_panel');

grid.render();

}
};
Ext.onReady(Example.init, Example, true);

</script>

jon.whitcraft
31 May 2007, 7:36 AM
Just an fyi. when posted code use the [ code][ /code] tags (remove the spaces).

Also what might be causing your problem is this parameter:



autoSizeColumns: true
Try taking that out and seeing if that helps with the load time. Because with using that it has to do the calculation 30 times for each row which is not very efficient.

maya
31 May 2007, 7:42 AM
OK, thanks.

tryanDLS
31 May 2007, 7:47 AM
Please search before posting. This has been covered and suggestions for improving performance have been made.

maya
31 May 2007, 7:50 AM
You are right! I changed the autoSizeColumns to "false" and the time reduced to 4 seconds.

Can I improve the load time? (You wrote that you had a larger table with load time<1 second).

Also, I need the autoSizeColumns=true - is there anything else I can do?

mystix
31 May 2007, 7:56 AM
a side note / question: in addition to autoSizeColumns, does setting autoSizeHeaders:true result in the same performance impact?

maya
31 May 2007, 8:06 AM
No, in my example if I change to autoSizeHeaders: true - it has no influence on the performance.