Results 1 to 3 of 3

Thread: Inserting panels into a container

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    19
    Vote Rating
    0
      0  

    Default Inserting panels into a container

    Sorry about the newbie question, but I'm still wrapping my head around doing layouts in Extjs -- I'm used to plain HTML + CSS!

    I want to create a screen with a toolbar (which works) and below that the screen split into two parts. On the left, a carousel of images. On the right, some text. The carousel works by itself as a panel, but when I try and use a Ext.Container to hold both panels, nothing appears. Here's the code:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
    
            var carousel2 = new Ext.Carousel({
                direction: 'vertical',
                ui: 'light',
                defaults: {
                    cls: 'card'
                },
                items: [{
                    title: 'Tab 1',
                    html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
                },
                {
                    title: 'Tab 2',
                    html: '<img src="images/image2.jpg" />'
                },
                {
                    title: 'Tab 3',
                    html: '<img src="images/image3.jpg" />'
                }]
            });
    
    		var tb = new Ext.Toolbar({
    			renderTo: document.body,
    			fullscreen: true,
    			height:50,
    			items: [
    			{
    				text: 'Back'
    			}
    			]
    		});
    		
    		var fixedimage = new Ext.Panel({
    			title: 'Fixed Image',
    			html: '<p>Hi there</p>'
    		});
    		
    		var comparescreen = new Ext.Container({
    			height: 718,
    			width: 1024,
    			layout: 'absolute',
    			autoScroll: true,
    			defaults: {
    				frame: true,
    				height: 718,
    				width: 512
    			},
    			items : [
    				{
    					name: 'carousel',
    					x : 0,
    					y : 0
    				},
    				{
    					name: 'fixedimage',
    					x : 512,
    					y : 0
    				}
    			]
    		});
        }
    });
    Any help would be appreciated. Thanks!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    I refactored your code a little bit to get closer to what you are trying to achieve. I would suggest diving into the source code of our examples, especially geocongress, kitchensink and kiva, to get more familiar with layouts, panels, containers etc.

    Anyway, here is the code.

    Code:
            var toolbar = new Ext.Toolbar({
                dock: 'top',
                items: [{
                    text: 'Back'
                }]
            });
    
            var fixedimage = new Ext.Panel({
                title: 'Fixed Image',
                html: '<p>Hi there</p>'
            });
    
            var comparescreen = new Ext.Panel({
                fullscreen: true,
                dockedItems: [toolbar],
                layout: 'hbox',
                items: [{
                    flex: 1,
                    direction: 'vertical',
                    ui: 'light',
                    items: [{
                        title: 'Tab 1',
                        html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
                    }, {
                        title: 'Tab 2',
                        html: '<img src="images/image2.jpg" />'
                    }, {
                        title: 'Tab 3',
                        html: '<img src="images/image3.jpg" />'
                    }]
                }, {
                    flex: 1,
                    html: 'content on the right'
                }]
            });

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Thanks! It does get me closer to what I was looking for. The carousel doesn't work, but I think I can add that back in. I'll look more closely at the demos in the future.

    Thanks again!

Similar Threads

  1. Replies: 6
    Last Post: 27 Aug 2012, 9:19 PM
  2. Panels side by side w/o Container?
    By Sigma in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 29 Jul 2009, 12:33 PM
  3. [SOLVED] Inserting a div (container) into a form
    By anjelika in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 21 Jun 2008, 9:08 AM
  4. Dragging Panels - Offset between drag container and actual object
    By alamandrax in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Nov 2007, 3:07 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •