1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default Answered: List rendering malfunction

    Answered: List rendering malfunction


    Hello,

    I came across an interesting issue.

    Every list I display, each is based on a store, renders the first element wrong, the first time it is drawn. The cls class type is NOT a list item, but some various class from the dom tree.

    Is this a known issue!?! A sample class definition where the error occurs:

    Code:
    Ext.define('Switch.view.SimpleList', {
    	extend: 'Ext.dataview.List',
    	requires: [
    		'Switch.store.GroupStore'
    	],
    
    
    	xtype: 'x-grouplist',
    	defaults: {
    		cls: 'x-list-item-body'
    	},
    	config: {
    		store: 'groupstoreID',
    		title: 'Device Groups',
    		grouped: true,
    		deselectOnContainerClick: false,
    		useComponents: true,
    		defaultType: 'x-groupdataitem'
    	},
    
    
    	refreshed: false,
    
    
    	onLoad: function() {
    
    
           this.callParent(arguments);
    		var me = this,
    		    store = me.getStore();
    
    
    		if (store.getCount() === 0 && store.isLoaded()) {
    			me.setMasked({
    				xtype: 'loadmask',
    				indicator: false,
    				message: 'Sorry, Switch has failed to retrieve the required' 
    					+ ' data from its server. Notify the admin.'
    			});
    			me.getScrollable().getScroller().setDisabled(true);
    		}
    	}
    });

  2. I am still convinced, that this is a bug, but setting the itemCls on the list to 'x-list-item-body' fixes the rendering issue...

    Code:
    Ext.define('Switch.view.SimpleList', {
        extend: 'Ext.dataview.List',
        requires: [
            'Switch.store.GroupStore'
        ],
    
    
        xtype: 'x-grouplist',
        config: {
            store: 'groupstoreID',
            title: 'Device Groups',
            grouped: true,
            deselectOnContainerClick: false,
            useComponents: true,
            defaultType: 'x-groupdataitem',
            autoLoad: true,
            itemCls: 'x-list-item-body' // FOR THE LOVE OF GOD put this in the list....
        },
    So, if you struggle with your custom ListItem and you have either rendering issues or event propagation issues, itemCls: 'x-list-item-body' is your salvation.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Answers
    3465
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you saying that the cls in the defaults object:

    Code:
    	defaults: {
    		cls: 'x-list-item-body'
    	},
    isn't getting put on all the list items? If so then this is probably because you didn't put it in the config object.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default


    Hello Mitchell,

    it is exactly what I am saying. I actually put cls: 'x-list-item-body' in the config of the list, as well as in the config of the ListItem that I use.
    It still happens to me every time I render a list first. I will enclose my ListItem, just in case something is amiss in there:

    Code:
    Ext.define('Switch.view.GroupDataItem', {
    	extend: 'Ext.dataview.component.ListItem',
    	requires: [
    		'Ext.Button',
    		'Ext.Img'
    	],
    	xtype: 'x-groupdataitem',
    	config: {
    		cls: 'x-list-item-body groupdataitem',
    		layout: 'hbox',	 
    		dataMap: {
                            getName: {
                                    setHtml: 'device_name'
                            },
    			getAvatar: {
    				setSrc: 'imgUrl'
    			},
    			getDescription: {
    				setHtml: 'description'
    			},
    			getFakeStatusButton: {
    				setSrc: 'buttonUrl',
    				status: 'status',
    				name: 'device_name'
    			}
    		
                    },
    		avatar: {
    			docked: 'left',
    			margin: '5 5',
    			width: 60,
    			height: 60
    		},
    		
    		name: {
    			docked: 'left',
    			width: 80,
    			margin: '10 0'
    		},
    	
    		description: {
    			docked: 'left',
    			width: 200,
    			styleHtmlContent: true,
    			style: '<h3>{description}</h3>'
    		},
    		fakeStatusButton: {
    			docked: 'left',
    			margin: '5 5',
    			width: 60,
    			height: 60,
    			cls: 'fakeStatusButton'
    		}
    
    
    	},
            // Many functions follow here, but those should be of no importance for the issue
    });

  5. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default


    Sadly, this is still not resolved... Any clues?!?

  6. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default


    I figured some more of it out, however, I cannot fathom, how this comes to be:

    Code:
    x-container x-list-item x-stretched x-list-header-wrap x-list-item-first
    
    
    This is the cls of the first element in the list.
    Code:
    x-container x-list-item x-list-item-body groupdataitem x-stretched
    This is the cls of any other record in the list. There are several differences and most importantly, groupdataitem, is missing in the first. Also x-list-item-body is missing. First of all, it renders wrong, secondly, my event listeners do not fire. itemtap, itemselect, itemtaphold etc. all fire solely on x-list-item.

    I am at a loss. Anyone?

  7. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default


    I have recognized another issues:

    I am still a little disappointed, that I have to, at all, set 'x-list-item-body' myself to get the ListItem to work.

    However, this is due to the fact, that the event propagation does not work on anything but this specific cls.

    Can I change this? Because the list renders perfectly without the 'x-list-item-body' cls definitions, but does not fire any events.

    With the current version, the first element is broken, since for some reason, it is treated differently by the initialization. The 'x-list-item-body' section is somewhere right of all the other div fields on that ListItem. This is only true for the list head.
    I am sorry, but this just feels incredibly broken to me. I cannot find information and I have been posing questions regarding this issue for a month without anyone being able to provide a solution or so much as an idea, why this is happening.

    Should I open a bug report?

    EDIT:

    This my first thread from almost two months ago:
    http://www.sencha.com/forum/showthre...-look-and-feel

  8. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    34
    Answers
    2
    Vote Rating
    0
    jjaskols is on a distinguished road

      0  

    Default


    I am still convinced, that this is a bug, but setting the itemCls on the list to 'x-list-item-body' fixes the rendering issue...

    Code:
    Ext.define('Switch.view.SimpleList', {
        extend: 'Ext.dataview.List',
        requires: [
            'Switch.store.GroupStore'
        ],
    
    
        xtype: 'x-grouplist',
        config: {
            store: 'groupstoreID',
            title: 'Device Groups',
            grouped: true,
            deselectOnContainerClick: false,
            useComponents: true,
            defaultType: 'x-groupdataitem',
            autoLoad: true,
            itemCls: 'x-list-item-body' // FOR THE LOVE OF GOD put this in the list....
        },
    So, if you struggle with your custom ListItem and you have either rendering issues or event propagation issues, itemCls: 'x-list-item-body' is your salvation.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi