PDA

View Full Version : [FIXED] [4.1.0 B2] missing grid loadMask on first load



saprot
9 Feb 2012, 1:20 AM
REQUIRED INFORMATION
Ext version tested:

Ext 4.1.0 BETA 2
Browser versions tested against:

Chrome 16
Chrome 17
Firefox 9
Firefox10
DOCTYPE tested against:

<!doctype html>
Description:

On first load of the grid with remote json store, loadmask is not displayed. But when refreshing the store, loadMask appears.
Steps to reproduce the problem:

use attached code and put in on webserver
The result that was expected:

loadMask appears every time while the store loads
The result that occurs instead:

loadmask doesn't appear on store first load
Test Case:


<!DOCTYPE html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
<meta http-equiv = "content-language" content = "en" />
<meta name = "language" content = "en" />
<title id = "page-title">loadMask test</title>
<link rel = "stylesheet" type = "text/css" href = "ext/resources/css/ext-all.css">
</head>
<body>
<script type = "text/javascript" src = "ext/ext-all-debug.js"></script>
<script type = "text/javascript">
Ext.onReady(function() {
var grid = Ext.create('Ext.grid.Panel', {
columns : [],
store : Ext.create('Ext.data.Store', {
fields : [],
proxy: {
type : 'ajax',
url : 'data.php',
reader : {
type: 'json',
root: 'data'
}
},
autoLoad: true,
listeners : {
'metachange' : function(store, meta, eOpts) {
grid.reconfigure(store, meta.columns);
}
}
}),
tools : [
{
type :'refresh',
tooltip : 'Refresh',
handler : function(event, toolEl, panel) {
grid.getStore().load();
}
}
],
title : 'loadMask missing on first load',
width : 500,
height : 500,
renderTo: Ext.getBody()
});
});




</script>
</body>
</html>


php code returning grid:


<?php
function get() {
$rows = array();
$fields = array();




$fields = array(
array(
'name' => 'test_id',
'type' => 'int'
),
array(
'name' => 'test_name',
'type' => 'string'
)
);




$columns = array(
array(
'text' => '#',
'xtype' => 'rownumberer'
),
array(
'text' => 'Test header',
'dataIndex' => 'test_name',
'id' => 'test_name',
'flex' => 1
)
);




$rows = array(
array(
'test_id' => 1,
'test_name' => 'row1'
),
array(
'test_id' => 2,
'test_name' => 'row2'
),
array(
'test_id' => 3,
'test_name' => 'row1'
),
array(
'test_id' => 4,
'test_name' => 'row1'
),
array(
'test_id' => 5,
'test_name' => 'row1'
),
);




die(json_encode(array(
'metaData' => array(
'root' => 'rows',
'fields' => $fields,
'columns' => $columns
),
'rows' => $rows,
)));
} //get




sleep(4);
get();


note that PHP execution is slowed by 4 seconds, to better show what I mean.

HELPFUL

See this URL for live test case: http://108-166-108-223.static.cloud-ips.com (http://108-166-108-223.static.cloud-ips.com/)
(http://)
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

Ubuntu 10.04
Ubuntu 12.04
Windows 7

mitchellsimoens
9 Feb 2012, 1:41 PM
Thanks for the report.

mystix
10 Feb 2012, 1:17 AM
The workaround is simple
-- just provide an initial dummy column:


// ...

columns: [{header:''}],

// ...

saprot
10 Feb 2012, 1:40 AM
@mystix thanks, workaround works well.