PDA

View Full Version : [CLOSED][3.1.1-beta] DataView layout problem with remote store


ExtMore
16 Jan 2010, 2:50 PM
Ext version tested:


Ext 3.1.1-beta w. no overrides



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


Chrome 3.0.195.38
IE8 v. 8.0.6001.18865
FF 3.5.7 (firebug 1.4.5 installed)
Safari 4.0.4
Opera 9.64



Operating System:


Windows Vista



Description:


I have a DataView in a vbox layout. The associated data store is remote. The problem is that the DataView is not laid out correctly, because the data store load has not yet completed at the time of rendering. Also if the store is reloaded as a result of user interaction, then no re-layout is done by the framework. A window resize forces a re-layout, which cleans things up. It seems that the completion of the store load should trigger a re-layout of the DataView parent?
Reproducing this requires asynchronous loading of a remote store. To make the test case below stand alone, an array store is used, but loading is deferred a little. This simulates a slow remote store.

Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Dataview layout problem with remote store load</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function() {
var myStore = new Ext.data.ArrayStore({
fields: ['f1', 'f2', 'f3', 'f4', 'f5'],
autoLoad: false
});

var data = [['bla bla 1', 'bla bla 2', 'bla bla 3', 'bla bla 4', 'bla bla 5']];

// Defer the store load a little to simulate asynchronous load of remote store..
(function () {
myStore.loadData(data);
}).defer(500);

var myTpl = new Ext.XTemplate(
'<tpl for=".">',
' <b>Field 1:</b> {f1}<br>',
' <b>Field 2:</b> {f2}<br>',
' <b>Field 3:</b> {f3}<br>',
' <b>Field 4:</b> {f4}<br>',
' <b>Field 5:</b> {f5}<br>',
'</tpl>'
);

var myDV = new Ext.DataView({
store: myStore,
tpl: myTpl,
itemSelector: ''
});

new Ext.Window({
width: 300,
height: 300,
title: "DataView layout problem",
layout: "vbox",
layoutConfig: { align: "stretch" },
items: [
{
title: 'Top',
items: myDV
},
{
title: "Bottom",
flex: 1
}
]
}).show();
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:


Save the test case in a subdirectory under the SDK examples directory. Then load the page. Then resize the window.



The result that was expected:


Second screenshot (dataview-problem-after-resize.jpg)



The result that occurs instead:


First screenshot (dataview-problem-before-resize.jpg)



Screenshot or Video:


attached



Debugging already done:


none



Possible fix:


not provided
evant
17 Jan 2010, 11:05 AM
I can see the issue from your test case, though I don't think it can be classified as a bug. Since you're not providing any explicit dimensions (either a flex, or a height), then it will be laid out according to the size of the element at that time. Since the store is not loaded, it means the content doesn't exist in the DV, which makes the element size small.

What do you suggest happens in this case? I don't really see a generic way to work around it.
ExtMore
17 Jan 2010, 1:20 PM
I can see the issue from your test case, though I don't think it can be classified as a bug. Since you're not providing any explicit dimensions (either a flex, or a height), then it will be laid out according to the size of the element at that time. Since the store is not loaded, it means the content doesn't exist in the DV, which makes the element size small.


I agree that this may not be a bug as such. I have had this "issue" in my application, and used quite some time figuring out that it was caused by async store load. This is probably because I am relatively new to ExtJS and still have a lot to learn.

The behaviour I'm after, is that the first child of the vbox is sized vertically to fit whatever is in there. The second child should get the rest of the vertical space. I don't want to explicitly specify the height of the first child, partly because it will mean hardcoding a pixel count, but more importantly, because in my application, the DataView height will vary depending on the current record in the store.


What do you suggest happens in this case? I don't really see a generic way to work around it.

In my application I have now implemented a callback for the store load. In there I call doLayout() on the Ext.Window. I was thinking that the framework could do this. Have the DataView subscribe to the store load completion event, and in there locate the containing component and force a re-layout. I am probably on thin ice here, so please be gentle when you tell me how silly this idea is.. :">
evant
17 Jan 2010, 1:35 PM
It's probably best for you to implement that kind of behaviour in your application.

I'm not a fan of the idea that a child component should force a doLayout call on the parent container, it's not really how it was designed to work.

As such, I'll mark this one as closed.
ExtMore
17 Jan 2010, 2:24 PM
It's probably best for you to implement that kind of behaviour in your application.

I'm not a fan of the idea that a child component should force a doLayout call on the parent container, it's not really how it was designed to work.

As such, I'll mark this one as closed.

OK, thanks for your time. :)