What's New?

[OPEN] [#379] DataView with DataViewAnimated plugin doesn't resize with browser.

  1. #1
    Nov 06, 2013, 2:09 PM

    [OPEN] [#379] DataView with DataViewAnimated plugin doesn't resize with browser.

    I took the sample here:
    https://examples2.ext.net/#/DataView/Advanced/Animated/

    Created a slightly altered sample below and found DataView doesn't resize like other controls when you resize the browser. It keeps the original size. Any thoughts how to correct this problem?

    <%@ Page Language="C#" EnableViewState="false" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
		if( !X.IsAjaxRequest ) {
			this.Store1.DataSource = new object[]            
            {
                new object[] { true,  false, 1,  "LG KS360", 54, "240 x 320 pixels", "2 Megapixel", "Pink", "Slider", 359, 2 },
                new object[] { true,  true,  2,  "Sony Ericsson C510a Cyber-shot", 180, "320 x 240 pixels", "3.2 Megapixel", "Future black", "Candy bar", 11, 0 },
                new object[] { true,  true,  3,  "LG PRADA KE850", 155, "240 x 400 pixels", "2 Megapixel", "Black", "Candy bar", 113, 0 },
                new object[] { true,  true,  4,  "Nokia N900 Smartphone 32 GB", 499, "800 x 480 pixels", "5 Megapixel", "( the image of the product displayed may be of a different color )", "Slider", 320, 3.500000 },
                new object[] { true,  false, 5,  "Motorola RAZR V3", 65, "96 x 80 pixels", "0.3 Megapixel", "Silver", "Folder type phone", 5, 2.2 },
                new object[] { true,  true,  6,  "LG KC910 Renoir", 242, "240 x 400 pixels", "8 Megapixel", "Black", "Candy bar", 79, 0 },
                new object[] { true,  true,  7,  "BlackBerry Curve 8520 BlackBerry", 299, "320 x 240 pixels", "2 Megapixel", "Frost", "Candy bar", 320, 2.64 },
                new object[] { true,  true,  8,  "Sony Ericsson W580i Walkman", 120, "240 x 320 pixels", "2 Megapixel", "Urban gray", "Slider", 1, 0 },
                new object[] { true,  true,  9,  "Nokia E63 Smartphone 110 MB", 170, "320 x 240 pixels", "2 Megapixel", "Ultramarine blue", "Candy bar", 319, 2.36 },
                new object[] { true,  true,  10, "Sony Ericsson W705a Walkman", 274, "320 x 240 pixels", "3.2 Megapixel", "Luxury silver", "Slider", 5, 0 },
                new object[] { false, false, 11, "Nokia 5310 XpressMusic", 140, "320 x 240 pixels", "2 Megapixel", "Blue", "Candy bar", 344, 2 },
                new object[] { false, true,  12, "Motorola SLVR L6i", 50, "128 x 160 pixels", "", "Black", "Candy bar", 38, 0 },
                new object[] { false, true,  13, "T-Mobile Sidekick 3 Smartphone 64 MB", 75, "240 x 160 pixels", "1.3 Megapixel", "", "Sidekick", 115, 0 },
                new object[] { false, true,  14, "Audiovox CDM8600", 5, "", "", "", "Folder type phone", 1, 0 },
                new object[] { false, true,  15, "Nokia N85", 315, "320 x 240 pixels", "5 Megapixel", "Copper", "Dual slider", 143, 2.6 },
                new object[] { false, true,  16, "Sony Ericsson XPERIA X1", 399, "800 x 480 pixels", "3.2 Megapixel", "Solid black", "Slider", 14, 0 },
                new object[] { false, true,  17, "Motorola W377", 77, "128 x 160 pixels", "0.3 Megapixel", "", "Folder type phone", 35, 0 },
                new object[] { true,  true,  18, "LG Xenon GR500", 1, "240 x 400 pixels", "2 Megapixel", "Red", "Slider", 658, 2.8 },
                new object[] { true,  false, 19, "BlackBerry Curve 8900 BlackBerry", 349, "480 x 360 pixels", "3.2 Megapixel", "", "Candy bar", 21, 2.44 },
                new object[] { true,  false, 20, "Samsung SGH U600 Ultra Edition 10.9", 135, "240 x 320 pixels", "3.2 Megapixel", "", "Slider", 169, 2.2 }        
            };
			this.Store1.DataBind();
		}
	}
</script>


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
	<title>Ext.NET Example</title>
</head>
<body>
	<form id="Form1" runat="server">


		<ext:ResourceManager ID="ResourceManager1" runat="server" />




		<ext:Viewport ID="vp" runat="server" Layout="FitLayout">
			<Items>
				<ext:Container ID="Panel1" runat="server" Layout="FitLayout">
					<HtmlBin>
						<style type="text/css">
							.phones-view { background-color: #fff; text-shadow: #fff 0 1px 0; position: relative; display: block; height: auto; }


							.phones-view div.phone img { margin-bottom: 1px; }


							.phones-view div.phone { float: left; padding: 8px 17px; margin: 5px; /*    margin: 10px 0 0 25px;*/ text-align: center; line-height: 14px; color: #333; font-size: 10px; font-family: "Helvetica Neue",sans-serif; height: 130px; width: 140px; overflow: hidden; border-top: 1px solid transparent; cursor: pointer; }


							.x-ie6 .phones-view div.phone,
							.x-ie7 .phones-view div.phone,
							.x-ie8 .phones-view div.phone { border-top: none; padding: 3px 2px; margin: 2px; }


							.phones-view div.phone-hover { background-color: #eee; }


							.phones-view .x-item-selected { background-color: #D3E1F1 !important; }


							.phones-view div.phone strong { color: #000; display: block; }


							.phones-view div.phone span { color: #999; }
						</style>
					</HtmlBin>


					<Items>
						<ext:Container ID="CalItem" runat="server" Border="true" Padding="5" Cls="CalPnl EditPnl" Layout="FitLayout" >
							<Items>


								<ext:DataView
									ID="phones"
									runat="server"
									DeferInitialRefresh="false"
									ItemSelector="div.phone"
									OverItemCls="phone-hover"
									MultiSelect="true"
									AutoScroll="true"
									Cls="phones-view"
									TrackOver="true">
									<Store>
										<ext:Store ID="Store1" runat="server">
											<Model>
												<ext:Model ID="Model1" runat="server" IDProperty="id">
													<Fields>
														<ext:ModelField Name="hasEmail" Type="Boolean" />
														<ext:ModelField Name="hasCamera" Type="Boolean" />
														<ext:ModelField Name="id" Type="Int" />
														<ext:ModelField Name="name" />
														<ext:ModelField Name="price" Type="Int" />
														<ext:ModelField Name="screen" />
														<ext:ModelField Name="camera" />
														<ext:ModelField Name="color" />
														<ext:ModelField Name="type" />
														<ext:ModelField Name="reviews" Type="Int" />
														<ext:ModelField Name="screen-size" Type="Int" />
													</Fields>
												</ext:Model>
											</Model>
											<Sorters>
												<ext:DataSorter Property="name" Direction="ASC" />
											</Sorters>
										</ext:Store>
									</Store>
									<Tpl ID="Tpl1" runat="server">
										<Html>
											<tpl for=".">
												<div class="phone">
													<tpl if="!Ext.isIE6">
														<img width="64" height="64" src="../../Shared/images/phones/{[values.name.replace(/ /g, "-")]}.png" />
													</tpl>
													<tpl if="Ext.isIE6">
														<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Shared/images/phones/{[values.name.replace(/ /g, "-")]}.png',sizingMethod='scale');"></div>
													</tpl>
													<strong>{name}</strong>
													<span>{price:usMoney} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</span>
												</div>
											</tpl>
										</Html>
									</Tpl>
									<Plugins>
										<ext:DataViewAnimated ID="DataViewAnimated1" runat="server" Duration="550" IDProperty="id" />
									</Plugins>
								</ext:DataView>
							</Items>
						</ext:Container>
					</Items>
				</ext:Container>
			</Items>
		</ext:Viewport>


	</form>
</body>
</html>
    Last edited by Baidaly; Nov 19, 2013 at 11:14 AM. Reason: [OPEN] [#379]
  2. #2
    Nov 06, 2013, 3:05 PM
    Hi @michaeld,

    Hmm, I see the following in the Animated plugin's sources:
    dataview.on('resize', function() {
    var store = dataview.store;
    if (store.getCount() > 0) {
        //reDraw.call(this, store);
    }
}, this);
    Redrawing on resize is turned off. I don't know the reason. Maybe, it crashed before. Currently, it seems to work. Please try this fix.

    Fix
    Ext.ux.DataView.Animated.override({
    init: function(dataview) {
        /**
            * @property dataview
            * @type Ext.view.View
            * Reference to the DataView this instance is bound to
            */
        this.dataview = dataview;
        
        var store = dataview.store;
        
        dataview.blockRefresh = true;
        dataview.updateIndexes = Ext.Function.createSequence(dataview.updateIndexes, function() {
            this.getTargetEl().select(this.itemSelector).each(function(element, composite, index) {
                element.id = element.dom.id = Ext.util.Format.format("{0}-{1}", dataview.id, store.getAt(index).internalId);
            }, this);
        }, dataview);
        
        /**
            * @property dataviewID
            * @type String
            * The string ID of the DataView component. This is used internally when animating child objects
            */
        this.dataviewID = dataview.id;
        
        /**
            * @property cachedStoreData
            * @type Object
            * A cache of existing store data, keyed by id. This is used to determine
            * whether any items were added or removed from the store on data change
            */
        this.cachedStoreData = {};
        
        //catch the store data with the snapshot immediately
        this.cacheStoreData(store.data || store.snapshot);

        dataview.on('resize', function() {
            var store = dataview.store;
            if (store.getCount() > 0) {
                reDraw.call(this, store); //fix
            }
        }, this);
        
        dataview.store.on('load', function(){
            this.cachedStoreData = {};        
            this.cacheStoreData(store.data || store.snapshot);
            dataview.blockRefresh = false;
            dataview.refresh();
            dataview.blockRefresh = true;
        }, this);

        dataview.store.on('datachanged', reDraw, this, {delay:100});
        
        function reDraw(store) {
            var parentEl = dataview.getTargetEl(),
                calcItem = store.getAt(0),
                added    = this.getAdded(store),
                removed  = this.getRemoved(store),
                previous = this.getRemaining(store);

            // Not yet rendered
            if (!parentEl) {
                return;
            }

            //make sure the correct styles are applied to the parent element
            if (Ext.isIEQuirks) {
                parentEl.applyStyles({
                    zoom: 1,
                    display : 'block',
                    position: 'relative'
                });
            }
            
            //hide old items
            Ext.each(removed, function(item) {
                var id = this.dataviewID + '-' + item.internalId;
                Ext.fly(id).animate({
                    remove  : false,
                    duration: duration,
                    opacity : 0,
                    useDisplay: true,
                    callback: function() {
                        Ext.fly(id).setDisplayed(false);
                    }
                });
            }, this);
            
            //store is empty
            if (calcItem == undefined) {
                this.cacheStoreData(store);
                return;
            }
            
            this.cacheStoreData(store);
            
            var el = Ext.get(this.dataviewID + "-" + calcItem.internalId);
            
            //if there is nothing rendered, force a refresh and return. This happens when loading asynchronously (was not
            //covered correctly in previous versions, which only accepted local data)
            if (!el) {
                dataview.refresh();
                return true;
            }
            
            //calculate the number of rows and columns we have
            var itemWidth   = el.getMargin('lr') + el.getWidth(),
                itemHeight  = el.getMargin('bt') + el.getHeight(),
                dvWidth     = parentEl.dom.clientWidth,
                columns     = Math.floor(dvWidth / itemWidth),
                rtl = this.dataview.getHierarchyState().rtl,
                styleSide = rtl ? 'right' : 'left',
                newStyle;
            
            //stores the current top and left values for each element (discovered below)
            var oldPositions = {},
                newPositions = {},
                elCache      = {};
            
            //find current positions of each element and save a reference in the elCache
            Ext.iterate(previous, function(id, item) {
                var id = item.internalId,
                    el = elCache[id] = Ext.get(this.dataviewID + '-' + id);

                oldPositions[id] = {
                    top : el.getY()  - parentEl.getY()  - el.getMargin('t') - parentEl.getPadding('t')
                };
                oldPositions[id][styleSide] = this.getItemX(el);
            }, this);
            
            //set absolute positioning on all DataView items. We need to set position, left and 
            //top at the same time to avoid any flickering
            Ext.iterate(previous, function(id, item) {
                var oldPos = oldPositions[id],
                    el     = elCache[id];

                if (el.getStyle('position') != 'absolute') {
                    newStyle = {
                        position: 'absolute',
                        top     : oldPos.top + "px"
                    };
                    newStyle[styleSide] = oldPos[styleSide] + "px";
                    elCache[id].applyStyles(newStyle);
                }
            });
            
            //get new positions
            var index = 0;
            Ext.iterate(store.data.items, function(item) {
                var id = item.internalId,
                    column = index % columns,
                    row    = Math.floor(index / columns),
                    top    = row    * itemHeight,
                    left   = column * itemWidth;

                newPositions[id] = {
                    top : top
                };
                newPositions[id][styleSide] = left;
                
                index ++;
            }, this);
            
            //do the movements
            var startTime  = new Date(),
                duration   = this.duration,
                dataviewID = this.dataviewID;
            
            var doAnimate = function() {
                var elapsed  = new Date() - startTime,
                    fraction = elapsed / duration,
                    id;

                if (fraction >= 1) {
                    for (id in newPositions) {
                        newStyle = {
                            top : newPositions[id].top + "px"
                        };
                        newStyle[styleSide] = newPositions[id][styleSide] + "px";
                        
                        Ext.fly(dataviewID + '-' + id).applyStyles(newStyle);
                    }

                    Ext.TaskManager.stop(task);
                } else {
                    //move each item
                    for (id in newPositions) {
                        if (!previous[id]) {
                            continue;
                        }
                        
                        var oldPos  = oldPositions[id],
                            newPos  = newPositions[id],
                            oldTop  = oldPos.top,
                            newTop  = newPos.top,
                            oldLeft = oldPos[styleSide],
                            newLeft = newPos[styleSide],
                            diffTop = fraction * Math.abs(oldTop  - newTop),
                            diffLeft= fraction * Math.abs(oldLeft - newLeft),
                            midTop  = oldTop  > newTop  ? oldTop  - diffTop  : oldTop  + diffTop,
                            midLeft = oldLeft > newLeft ? oldLeft - diffLeft : oldLeft + diffLeft;

                        newStyle = {
                            top : midTop + "px"
                        };
                        newStyle[styleSide] = midLeft + "px";
                        Ext.fly(dataviewID + '-' + id).applyStyles(newStyle).setDisplayed(true);
                    }
                }
            };
            
            var task = {
                run     : doAnimate,
                interval: 20,
                scope   : this
            };
            
            Ext.TaskManager.start(task);
            
            //show new items
            Ext.iterate(added, function(id, item) {
                newStyle = {
                    top    : newPositions[item.internalId].top + "px"
                };
                newStyle[styleSide] = newPositions[item.internalId][styleSide] + "px";
                Ext.fly(this.dataviewID + '-' + item.internalId).applyStyles(newStyle).setDisplayed(true);
                
                Ext.fly(this.dataviewID + '-' + item.internalId).animate({
                    remove  : false,
                    duration: duration,
                    opacity : 1
                });
            }, this);
            
            this.cacheStoreData(store);
        }
    }
});
    I asked Sencha:
    http://www.sencha.com/forum/showthread.php?275463
    Last edited by Daniil; Nov 06, 2013 at 3:12 PM.
  3. #3
    Nov 11, 2013, 11:11 PM
    BTW, this works. You may as well check the update into the SVN. Otherwise, that's a lot of redundant code for this plug-in.
  4. #4
    Nov 12, 2013, 8:55 AM
    Sencha opened a bug. Created an Issue.
    https://github.com/extnet/Ext.NET/issues/379

    I don't know why Sencha commented it out. Maybe, it might cause some other problem.

    Let's do the following. You will confirm in a while it is still working for you well and we will commit it to SVN. Deal?
  5. #5
    Nov 19, 2013, 5:53 AM
    So, could you confirm everything goes well with the override?
  6. #6
    Nov 27, 2013, 5:40 AM
    It's worked great!
  7. #7
    Nov 27, 2013, 6:37 AM
    Thank you for the confirmation!

    Committed to the trunk. It will go to the upcoming v2.4 release.

Similar Threads

  1. [CLOSED] [2.2 sencha bug] EnableOverflow on resize of browser puts overflow indicator on next line.
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 10, 2013, 2:19 PM
  2. GridPanel doesn't resize with browser
    By jimlahey in forum 1.x Help
    Replies: 1
    Last Post: Aug 18, 2011, 2:58 AM
  3. [CLOSED] Problem with Gridpanel and Viewport on browser resize
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 10, 2011, 10:44 AM
  4. Gridpanel resize with browser window
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2008, 12:05 PM
  5. [CLOSED] wanting to get panel to resize with browser
    By pkellner in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Oct 15, 2008, 1:05 AM

Posting Permissions