1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    mourawi is on a distinguished road

      0  

    Default FileUploadField layout issue

    FileUploadField layout issue


    Hi,

    I'm trying to develop a window which is to load and display image (see the picture).
    There are two buttons : Browse and Clean (which removes previously selected image)
    Image is to be loaded directly after user selects a file.

    I was trying to implement Browse button as a FileUpload field (buttonOnly=true) on FormPanel (so it looks like just a button), which I put next to Clean button in the same Panel. In general it works fine, but in IE I still have problems with layout (in Firefox it is OK).

    I would be REALLY very grateful for any help!!

    The other problem I'm having is that each time I create the window it has different size.
    (and I was trying to use everywhere fixed width and height). What am I doing wrong ?

    Code:
    	var imageView = new Ext.Panel({
    		height:300,
    		width:300,
    		autoHeight:false,
    		autoWidth:false,
    		autoScroll:true,
    		border:false,
    		region: 'center',
    		layout: 'fit'
    	})
    
    	var browseFileForm = new Ext.form.FormPanel({
    		fileUpload: true,
    		height:23,
    		width:87,
    		autoHeight:false,
    		autoWidth:false,
    		border:false,
    		bodyStyle:'background: red; padding: 0;',
    		region: 'south',
    		items:[{
    			xtype: 'fileuploadfield',
    			id: Ext.id(),
    			listeners: {
    		            	'fileselected': this.onFileSelected.createDelegate(this)
    		        },
    		        buttonOnly: true,
    		        buttonOffset:0,
    			buttonCfg: {
    				text: 'Browse',
    			        iconCls: 'brite-icon-browse'
    			}
    		}],
    		layout:'table',
    		errorReader: new Ext.data.XmlReader({
    			record: 'file',
    			success: '@success'
    		},['url']) 
    	})
    	browseFileForm.setHeight(23)
    	browseFileForm.setWidth(87)
    				
    	var buttonsPanel = new Ext.Panel({
    		height:34,
    		width:200,
    		autoHeight:false,
    		autoWidth:false,
    		border: false,
    		bodyStyle:'padding:5px; background: #CAD9EC;',
    		layout   : 'table',
    		layoutConfig: {
    		      columns: 3
    		},
    		items:[
    			browseFileForm,
    			new Ext.Button({
    				cls: 'x-btn-text-icon',
    				iconCls: 'brite-icon-delete',
    				text: 'Clear',
    				handler: this.onFileClear.createDelegate(this)
    			})
    		]
    	})				
    				
    	var win = new Ext.Window({
    		height: 300,
    		width: 300,
    		autoHeight:false,
    		autoWidth:false,
    		title: 'Upload image',
    		autoCreate : true,
    		closeAction:'hide',
    		plain: true,
    		layout   : 'table',
    		layoutConfig: {
    		       columns: 1
    		},
    		items:[imageView,buttonsPanel],
    		buttons: [{
    			cls: 'x-btn-text-icon',
    			iconCls: 'brite-icon-accept',
    			text: 'Done',
    			handler: this.onFileDone.createDelegate(this)
    		}]
    	}) 
          win.show()
    Attached Images
    Last edited by mourawi; 6 Jan 2009 at 5:02 PM. Reason: added attachment

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    can you please repost your code in *code* tags?

Thread Participants: 1