how i fit image in region of viewport extjs 4?

Question

I am set image in region(viewport) from setStyle Ext.getCmp('designPanel').body.setStyle('background-image','url(test.jpg)'); now image looking 'tile' now i want to do in center in orginal size or stretch form. how i can do this. extjs 4

Answer 1

也许在身上做另一个setStyle（使用CSS属性） http://www.w3schools.com/css/css_background.asp

Answer 2

You can do it like this:

Ext.create('Ext.panel.Panel', {
id: 'designPanel',
bodyStyle: "background: url('test.jpg') no-repeat right top;",//you can us right, left
...

});

Answer 3

You should not use set style. Have you should use cls property and defining css class with a background image and css properties for x and y repeat?

Answer 4

Ext.create('Ext.panel.Panel', { //Ext.container.Container may be just as suitable
    id: 'designPanel',  //ids are almost never necessary 
    layout: 'fit',
    items: Ext.create('Ext.Img', {
        src: 'test.jpg'
    })
});

Ext.Img is not needed, it could have just as easily used a component with css to show/center the image. It doesn't really matter what you use the real stretching work is done by the fit layout.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit