1

I have created a panel with items and I also want to add an image to it, here is the code. (Later I add this panel to a new window).

var frmCar = Ext.create('Ext.form.Panel',{
    bodyPadding: 5,
    frame  : true,
    items    :[
        {
            xtype       : 'textfield',
            fieldLabel  : 'Number: ',
            name        : 'number'
        },,
        {
            xtype       : 'textfield',
            fieldLabel  : 'Model: ',
            name        : 'model'
        },{
            xtype       : 'textfield',
            fieldLabel  : 'Image path: ',
            name        : 'image'
        },
        { xtype: 'image',
          width: 200,
          height: 400,
          src: 'c:/image1.jpg'
        }
    ]
});

The panel shows all elements - but not the image, what am I doing wrong? Also I want to let user enter image path - do I then have to replace single path separators with double? e.g. / to this // ?

Improve this question

1 Answer 1

Reset to default
1

the extJS part looks ok. The problem is probably that you can't access image from your hardrive if you run your page from a webserver.

Try putting your image in a folder that is accessible via HTTP and use a relative URL instead of the filepath. Or try to use an image from the internet (like https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) to test if it show up.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

It seems it worked now - though image got stretched strangely - how can I set stretching properties? Also last time I managed to set an image which was located in side my project folder. Why this? PS I am running CMD web server
if you open a html file locally (double clic on the html file for example) you can access file from your file system, but if you access it trough a webserver the access to the filesystem is blocked for security reason.
Thanks I have different problem I would appreciate. This is my code with that image: codepad.org/5GEIKvJi, it opens the window with the image, but when I click the OK button, and then try to open different image, The window is not displayed anymore. Can you please help me what I did wrong?
Maybe it's because you hide the window in the code from the ok button instead of closing it, which mean the window will not be destroyed.
So what do you suggest I do?
|