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
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default Inserting a List in a TabPanel Card

    Inserting a List in a TabPanel Card


    I have 3 TabPanel items. For the People TabPanel Items, I am trying to get a contact list to load. Currently, when the contact list loads it blocks the TabPanel at the bottom of the page, breaking the app. What is the correct way to insert the contact list in the card?


    Code:
    Ext.setup({
        onReady: function () {
    
            var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };
    
            var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };
    
            var peopleDisplay = new Ext.Component({ scroll: 'vertical',
                tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
            });
    
    		Ext.regModel('Contact', {
    		    fields: ['firstName', 'lastName']
    		});
    
    		var groupingBase = {
    		    tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
    		    itemSelector: 'div.contact',
    		    singleSelect: true,
    		    grouped: true,
    		    
    		    indexBar: true,
    		    
    		    store: new Ext.data.Store({
    		        model: 'Contact',
    		        sorters: 'firstName',
    		        
    		        getGroupString : function(record) {
    		            return record.get('firstName')[0];
    		        },
    		        
    		        data: [
    		            {firstName: 'Ape', lastName: 'Evilias'},
    		            {firstName: 'Dave', lastName: 'Kaneda'},
    		            {firstName: 'Michael', lastName: 'Mullany'},
    		            {firstName: 'Abraham', lastName: 'Elias'},
    		            {firstName: 'Jay', lastName: 'Robinson'},
    		            {firstName: 'Tommy', lastName: 'Maintz'}, 
    		            {firstName: 'Ed', lastName: 'Spencer'},
    		            {firstName: 'Jamie', lastName: 'Avins'},
    		            {firstName: 'Aaron', lastName: 'Conran'}, 
    		            {firstName: 'Dave', lastName: 'Kaneda'},
    		            {firstName: 'Michael', lastName: 'Mullany'},
    		            {firstName: 'Abraham', lastName: 'Elias'},
    		            {firstName: 'Jay', lastName: 'Robinson'},
    		            {firstName: 'Tommy', lastName: 'Maintz'}, 
    		            {firstName: 'Ed', lastName: 'Spencer'},
    		            {firstName: 'Jamie', lastName: 'Avins'},
    		            {firstName: 'Aaron', lastName: 'Conran'}, 
    		            {firstName: 'Dave', lastName: 'Kaneda'},
    		            {firstName: 'Michael', lastName: 'Mullany'},
    		            {firstName: 'Abraham', lastName: 'Elias'},
    		            {firstName: 'Jay', lastName: 'Robinson'}                    
    		        ]
    		    })
    		};
    
            var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card', items: [{ html: 'Please Wait...' }, groupingBase],
                listeners: {
                    activate: function () {
    			                                
    			        if (!Ext.platform.isPhone) {
    			            new Ext.List(Ext.apply(groupingBase, {})).show();
    			        } 
    
            			this.getLayout().setActiveItem(0);
    
                    }
                }
            };
    
            new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
                items: [favoritesTab, peopleTab, settingsTab]
            });
    
        }
    });

    Thanks

  2. #2
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    What your code does is create a new list and show it, which overlays the entire page. What you want to do is add the new list to the card where you want to show it. Here's the new code for peopleTab to do that:

    Code:
    var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card', 
    items: [{ html: 'Please Wait...' }, { xtype: 'panel'}],
    listeners: {
        activate: function () {
            if (!Ext.platform.isPhone && 
                    //ensure we don't double add the list
                    this.getLayout().getLayoutItems()[1].getLayout().getLayoutItems().length == 0)
                this.getLayout().getLayoutItems()[1].add(new Ext.List(Ext.apply(groupingBase, {})));
            this.setCard(1);
        }
    }
    };
    However, there's two issues with this.

    One: because the data is static on the page, there's no need to have a Please Wait... card. That was there in case you were doing a callback. Note - There are two other approaches to blocking: hiding and showing an element on a single card (which won't give you the fancy animation when it's done); or modalling the screen out while it's working (feature request 119 will give us an in-card modal, so the user can switch card's while one is busy).

    Two: sencha is a lazy load system... the item isn't rendered until it's card is first shown. The creation of the list js object itself should be trivially light, so I don't see an advantage to adding it to the card in the activate method. An easier solution would be the following, which allows you to switch to the tab without having to worry about dynamically adding content to it.

    Code:
    var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team',  layout: 'card', 
                             items: [Ext.apply(groupingBase, {xtype: 'list'})] };
    An even easier one would be to just add xtype:'list' to the groupingBase definition, then just add the groupingBase object itself to the items collection

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default


    @meyerovb, wow very helpful. For some reason though this is inserting the client list in the card but it hugely zoomed in and isn't displaying properly. Am I missing some style setting?

  4. #4
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    Looks fine to me in safari, scrolls fine too

    list.png

    Code:
    Ext.setup({
        onReady: function () {
    
            var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };
    
            var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };
    
            var peopleDisplay = new Ext.Component({ scroll: 'vertical',
                tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
            });
    
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
    
            var groupingBase = {
                xtype: 'list',
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                singleSelect: true,
                grouped: true,
    
                indexBar: true,
    
                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'firstName',
    
                    getGroupString: function (record) {
                        return record.get('firstName')[0];
                    },
    
                    data: [
                        { firstName: 'Ape', lastName: 'Evilias' },
                        { firstName: 'Dave', lastName: 'Kaneda' },
                        { firstName: 'Michael', lastName: 'Mullany' },
                        { firstName: 'Abraham', lastName: 'Elias' },
                        { firstName: 'Jay', lastName: 'Robinson' },
                        { firstName: 'Tommy', lastName: 'Maintz' },
                        { firstName: 'Ed', lastName: 'Spencer' },
                        { firstName: 'Jamie', lastName: 'Avins' },
                        { firstName: 'Aaron', lastName: 'Conran' },
                        { firstName: 'Dave', lastName: 'Kaneda' },
                        { firstName: 'Michael', lastName: 'Mullany' },
                        { firstName: 'Abraham', lastName: 'Elias' },
                        { firstName: 'Jay', lastName: 'Robinson' },
                        { firstName: 'Tommy', lastName: 'Maintz' },
                        { firstName: 'Ed', lastName: 'Spencer' },
                        { firstName: 'Jamie', lastName: 'Avins' },
                        { firstName: 'Aaron', lastName: 'Conran' },
                        { firstName: 'Dave', lastName: 'Kaneda' },
                        { firstName: 'Michael', lastName: 'Mullany' },
                        { firstName: 'Abraham', lastName: 'Elias' },
                        { firstName: 'Jay', lastName: 'Robinson' }
                    ]
                })
            };
    
            var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
                items: [Ext.apply(groupingBase, { xtype: 'list' })]
            };
    
            new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
                items: [favoritesTab, peopleTab, settingsTab]
            });
    
        }
    });

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Are you starting your app using Ext.setup({onReady: function(){})? The setup method will automatically add meta tags to the page that will prevent the page from zooming in etc.

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default


    Thanks all, that's working fantastically. The issue was I was working off an example that had the following CSS:

    Code:
    	   .x-tabpanel > .x-panel-body .x-panel-body {
    	       padding: 100px 0;
    	       text-align: center;
    	       font-size: 72px;
    	       font-weight: bold;
    	       color: rgba(0,0,0,.2);
    	       text-shadow: rgba(255,255,255,.2) 0 1px 0;
    	       padding: 100px 15%;
    	   }

  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default


    Now that we have a nice contact list loading, it makes sense to want to be able to click a contact in the list, slide over, and see a contact detail page which has a toolbar with a back button etc. And somehow an identified to know which contact was selected.

    I'm guessing that to make this happen I want to use the "itemSelector" defined in the groupingBase above, is that correct? If so, I'm not seeing anything in the documentation that points on how to use this. Is there a URL anyone can point me to?


    Thanks

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default


    Anyone have any pointer or urls to the API I should learn? Thanks

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    So by specifying the itemSelector, you tell the List component how to figure out which markup belongs to which item. This allows the list to fire an event called selectionchange, to which the selected item is passed.

  10. #10
    Ext User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    nobosh is on a distinguished road

      0  

    Default


    Thanks Tommy! Do any of the examples illustrate how to make this happen, support the back btn etc?

Similar Threads

  1. Replies: 13
    Last Post: 30 Oct 2009, 12:44 PM
  2. [FNR] DND List-to-List INSERT 1.2.4 demo throwing JS errors
    By Baby Dingo in forum Ext GWT: Bugs (1.x)
    Replies: 2
    Last Post: 12 May 2009, 3:05 PM
  3. Replies: 6
    Last Post: 20 Apr 2009, 5:21 AM
  4. Unordered List NOT rendering inside TabPanel
    By smcguire36 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 4 Mar 2008, 4:27 AM

Thread Participants: 2