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
    35,672
    Answers
    3354
    Vote Rating
    747
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar