Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default Stack flexible DataViews in a Panel

    Stack flexible DataViews in a Panel


    Hey guys,

    I wish to create a panel with 2 or more dataviews in a stacked arrangement. The first requirement is that the size of each dataview depends upon the content inside it, so the height has to be flexible. The second requirement is that the entire panel should be scrollable, but the individual dataviews should not be scrollable.

    I tried to implement this by setting the layout to {type:vbox, packtart, aligntretch}, and scrollable to true; for the main panel. I also set the scrollable property to false for each child dataviews.

    The problem is that the panel is completely blank. If I set the minimum height for the child dataviews, then the content is seen; indicating that the dataviews themselves are working. However, if the content height exceeds the minimum height I set, it gets clipped.

    I hope I've explained everything properly. Any help in making this happen would be appreciated. I look forward to reading your replies.

    Thanks!

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default


    Hey guys,

    Since I wasn't getting any replies to this thread, I thought adding some sample code might help explain what I'm looking for.

    Code:
    /**
     * 		test panel for stacking dataviews
     */
    
    
    Ext.define('MM.view.DataviewTest', {
    	extend 		: 'Ext.Panel',
    	xtype  		: 'mm-dvTest',
    	config : {
    		layout: {
    			type: 'vbox',
    			pack: 'start',
    			align: 'stretch'
    		},
    		scrollable	: {
    			direction: 'vertical',
    			directionLock: true
    		},
    		items: [{
    			xtype: 'dataview',
    			store: 'store_1',
    			itemTpl: 'template_1',
    			scrollable: false
    		},{
    			xtype: 'dataview',
    			store: 'store_2',
    			itemTpl: 'template_2',
    			scrollable: false
    		}]
    	}
    });
    Should this work?

    What happens is I just see a blank panel; however, when I add a minHeight parameter to the dataviews, I can see that they are indeed populated with the correct data.

    So the problem is that the dataviews are not flexible.

    I don't wish to use minHeight because of the following reasons:
    1. The actual required space may be less than the specified minHeight, which causes some blank space.
    2. If the needed display space exceeds the specified minHeight, the display is clipped.

    Any ideas?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Something like this:

    Something like this:


    Would something like this work? Using a container to arrange the data views for vbox

    Code:
    Ext.define('MyApp.view.MyContainer', {
        extend: 'Ext.Container',
    
    
        config: {
            layout: {
                type: 'vbox'
            },
            scrollable: true,
            items: [
                {
                    xtype: 'dataview',
                    scrollable: false,
                    itemTpl: [
                        '<div>Data View Item {string}</div>'
                    ]
                },
                {
                    xtype: 'dataview',
                    scrollable: false,
                    itemTpl: [
                        '<div>Data View Item {string}</div>'
                    ]
                }
            ]
        }
    
    
    });
    Would that work? By default if the height of the dataview is not set it should have its own explicit size. If I added some sample data I could test it properly but try this for now and see how you get on.

    Do you have to have 2 dataviews? Would it also be possible to have 1 if the above doesn't work and just set what you want in a looping tpl?

    :-)

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default


    Hey! Thanks for the reply. Unfortunately, your solution did not work. If the layout is specified as 'vbox', without specifying the 'pack' parameter, then a 'flex' value has to be provided for every child element in the container. This is akin to giving them a fixed height.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Docked?

    Docked?


    I'm just thinking out loud here without having my laptop in front of me, but how about not using the vbox option then and just using the 'docked:top' parameter for the first dataview? Would that work?

    Does this example work if you are using a vbox layout, the toolbar set to flex of zero and the panel containing the data views set to 1:

    http://www.senchafiddle.com/#ouwAK#PAOSf#HrxKM

    :-)

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default


    Unfortunately, no. Docking the first dataview to the top will cause it to "stick" to the top. I need both the dataviews to scroll together as if they were one.

    Also, to answer your earlier question, I cannot use one dataview because they are displaying data from 2 different web services.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default I know...

    I know...


    Aha, I think I know how you could do it now. In your controller or init function maybe you could grab the two stores (Ext.getStore) and add then both to an array, which then gets added to the dataview in the data config.

    Will try and post some code to test my theory...I did something similar using just one store but it could work with 2 I think...

    :-)

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Maybe something like this?

    Maybe something like this?


    Maybe you could try something like this (not tested but in theory should work):

    Code:
    var store1 = Ext.getStore('store1');
    var store1total = store1.getCount();
                 
    var store2 = Ext.getStore('store2');
    var store2total = store2.getCount();
                 
    var totalpages = Math.ceil(store1total+store2total);
                 
    var dataviewpages = [];
    
    
                dataviewpages.push(Ext.create('Ext.DataView',{
                    xtype: 'Dataview',
                    store: {
                        fields: [
                        {name: 'thumbnail_image', type: 'string'}
                        ],
                        data: totalpages
                    },
                    scrollable: false,
                    loadingText: 'Loading...',
                    itemTpl: [
                    '<tpl if="thumbnail_image"><div class="videothumb"><img src={thumbnail_image} height="120" width="150" style="border: solid white 2px; margin: 20px;"/></div></tpl>'
                    ]
                }));
    
    
    var mypanel = Ext.getCmp('mypanel');
    mypanel.add(dataviewpages);
    ...or you can probably avoid pushing the dataview onto the dataviewpages array, I only did that to create paging for a multiitem carousel that contained a dataview. You can probably just add totalpages to the data config of the dataview and remove the dataviewpages.push before the Ext.Create.

    The dataview is set as scrollable: false but then in your panel you would set it to true

    :-)

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default


    Quote Originally Posted by digeridoopoo View Post
    Aha, I think I know how you could do it now. In your controller or init function maybe you could grab the two stores (Ext.getStore) and add then both to an array, which then gets added to the dataview in the data config.

    Will try and post some code to test my theory...I did something similar using just one store but it could work with 2 I think...

    :-)
    Hi again. I apologize for disappearing. I was away for work.

    I thought about your suggestion (see quote), but it seems to be a bit hacky. I could do it, but it will be a huge hassle to implement it in my app. Way too much code would need to be modified, especially since I need the unified scrolling in almost all my screens. The app that I'm working on is very data intensive, with a very fragmented api.

    Do you have any other suggestions? I still haven't been able to solve this problem. I'm still setting the minHeight in my dataview components, and I'm not happy at all with it.

    Thanks.

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default minPosition?

    minPosition?


    It is a bit hacky, but it has worked for me.

    I have one more idea, not sure if it will work. It uses getScrollable to get the maxposition of the scroller of the dataview. If you replace with your dataview code (it should have the id 'dataview') when you press one of the buttons in the console it tells you the length of the dataview as a number. If you resize the screen and press the number again you will see a different figure so it is dynamic depending on the screen size. I wonder if you could use this number somehow?

    Maybe if you have this number for both dataviews, you could do some simple maths to calculate what the flex should be for both? No idea if that would work...

    Code:
    Ext.define('MyApp.view.MyTabPanel', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    title: 'Tab 1',
                    items: [
                        {
                            xtype: 'dataview',
                            height: '100%',
                            id: 'dataview',
                            itemId: 'mydataview',
                            inline: true,
                            itemTpl: [
                                '<div>Data View Item <img src="{image}"/></div>'
                            ],
                            store: 'MyStore'
                        },
                        {
                            xtype: 'button',
                            itemId: 'mybutton',
                            top: 0,
                            text: 'MyButton'
                        },
                        {
                            xtype: 'button',
                            itemId: 'mybutton1',
                            right: 0,
                            top: 0,
                            text: 'MyButton'
                        }
                    ]
                }
            ],
            listeners: [
                {
                    fn: 'onMybuttonTap',
                    single: false,
                    event: 'tap',
                    delegate: '#mybutton'
                },
                {
                    fn: 'onMybuttonTap1',
                    single: false,
                    event: 'tap',
                    delegate: '#mybutton1'
                }
            ]
        },
    
    
        onMybuttonTap: function(button, e, eOpts) {
            
            var dataviewscroll = Ext.getCmp('dataview');
            
            var scroller = dataviewscroll.getScrollable().getScroller();
            
            var maxposition = scroller.maxPosition.y;
            console.log(maxposition);
            
            
        },
    
    
        onMybuttonTap1: function(button, e, eOpts) {
            var dataviewscroll = Ext.getCmp('dataview');
            
            var scroller = dataviewscroll.getScrollable().getScroller();
            
            var minposition = scroller.minPosition.y;
            console.log(minposition);
            
        }
    
    
    });

Thread Participants: 1

Tags for this Thread