CODEWITHSUNDEEP
extjsextjs6
Roberto Pegoraro
Roberto Pegoraro

Reputation: 1497

Items superimposed on an image extjs

I have a side menu, and the first item is an image and after that I have a triggerfield and a tabpanel. The problem is that when you access the screen, the triggerfield and the tabpanel are over the image, and when clicked on the tabpanel then the items are adjusted on the screen. How to do that when opening the screen the fields are aligned?

https://gyazo.com/9d896a46d800812e23df68aaf5e804b9

Upvotes: 2

Views: 74

Answers (1)

Theo
Theo

Reputation: 1633

Without seeing the code it is hard to be sure, but this could be todo with the fact that the image has not loaded when it does the initial layout. If you know the dimensions of the image this can be quickly fixed by setting a height.

It may also be todo with the layout you are using - I would recommend vbox for this.

In my example I include a random number in the url to make sure it is not cached:

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            height:92,
            width:'auto',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random()
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
})

In order to make the image width fit the parent panel you could use minWidth and minHeight instead:

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            minHeight:92,
            minWidth:272,
            width:'100%',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random()
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
});

or you could use a resize listener:

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            width:'100%',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random(),
            listeners:{
                resize:function(){
                    //ratio = originalWidth/originalHeight;
                    var ratio = 272/92;
                    this.setHeight(this.getWidth()/ratio)
                }
            }
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
});

Upvotes: 1

Related Questions