Results 1 to 7 of 7

Thread: how to show image after upload in window form extjs4

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126

    Default how to show image after upload in window form extjs4

    Hi.. sencha forum memberI am able to upload the file using below code but now as soon as the file uploaded I want to show it to my form panel . My Window looks like belowimage.jpgafter pressing the upload I am able to save the image path to my db. And on success I want to show the image to my SENCHA marked area.below is my window code
    Code:
    Ext.define('rms.view.companymgt.companyAdd',{	extend: 'Ext.window.Window',	alias: 'widget.companyadd',	id: 'companyadd',	itemId: 'companyadd',	height: 634,    width: 822,    modal: true,    resizable: false,    layout: {        type: 'border'    },    title: 'Company',    constrain: true,    imagepath: null,    initComponent: function() {        var me = this;        Ext.applyIf(me, {            items: [                {                    xtype: 'panel',                    frame: true,                    id: 'mainpanel',                    itemId: 'mainpanel',                    layout: {                        type: 'border'                    },                    preventHeader: true,                    title: 'My Panel',                    flex: 3,                    region: 'center',                    items: [                        {                            xtype: 'panel',                            id: 'westpanel',                            itemId: 'westpanel',                            width: 150,                            preventHeader: true,                            title: 'My Panel',                            flex: 1.5,                            region: 'west',                            items: [                                {                                    xtype: 'textfield',                                    id: 'cmptitle',                                    itemId: 'cmptitle',                                    margin: 10,                                    width: 450,                                    name: 'cmptitle',                                    fieldLabel: 'Company Title',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpname',                                    itemId: 'cmpname',                                    margin: 10,                                    width: 450,                                    name: 'cmpname',                                    fieldLabel: 'Company Name',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpwebsite',                                    itemId: 'cmpwebsite',                                    margin: 10,                                    width: 450,                                    name: 'cmpwebsite',                                    fieldLabel: 'Website',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpfax',                                    itemId: 'cmpfax',                                    margin: 10,                                    width: 450,                                    name: 'cmpfax',                                    fieldLabel: 'Fax No',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpcontact',                                    itemId: 'cmpcontact',                                    margin: 10,                                    width: 450,                                    name: 'cmpcontact',                                    fieldLabel: 'Contact No',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpemail1',                                    itemId: 'cmpemail1',                                    margin: 10,                                    width: 450,                                    name: 'cmpemail1',                                    fieldLabel: 'Email Contact',                                    labelWidth: 110                                },                                {                                    xtype: 'textfield',                                    id: 'cmpemail2',                                    itemId: 'cmpemail2',                                    margin: 10,                                    width: 450,                                    name: 'cmpemail2',                                    fieldLabel: 'Other Email',                                    labelWidth: 110                                },                                /*{                                    xtype: 'button',                                    id: 'btn-upload-logo',                                    itemId: 'btn-upload-logo',                                    margin: '-32 0 0 380',                                    style: 'position:absolute;\n',                                    width: 78,                                    action: 'btn-upload-logo',                                    text: 'Upload Logo'                                },*/                                {                                    xtype: 'combobox',                                    autoShow: true,                                    margin: 10,                                    width: 366,                                    itemId: 'countryname',                                    name: 'countryname',                                    fieldLabel: 'Country',                                    labelWidth: 110,                                    emptyText: 'Select Country...',                                    displayField: 'countryname',                                    store: 'countryStore',                                    valueField: 'id'                                },                                {                                    xtype: 'button',                                    id: 'btn-add-country',                                    itemId: 'btn-add-country',                                    margin: '-32 0 0 380',                                    style: 'position:absolute;',                                    width: 78,                                    action: 'btn-add-country',                                    text: 'Add Country'                                },                                {                                    xtype: 'combobox',                                    id: 'statename',                                    itemId: 'statename',                                    margin: 10,                                    width: 366,                                    name: 'statename',                                    fieldLabel: 'State',                                    labelWidth: 110,                                    emptyText: 'Select State...',                                    displayField: 'statename',                                    store: 'stateStore',                                    valueField: 'id'                                },                                {                                    xtype: 'button',                                    id: 'btn-add-state',                                    itemId: 'btn-add-state',                                    margin: '-32 0 0 380',                                    style: 'position:absolute;',                                    width: 78,                                    action: 'btn-add-state',                                    text: 'Add State'                                },                                {                                    xtype: 'combobox',                                    id: 'cityname',                                    itemId: 'cityname',                                    margin: 10,                                    width: 366,                                    name: 'cityname',                                    fieldLabel: 'City',                                    labelWidth: 110,                                    emptyText: 'Select City...',                                    displayField: 'cityname',                                    store: 'cityStore',                                    valueField: 'id'                                },                                {                                    xtype: 'button',                                    id: 'btn-add-city',                                    itemId: 'btn-add-city',                                    margin: '-32 0 0 380',                                    style: 'position:absolute;',                                    width: 78,                                    action: 'btn-add-city',                                    text: 'Add City'                                },                                {                                    xtype: 'textareafield',                                    height: 73,                                    id: 'cmpaddress',                                    itemId: 'cmpaddress',                                    margin: 10,                                    width: 450,                                    name: 'cmpaddress',                                    fieldLabel: 'Address',                                    labelWidth: 110                                },                                {                                    xtype: 'htmleditor',                                    height: 118,                                    margin: 10,                                    style: 'background-color: white;',                                    width: 452,                                    fieldLabel: 'Description',                                    labelWidth: 110                                }                            ]                        },                        {                            xtype: 'form',                            id: 'centerpanel',                            itemId: 'centerpanel',                            preventHeader: true,                            title: 'My Panel',                            flex: 1,                            region: 'center',                            items: [                                {                                    xtype: 'image',                                    height: 158,                                    itemId: 'cmplogoimg',                                    margin: 10,                                    width: 287,                                    src:''                                },                                {                                    xtype: 'filefield',                                    margin: '10 0 0 15',                                    width: 296,                                    name: 'file',                                    fieldLabel: 'File',                                    labelWidth: 50,                                    msgTarget: 'side',                                    allowBlank: false,                                    emptyText: 'Select file',                                    buttonText: 'Select a File...'                                }                            ],                            dockedItems: [                                          {                                              xtype: 'toolbar',                                              dock: 'bottom',                                              items: [                                                  {                                                      xtype: 'tbfill'                                                  },                                                  {                                                      xtype: 'button',                                                      text: 'Upload',                                                      handler: function() {                                                          var form = this.up('form').getForm();                                                          alert('VALUE IS :'+form.getValues());                                                          if(form.isValid()){                                                              form.submit({                                                                  url: 'company/UploadFile.action',                                                                  waitMsg: 'Uploading your file...',                                                                  success: function(fp, o) {                                                                      Ext.Msg.alert('Success', 'Your file has been uploaded.');                                                                      Ext.Ajax.request({                                                                    	  url: 'company/GetImages.action',                                                                    	  scope: this,                                                                    	  success: function(response,opts) {                                                                    	  	console.log('GET IMAGES');                                                                      	}                                                                      });                                                                  }                                                              });                                                          }                                                                                                                }                                                  },                                                  {                                                      xtype: 'tbseparator'                                                  },                                                  {                                                      xtype: 'button',                                                      text: 'Reset',                                                      handler: function() {                                                          this.up('form').getForm().reset();                                                      }                                                  }                                              ]                                          }                                      ]                        }                    ]                }            ],            dockedItems: [                {                    xtype: 'toolbar',                    width: 150,                    region: 'east',                    dock: 'bottom',                    items: [                        {                            xtype: 'tbspacer',                            height: 17,                            width: 385                        },                        {                            xtype: 'button',                            height: 42,                            width: 56,                            text: 'Save',                            action: 'btn-companyadd-data'                        },                        {                            xtype: 'tbseparator'                        },                        {                            xtype: 'button',                            height: 42,                            width: 56,                            text: 'Cancel',                            action: 'btn-cancel-data'                        }                    ]                }            ]        });        me.callParent(arguments);    }});
    I am able to get the server response after the file has been uploaded. But the problem is how can I display the uploaded file to the image place marked above.Yogendra SinghSr. ProgrammerKintudesigns.com

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You can return the path to the image and show the image based on that path.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126

    Thumbs up

    @mitchellsimoens

    thanks for your response. I am able to get the image path as the server side response, but I am not able to set the image to my Image src.

    So how can I set the image path available as response to my image field source.

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    If you use Ext.Img you can use the setSrc method to update the image path.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126

    Default

    still same problem not able to show image to my xtype image below is my code for the form with item image
    Code:
    items: [
                            {
                                xtype: 'form',
                                frame: true,
                                itemId: 'logoform',
                                id: 'logoform',
                                height: 320,
                                width: 375,
                                bodyPadding: 10,
                                preventHeader: true,
                                title: 'My Form',
                                items: [
                                        {
                                            xtype: 'image',
                                            height: 158,
                                            itemId: 'cmplogoimg',
                                            margin: 10,
                                            width: 287,
                                            src:'http://www.sencha.com/img/sencha-large.png'
                                        }]
                            }
                        ]
    I am not able to set the src to the data available to me from json i.e
    Code:
    {
        "companydata": [{
            "cmpname": "Kintu Designs Pvt ltd",
            "cmptitle": "Kintu Designs Pvt ltd",
            "cmpdesc": "<b>?Kintu Designs Pvt ltd</b>",
            "cmpfax": "8128812153",
            "cmpcontact": "8128812153",
            "cmpwebsite": "www.kintudesigns.com",
            "cmpemail1": "[email protected]",
            "cmpemail2": "[email protected]",
            "cmpcountry": "India",
            "cmpstate": "Gujarat",
            "cmpcity": "Surat",
            "cmpaddress": "Kintu Designs Pvt ltd Nanpura Timalyawad",
            "cmplogo": "calendar.png",
            "cmplogopath": "upload/images/",
            "cmpcreatedby": 1,
            "cmpcreatedon": 1200094446000,
            "cmpmodifiedon": 1200094446000,
            "cmpmodifiedby": 0,
            "id": 1
        }],
        "total": 1,
        "success": true
    }
    with the combination of cmplogopath and cmplogoI am able to show the image to my grid, but don't able to set the src of my xtype:image in the form code given above.

    I just want my image to be displayed there with the src as the combination of cmplogopath and cmplogo available from the json data

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  6. #6

    Default how i set window frame true from function extjs 4?

    how i set window frame true from function not from frame:true; in extjs 4?

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126

    Default

    Hi,

    anybody can help with this problem?

    thanks a lot.


    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •