1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    124
    Vote Rating
    3
    Answers
    3
    clifficious is on a distinguished road

      0  

    Default Answered: floating img inside a panel with surrounding text

    Hi,

    I was trying to generate a panel where there is a img in the top left corner and the rest is filled with text. I tried using the floating option on the img. But it is not shown then. Am I missing something?

    Thanks for any hints. Here is my code.

    Code:
    Ext.define('My.foobar.Profile', {
        extend : 'Ext.Panel',
        alias : 'widget.profile',
        itemId: 'profile',
    
    
        border : false,
        
        html : 'This is the dummy text, that should surround the image',
    
    
        initComponent : function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                dockedItems : [ 
                    {
                        xtype : 'label',
                        dock : 'top',
                        itemId : 'panelItemId',
                        text : 'Header'
                    } 
                ],
                items : [ 
                    {
                        xtype : 'image',
                        height : 302,
                        width : 238,
                        itemId : 'myItemId',
                        src : './resources/images/dummy.jpg',
                        floating: true,
                        x: 25,
                        y: 25
                    },
                ]
            });
            me.callParent(arguments);
        }
    });

  2. Inside of the html property you can add any HTML code that you want but if you want the text to be dynamic you should use the tpl and data properties instead.

  3. #2
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    306
    Vote Rating
    34
    Answers
    32
    EPV has a spectacular aura about EPV has a spectacular aura about

      1  

    Default

    Something like this?
    http://jsfiddle.net/WU4PV/1/

  4. #3
    Sencha Premium Member crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Vote Rating
    8
    Answers
    7
    crysfel will become famous soon enough

      1  

    Default

    Inside of the html property you can add any HTML code that you want but if you want the text to be dynamic you should use the tpl and data properties instead.

  5. #4
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    124
    Vote Rating
    3
    Answers
    3
    clifficious is on a distinguished road

      0  

    Default

    Thanks EPV and crysfel,

    so the answer I'm seeking is a combination of your two answers, right? I though, I could manage it without writing it in HTML and by using the img class provided by Ext.

    I'm sorry, I can't vote both of your answers the best. Thanks!

Thread Participants: 2

Tags for this Thread