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

      0  

    Default Answered: floating img inside a panel with surrounding text

    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
    191
    Answers
    23
    Vote Rating
    15
    EPV will become famous soon enough

      1  

    Default


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

  4. #3
    Sencha User crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Answers
    7
    Vote Rating
    8
    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
    122
    Answers
    3
    Vote Rating
    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