O'Reilly logo

Ext JS 3.0 Cookbook by Jorge Ramon

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using forms for file uploads

The Change Picture form is a great example of how to implement file uploads in your Ext JS application. This form is also a complement to the contact form examined in the Loading form data from the server and Serving XML data to a form recipes.

Using forms for file uploads

Let's see how it's done.

How to do it...

  1. Create the component that will display the contact's picture:
    var picBox = {
    columnWidth: '100 px',
    bodyStyle: 'padding:10px',
    items: [
    { xtype: 'box',
    autoEl: { tag: 'div',
    html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
    }
    }
    ]
    }
    
  2. Create a panel with text boxes that show the file names for the current picture ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required