Image gallery inside fieldset?

Question

I designing edit form using fieldset. For example,

items: [
    {
        xtype: 'textfield',
        name: 'nameEn',
        label: 'Name (English)',
        placeholder: '',
        autoCapitalize: false,
        required: true,
        clearIcon: true
    },
    {
        xtype: 'textareafield',
        name: 'descriptionEn',
        label: 'Description (English)'
    },
    {
        xtype: 'togglefield',
        name: 'verified',
        label: 'Verified'
    }
]

And now I need photos (for view, but upload/remove is possible in future). I have no idea what to do.

Jordan Kasper · Answer 1 · 2013-02-07T16:15:15.860

1

Well, for display you can use the xtype:image (documentation here), and for upload you can use the xtype:textfield with an inputType:'file' property. However, you should note that on iOS you may not be able to do file upload without packaging an app (as mentioned in this forum post). If you want users to be able to take a picture with the camera you can use a button, and in the handler use the Ext.device.Camera component.

If you want multiple photos you may want to use an hbox layout around your image components.

Good luck!

EDIT: Here's an example of a panel with an hbox layout and horizontal scrolling. Basically, the simplest image gallery you can make in Sencha Touch (I think):

{
  xtype: 'panel',
  layout: 'hbox',
  scrollable: { direction: 'horizontal' },
  items: [
    {
      xtype: 'image',
      src: 'path/to/image.png'
    },
    {
      xtype: 'image',
      src: 'path/to/another/image.jpg'
    },
    ...
  ]
}

edited Feb 07 '13 at 16:15

answered Feb 05 '13 at 14:48

Jordan Kasper

13,153
3
36
55

Thanks for your answer. But I need more then one photo. And I don't know how to build interface (not functionality). – indapublic Feb 07 '13 at 15:45
Well, you can add multiple items in the `hbox`... I'll update the answer, maybe it'll get you going in the right direction. – Jordan Kasper Feb 07 '13 at 16:01
Ok, but maybe image carousel will be better? I try to find examples of this interface - no result – indapublic Feb 08 '13 at 01:07
Not sure what you mean by a carousel, what functionality are you looking for? – Jordan Kasper Feb 08 '13 at 01:39
Web gallery inside record modification form – indapublic Feb 08 '13 at 02:17

Image gallery inside fieldset?

1 Answers1