View Full Version : Animated Data View

30 Jun 2010, 11:52 AM
Is there any example animated data view WITH store from ScriptTagProxy ?, I've tried but it failed.
I've customized this example ext-3.2.1/examples/view/multisort-dataview.html so it can load data from cross domain
but it failed. I tried to track the error by commented this code

plugins : [
new Ext.ux.DataViewTransition({
duration : 550,
idProperty: 'id'

it succeed to load and view data but no animate.


4 Jul 2010, 8:38 AM
The proxy shouldn't matter.

My kneejerk reaction is: I don't think the DataViewTransition class was meant to deal with remotely loaded data.

8 Jul 2010, 5:21 AM
I'm trying to get the animated multisort-dataview working. Using 3.2-beta_6256-157. I get an error "sortFns[0] is undefined." If I leave the renderTo: in the panel definition, the tbar.adds don't work. If I move the render to the bottom of the code, the tbar additions (sort fields) show. If I click them, the direction arrow changes, but the data doesn't move or sort.

I used my own image files and everything displays in the grid as in the example. Data appears in reverse of the order it was defined in store.loadData.

Also, I had to grab the animated-dataview.css from the example site, as I couldn't find it anywhere. Without that, the list items appeared in line horizontally.

I am including, and finding all the files I see in the example. I get the same error with ext-all and ext-all-debug.
I'd greatly appreciate any help!

8 Jul 2010, 5:44 AM
OK, moving the render caused the not defined error. If I remove the initial doSort there is no error. If I then try to sort, all items appear in the first position (overlaying each other). If I move the initial doSort to after the render, the same thing happens.

8 Jul 2010, 7:36 AM
I downloaded the 3.2.0 final and tried that. Same results as the picture above. Before the sort, the items are laid out properly. After the sort they are all in the top left position. I also tried the Animated dataview without the sort (filtered) and have the same result. Of course, that code also does a store.sort.

8 Jul 2010, 7:59 AM
New info: It is only failing in FF. Works fine in IE. Although the 3.2 examples page works fine in FF.

8 Jul 2010, 8:15 AM
Solved! I guess you guys figured if you left me alone long enough I would figure it out. The last revelation gave me the clue. I changed the DOCTYPE line and it is working!
The multi-sort is a little confusing though. The second sort field is a second level of sorting within the first sort, which makes sense. But, for this application sorting on either field would probably be less confusing to a user.
The multi-sort is valid though. You just have to be careful about the order of the sort fields.:D

8 Jul 2010, 11:17 AM
Now that I have it running I have a problem similar to the first post on this thread. When I try to load the store from an external source (httpproxy), the DataViewTransition (defined as a plugin) runs before the store is loaded and gets "Undefined" errors because it is trying to count the rows and columns.
Is there a way to define a plugin later?

Or get the store loaded earlier? Maybe I could load it in my main php module and pass it in?

I love ExtJS, but it shouldn't be this difficult...

Passing in the data from the php module works. First retrieved data from database, then had to create variable where the string looked like this:
$loaddata = '[[1,0, 1, "testnewspic3", 70,"240 x 320 pixels",...]]';
Then defining global variable in the head:
<script type="text/javascript">
var loaddata = <?php echo $loaddata; ?>; //(No quotes outside the square brackets.)

16 Jul 2010, 6:52 AM
After a sort, if I select an item (click) I get the item that was originally in that position. (I open a window onClick with details about the item.)
I've tried numerous ways to detect what's there now, but the index and id are for the item that was there before the sort. Anyone got an idea on how to access the record that's shown in the current position?
I found a way around this. I noticed that the node.id was being built from the id specified in the dataview, a dash, and the record id. The node was correct after a sort, so I parsed out the id, which is what I needed to pass to the module that loaded the file list. I also needed the product name, so I built an id array with the names in PHP and passed it in along with the data store. Here's the dataview listener code:
listeners: {
click: function(dv, idx,node){
// getting around problem - dv and idx are always based on initial positions. Wrong after sort
var ID = node.id.split('-');
prodwindow.setTitle(idxarray[ID[1]] + " Downloads");
dsdownloads.load({params: {prodid: ID[1]}});